صندوق الاكواد بمميزات عديدة
مرحبا بكم في تدوينة جديدة على مدونتكم الأثير و بعد غياب طول لي عن التدوين جئتكم اليوم بإضافة وميزة مفيدة جدا للمدونين و خاصة للذين يطرحون أكواد في مقالاتهم و مواقعهم.
طبعا التعامل مع المواقع و سهولة تصفحها و أخذ المعلومات أصبح ضروريا الأن ان يكون بمنهى السهولة والبساطة , لشدة المنافسة بين المواقع و تقديمهم لما هو افضل للمستخدم العادي.
و من احد الامور المزعجة عند طرح مقال معين يحتوي على أكواد طويلة او قصيرة كانت هي كيفية ظهورها للمشاهد و الاهم هو كيفية تعامله معا , وهل سيستفيد منها كما نعتقد؟!
و هل سيقوم المشاهد العادي بأخذ و نسخ الاكواد التي نطرحها بسهولة؟
في مقالى هذا سأطرح بعض الميزات بخصوص تضمين الاكواد البرمجية داخل المقالات في بلوجر, وهي كالتالي :
- اضافة ميزة تلوين الكود بحسب لغته البرمجية بإستخدام مكتبة Highlighter.
- اضافة ميزة النقر مرتين لتحديد الكود المضمن كاملا .
- اضافة ميزة زر تلقائي لنسخ الكود كاملا .
تركيب الميزات على مدونتك, اولا اتجه الى بلوجر ثم سجل دخولك لمدونتك و من ثم اتجه الى المظهر " يفضل اخذ نسخة احتياطية من قالب قبل اجراء التعديلات " , قم بالنقر على تعديل HTML , ثم اتبع الخوات التالية لإضافة المزايا :
قبل كل شيء علينا اضافة الأكواد الخاصة بتضمين الكود عبر الوسمين
ابحث باستخدام Ctrl + F عن الوسم
<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 عن الوسم<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>على هذا الشكل
<a class="daicon-open" href="#url">نص هنا</a>اضافة ميزة النقر مرتين لتحديد الكود المضمن كاملا.
هذه الميزة هي احد الميزت الرائعة التي سهلت علينا كثيرا تحديد و نسخ الاكوادابحث باستخدام Ctrl + F عن الوسم
<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 عن الوسم
<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 عن الوسم
<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>الى هنا اكون قد انتهيت , القاكم بتدوينة اخرى.
قم بإطفائه لتظهر التدوينات
سيتم نشر الطريقة قريبا
او قم بمراسلتي على الفيسبوك لأعطيك الأكواد