إضافة صناديق الأكواد لمدونات بلوجر بشكل رائع و أنيق مع زر النسخ التلقائي

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

معاينة

بعد معاينتك للإضافة دعنا الآن نمر إلى كيفية تركيبها و الأمر بسيط للغاية فقط قم باتباع الخطوات بتركيز تام و ستجد أن الإضافة تعمل بشكل جيد
أولا قم بأخد نسخة احتياطية من قالب مدونتك تفادية لأي أخطاء
تانيا قم بالتوجه إلى لوحة تحكم بلوجر تم المظهر بعد ذلك تعديل HTML

باستعمال لوحة المفاتيح قم بالظغط على الزرين Ctrl+F لإظهار مستطيل البحت و قم بالحث عن الوسم </head> و أظف الكود التالي قبله أي فوقه

  &lt;b:if cond='data:view.isPost'&gt;
  &lt;style type='text/css'&gt;
/* 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}
&lt;/style&gt;
&lt;/b:if&gt;

و لإضافة ميزة النقر مرتين لنسخ النص قم بالحث عن الوسم </body> و قم بإضافة الكود التالي قبله مياشرة أي فوقه

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

أما لإضافة زر نسخ الكود كاملا بشكل تلقائي فيمكنك مجددا البحث عن الوسم </head> و قم بإضافة أكواد CSS الخاصة بالزر فوقه أي قبله

&lt;b:if cond='data:view.isPost'&gt;
&lt;style type='text/css'&gt;
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}
&lt;/style&gt;
&lt;/b:if&gt;

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

الإن تبقى إضافة أكواد JavaScript الخاصة بزر النسخ عبر البحث عن الوسم </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>

Default