كود صندوق الأكواد بمميزات عديدة

جئتكم اليوم بإضافة وميزة مفيدة جدًا للمدونين، وخاصة للذين يطرحون أكوادًا في مقالاتهم ومواقعهم. طبعًا، التعامل مع المواقع وسهولة تصفحها وأخذ المعلومات أصبح ضروريًا الآن أن يكون بمنتهى السهولة والبساطة، نظرًا لشدة المنافسة بين المواقع وتقديمهم لما هو أفضل للمستخدم العادي.

ومن أحد الأمور المزعجة عند طرح مقال معين يحتوي على أكواد طويلة أو قصيرة هي كيفية ظهورها للمشاهد، والأهم هو كيفية تعامله معها، وهل سيستفيد منها كما نعتقد؟!

في مقالي هذا، سأطرح بعض الميزات بخصوص تضمين الأكواد البرمجية داخل المقالات في بلوجر، وهي كالتالي:

• إضافة ميزة تلوين الكود بحسب لغته البرمجية باستخدام مكتبة Highlighter.
• إضافة ميزة النقر مرتين لتحديد الكود المضمن كاملًا.
• إضافة ميزة زر تلقائي لنسخ الكود كاملًا.

تركيب الميزات على مدونتك:

أولًا، اتجه إلى بلوجر ثم سجل دخولك لمدونتك، ومن ثم اتجه إلى المظهر (يفضل أخذ نسخة احتياطية من القالب قبل إجراء التعديلات). قم بالنقر على تعديل HTML، ثم اتبع الخطوات التالية لإضافة المزايا:

إضافة الأكواد الخاصة بتضمين الكود عبر الوسمين pre و code:

ابحث باستخدام Ctrl + F عن الوسم </head>، ثم الصق الكود التالي قبله:

<b:if cond='data:view.isPost'>
  <style type='text/css'>
    /* Highlighter */
    code{padding:1.2em} 
    pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0}
    pre,code{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;direction:ltr;} 
    .hljs,code{display:block;overflow-y:hidden;overflow-x:hidden;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:5px;max-height:350px} 
    .hljs:hover, .hljs:focus ,code:hover, code:focus{overflow-y:auto;overflow-x:auto} 
    .hljs-name, .hljs-strong{font-weight:500} 
    .hljs-code, .hljs-emphasis{font-style:italic} 
    .hljs-tag{color:#62c8f3} 
    .hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-selector-class{color:#ade5fc} 
    .hljs-string, .hljs-bullet{color:#a2fca2} 
    .hljs-type, .hljs-title, .hljs-section, .hljs-attribute, .hljs-quote, .hljs-built_in, .hljs-builtin-name{color:#ffa} 
    .hljs-number, .hljs-symbol, .hljs-bullet{color:#d36363} 
    .hljs-keyword, .hljs-selector-tag, .hljs-literal{color:#fcc28c} 
    .hljs-comment, .hljs-deletion, .hljs-code{color:#888} 
    .hljs-regexp, .hljs-link{color:#c6b4f0} 
    .hljs-meta{color:#fc9b9b} 
    .hljs-deletion{background-color:#fc9b9b;color:#333} 
    .hljs-addition{background-color:#a2fca2;color:#333} 
    .hljs a{color:inherit} 
    .hljs a:focus, .hljs a:hover{color:inherit;text-decoration:underline}
    mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#e67e22;color:#fff} 
    .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}
    .BLOG_mobile_video_class{display:none!important} 
    .hljs mark span.hljs-number, .hljs mark span.hljs-comment, .hljs mark span.hljs-symbol, .hljs mark span.hljs-string, .hljs mark span.hljs-attr, .hljs mark span.hljs-keyword, .hljs mark span.hljs-name, .hljs mark span.hljs-tag{color:#fff !important;margin:.15rem 0}
  </style>
</b:if>

هذه الأكواد شهيرة جدًا، ربما قالبك يحتوي على أكواد شبيهة بها، لذا يفضل حذف الأكواد القديمة واستبدالها بهذه.

إضافة ميزة تلوين الكود بحسب لغته البرمجية باستخدام مكتبة Highlighter:

ابحث باستخدام Ctrl + F عن الوسم </body>، ثم الصق الكود التالي قبله:

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/MohammadQt/Itheric@master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

هذا السكربت يعمل بشكل تلقائي بتلوين الأكواد. إذا كنت تريد تظليل وسم معين ضمن صندوق الأكواد، قم باستخدام المعرف mark على هذا الشكل:

<mark>نص هنا</mark>

إضافة ميزة النقر مرتين لتحديد الكود المضمن كاملًا:

هذه الميزة هي إحدى الميزات الرائعة التي سهلت علينا كثيرًا تحديد ونسخ الأكواد.

ابحث باستخدام Ctrl + F عن الوسم </body>، ثم الصق الكود التالي قبله:

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>
</b:if>

إضافة ميزة زر تلقائي لنسخ الكود كاملًا:

طبعًا، هذه الميزة جميلة جدًا ورائعة، والأهم أنها تلقائية، أي أنه حتى إذا كان لديك أكواد قمت بتضمينها سابقًا، فسوف يضاف إليها الزر تلقائيًا.

أولًا، أضف أكواد CSS الخاصة بتنسيق الزر. ابحث باستخدام Ctrl + F عن الوسم </head>، ثم الصق الكود التالي قبله:

<b:if cond='data:view.isPost'>
<style type='text/css'>
btn.copy-code-button{z-index:2;position:absolute;font-size:14px;padding:4px 5px;border:none;color:#333!important;background:#ffd012!important;box-shadow:0 1px 4px rgba(0,0,0,0.2);margin:15px;border-radius:4px}
</style>
</b:if>

بخبرة بسيطة بلغة CSS، تستطيع تخصيص الزر بما يناسبك.

ثانيًا، أضف أكواد Javascript الخاصة بإعدادات الزر. ابحث باستخدام Ctrl + F عن الوسم </body>، ثم الصق الكود التالي قبله:

<b:if cond='data:view.isPost'>
<script type='text/javascript'>
//<![CDATA[
function addCopyButtons(e){document.querySelectorAll("pre > code").forEach(function(t){var n=document.createElement("btn");n.className="copy-code-button",n.type="btn",n.innerText="نسخ",n.addEventListener("click",function(){e.writeText(t.innerText).then(function(){n.blur(),n.innerText="تم النسخ",setTimeout(function(){n.innerText="نسخ"},2e3)},function(e){n.innerText="خطأ"})});var o=t.parentNode;if(o.parentNode.classList.contains("highlight")){var r=o.parentNode;r.parentNode.insertBefore(n,r)}else o.parentNode.insertBefore(n,o)})}if(navigator&&navigator.clipboard)addCopyButtons(navigator.clipboard);else{var script=document.createElement("script");script.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js",script.integrity="sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=",script.crossOrigin="anonymous",script.onload=function(){addCopyButtons(clipboard)},document.body.appendChild(script)}
//]]>
</script>
</b:if>

استخدام صندوق الأكواد داخل التدوينات:

عند كتابتك لتدوينة معينة، ضع الأكواد المراد تضمينها ضمن الكود التالي بعد تحويلها بمحول الأكواد:

<code><pre><!--ضع الكود هنا --></code></pre>

أداة تحويل الأكواد موجودة هنا.

الخلاصة:

هذا الكود يُعد أداة قوية لعرض الأكواد البرمجية بشكل تفاعلي ومنظم، مع دعم مميزات مثل النسخ والتحديد. يمكن استخدامه في العديد من السياقات، مثل المدونات التقنية ومواقع التعليم الإلكتروني، لتحسين تجربة المستخدم وتسهيل التفاعل مع المحتوى البرمجي.