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





مرحبا بكم في تدوينة جديدة على مدونتكم"BILO ID" و بعد غياب طول لي عن التدوين جئتكم اليوم بإضافة وميزة مفيدة جدا للمدونين و خاصة للذين يطرحون أكواد في مقالاتهم و مواقعهم.
طبعا التعامل مع المواقع و سهولة تصفحها و أخذ المعلومات أصبح ضروريا الأن ان يكون بمنهى السهولة والبساطة , لشدة المنافسة بين المواقع و تقديمهم لما هو افضل للمستخدم العادي.
و من احد الامور المزعجة عند طرح مقال معين يحتوي على أكواد طويلة او قصيرة كانت هي كيفية ظهورها للمشاهد و الاهم هو كيفية تعامله معا , وهل سيستفيد منها كما نعتقد؟!
و هل سيقوم المشاهد العادي بأخذ و نسخ الاكواد التي نطرحها بسهولة؟
في مقالى هذا سأطرح بعض الميزات بخصوص تضمين الاكواد البرمجية داخل المقالات في بلوجر, وهي كالتالي :
  • اضافة ميزة تلوين الكود بحسب لغته البرمجية بإستخدام مكتبة 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
على هذا الشكل
&lt;a class=&quot;daicon-open&quot; href=&quot;#url&quot;&gt;نص هنا&lt;/a&gt;

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

هذه الميزة هي احد الميزت الرائعة التي سهلت علينا كثيرا تحديد و نسخ الاكواد
ابحث باستخدام 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>
الى هنا اكون قد انتهيت , القاكم بتدوينة اخرى.