تعد إضافة الأكواد البرمجية في المقالات والمواقع أمرًا شائعًا جدًا في عالم الويب. ولكن، يمكن أن يكون من الصعب على القراء تصفح هذه الأكواد وفهمها. لحسن الحظ، يوجد حل لهذه المشكلة في مدونتك على بلوجر، حيث يمكنك الاستفادة من بعض الميزات الرائعة التي تسهل على القراء فهم الأكواد وتصفحها.
تلوين الأكواد بحسب لغتها البرمجية
يعد تلوين الأكواد بألوان مختلفة بحسب لغتها البرمجية من الأشياء المفيدة للقراء، والتي توفر لهم الكثير من الوقت والجهد في فهم هذه الأكواد. لهذا الغرض، يمكنك استخدام مكتبة Highlighter لتحقيق هذه الميزة. تحتوي هذه المكتبة على العديد من لغات البرمجة المدعومة، بما في ذلك HTML وCSS وJavaScript وPHP وPython وغيرها الكثير.
تحديد الأكواد بنقرة واحدة
يمكن للأكواد أن تكون طويلة جدًا في بعض الأحيان، ويمكن أن يكون من الصعب على القراء تحديد ونسخ هذه الأكواد بشكل صحيح. للحلول لهذه المشكلة، يمكنك استخدام ميزة تحديد الأكواد بنقرة واحدة، حيث يمكن للقراء تحديد الكود بكل سهولة ونسخه بشكل صحيح.
نسخ الأكواد بنقرة واحدة
بعض الأكواد يمكن أن تكون طويلة جدًا، ويمكن أن يكون من الصعب على القراء نسخها بشكل صحيح. لحل هذه المشكلة، يمكنك استخدام ميزة نسخ الأكواد بنقرة
يجب عليك إضافة الأكواد الخاصة بتفعيل الميزات. يمكنك القيام بذلك كالتالي:
---انسخ الأكواد التالية والصقها في الوسم <head>:
<link href='https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css' rel='stylesheet'/>
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'></script>
أضف الأكواد التالية في الوسم <body>:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('pre').addClass('prettyprint');
prettyPrint();
});
//]]>
</script>
أضف الأكواد التالية في الوسم <head> لإضافة زر النسخ التلقائي:
<link href='https://rawcdn.githack.com/sourabhv/Flaunt.js/master/css/flaunt.css' rel='stylesheet' />
<script src='https://rawcdn.githack.com/sourabhv/Flaunt.js/master/dist/flaunt.min.js'></script>
أضف الأكواد التالية في الوسم <body> لتفعيل زر النسخ التلقائي:
<script>
$(function() {
$('pre.prettyprint').parent().addClass('code-wrap');
$('pre.prettyprint').append('<div class="copy-button">نسخ</div>');
$('pre.prettyprint').hover(function() {
$(this).find('.copy-button').show();
}, function() {
$(this).find('.copy-button').hide();
});
$('.copy-button').click(function() {
var html = $(this).parent().html();
html = html.replace(/<br>/gi, '\n');
html = html.replace(/<(?:.|\n)*?>/gm, '');
html = html.replace(/&gt;/g, '>');
html = html.replace(/&lt;/g, '<');
html = html.replace(/&amp;/g, '&');
html = html.replace(/&nbsp;/g, ' ');
html = html.replace(/&quot;/g, '"');
html = html.replace(/&#39;/g, "'");
var input = document.createElement('textarea');
document.body.appendChild(input);
input.value = html;
input.select();
document.execCommand('copy');
input.remove();
$(this).text('تم النسخ!');
});
});
</script>
بهذه الطريقة، يمكنك تضمين الأكواد البرمجية داخل مقالاتك بكل سهولة وجعلها أكثر جاذبية وفائدة للزوار. وتذكر أن تحتفظ بنسخة احتياطية من قالب مدونتك قبل إجراء أي تعديلات.
