السلام عليكم و رحمتة الله تعالي و بركاته متابعي مدونة فورتك أندرويد الكرام في هذا المقال سوف أقدم لكم طريقة اضافة صندوق لصق الأكواد البرمجية الي بلوجر بشكل احترافي و جذاب ضمن مقاللات اضافات بلوجر التي نقدمها هنا علي مدومنتا المتواضعة .
صندوق تضمين الأكواد الذي سوف أقدمه لك هنا في هذه التدوينة بشكل أحترافي و مختلف عن باقي الاكواد و المقالات في باقي التدوينات المختلفة ، فهو يحتوي علي زر النسخ مضمن مع الصندوق بهدف سهولة نسخ الأكواد بدون أدني مشكلة أو أي صعوبة لدي مستخدمي مدونتك أو موقعكي التقني حيث يدعم جميع صيغ البرمجة المختلفة سواء html او ccs أو php أو javascript ، فقط كل ما عليك هو متابعة المقال بعناية و تركيز لتحصل علي نتائج مبهرة .
اضافة صندوق تضمين الأكواد + زر النسخ
قبل أن نبدأ تأكد من أن كود .post-body pre و .post-body pre code غير موجودين في أكواد CSS الخاصة بالقالب لعدم حدوث أي تعارض ، و يفضل أخذ نسخة احتياطة من القالبقبل التعديل عليه .
بعد التأكد من عدم وجود الأكواد الذكورة في الأعلي كل ما عليك فعله هو الذهاب الي المظهر و من ثم تعديل ال html و البحث عن الوسم </b:skin> و لصق الكود التالي فوقه . ( انسخ الكود في الاسفل )
/* syntax highlighter */
.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.hljs,.hljs-subst,.hljs-tag{color:#eaebec}
.hljs-emphasis,.hljs-strong{color:#a8a8a2}
.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}
.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}
.hljs-strong{font-weight:700}
.hljs-emphasis{font-style:italic}
.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f15a5a}
.hljs-attribute,.hljs-symbol{color:#66d9ef}
.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}
.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}
.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
.code-badge-copy-icon{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M391.89,450H163a50.17,50.17,0,0,1-50.11-50.11V98.11A50.17,50.17,0,0,1,163,48h150.1a15,15,0,0,1,10.61,4.39L437.61,166.27A15,15,0,0,1,442,176.88v223A50.17,50.17,0,0,1,391.89,450ZM163,78a20.13,20.13,0,0,0-20.11,20.11V399.89A20.13,20.13,0,0,0,163,420H391.89A20.13,20.13,0,0,0,412,399.89V183.09L306.91,78Z' fill='%23c6c9ce'/%3E%3Cpath d='M427,191.88H348.23a50.17,50.17,0,0,1-50.11-50.11V63a15,15,0,0,1,30,0v78.77a20.13,20.13,0,0,0,20.11,20.11H427a15,15,0,0,1,0,30Z' fill='%23c6c9ce'/%3E%3C/svg%3E");background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px -5px -14px}
.code-badge > .code-badge-check-icon{background:green}
.code-badge-check-icon{cursor:pointer;padding:0 7px;margin:-5px 0 -5px -5px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');background-size:100% 100%}
#copyy i.code-badge-copy-icon:before{content:'Copy Code';font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px}
#copyy i.code-badge-copy-icon:after{content:'';position:absolute;top:0;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease}
#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px}
#copyy i.code-badge-check-icon:before{content:'Code Copied!';font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease}
#copyy i.code-badge-check-icon:after{content:'';position:absolute;top:-9.8px;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;transition:all .2s ease}
نظراً لأن صندوق الأكواد يحتوي علي زر نسخ للأكواد فنحن بحاجة إلي إضافة كود Javascript لتفيعل الميزة ، الأن قم بالبحث عن الوسم </body> قم بوضع الكود التالي فوقه مباشرة .
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
/* highlight.js badge */
"use strict";!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e):function(e){if(!e.document)throw new Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(y,e){var o;function t(e){var m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function o(){m.loadDelay?setTimeout(t,loadDelay):t()}function t(){var e,o,t;document.querySelector(m.templateSelector)||((e=document.createElement("div")).innerHTML=function(){for(var e=["<style>","@media print {"," .code-badge { display: none; }","}"," .dark-mode .code-badge {"," background: rgba(78,95,109,.10);"," }"," .code-badge-pre {"," position: relative;"," }"," .code-badge {"," display: flex;"," flex-direction: row;"," white-space: normal;"," background: rgba(88,101,111,.63);"," color: #333;"," font-size: 13px;"," line-height: 1.5em;"," opacity: 0.5;"," transition: opacity linear 0.5s;"," border-radius: 0 4px 0 4px;"," padding: 5px 8px 5px 8px;"," position: absolute;"," right: 0;"," top: 0;"," }"," .code-badge.active {"," opacity: 0.8;"," }",""," .code-badge:hover {"," opacity: .95;"," }",""," .code-badge a,"," .code-badge a:hover {"," text-decoration: none;"," }",""," .code-badge-language {"," margin-right: 10px;"," font-weight: 600;"," color: goldenrod;"," }"," .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">',' <div class="code-badge">',' <div class="code-badge-language" >{{language}}</div>',' <div id="copyy" title="Salin Code">',' <i class="{{copyIconClass}}"></i></i></a>'," </div>"," </div>","</div>"],o="",t=0;t<e.length;t++)o+=e[t]+"\n";return o}(),o=e.querySelector("style"),t=e.querySelector(m.templateSelector),document.body.appendChild(o),document.body.appendChild(t));for(var n=document.querySelector(m.templateSelector).innerHTML,c=document.querySelectorAll("pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];if(!r.querySelector(".code-badge")){for(var d="",l=0;l<r.classList.length;l++){var i=r.classList[l];if("language-"===i.substr(0,9)){d=r.classList[l].replace("language-","");break}if("lang-"===i.substr(0,5)){d=r.classList[l].replace("lang-","");break}if(!d)for(var s=0;s<r.classList.length;s++)if("hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==(d=d?d.toLowerCase():"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var p=n.replace("{{language}}",d).replace("{{copyIconClass}}",m.copyIconClass).trim(),u=document.createElement("div");u.innerHTML=p,u=u.querySelector(".code-badge");var g=r.parentElement;g.classList.add("code-badge-pre"),m.copyIconContent&&(u.querySelector(".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBefore(u,r)}}document.querySelector(m.contentSelector).addEventListener("click",function(c){return c.srcElement.classList.contains("code-badge-copy-icon")&&(c.preventDefault(),c.cancelBubble=!0,function(){var e=c.srcElement.parentElement.parentElement.parentElement,o=e.querySelector("pre>code"),t=o.textContent||o.innerText;m.onBeforeCodeCopied&&(t=m.onBeforeCodeCopied(t,o));var n=document.createElement("textarea");n.value=t.trim(),document.body.appendChild(n),n.style.display="block",y.document.documentMode?n.setSelectionRange(0,n.value.length):n.select(),document.execCommand("نسخ"),document.body.removeChild(n),function(e){var o=m.copyIconClass.split(" "),t=m.checkIconClass.split(" "),n=e.querySelector(".code-badge-copy-icon");n.innerText=m.checkIconContent;for(var c=0;c<o.length;c++)n.classList.remove(o[c]);for(c=0;c<t.length;c++)n.classList.add(t[c]);setTimeout(function(){n.innerText=m.copyIconContent;for(var e=0;e<t.length;e++)n.classList.remove(t[e]);for(e=0;e<o.length;e++)n.classList.add(o[e])},2e3)}(e)}()),!1})}Object.assign(m,e),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",o):o()}"boolean"!=typeof o&&(o=!1),y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()});
/* Highlight.js */
document.addEventListener("DOMContentLoaded", (event) => {
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
var options = {
contentSelector: ".post-body",
loadDelay:0,
copyIconClass: "code-badge-copy-icon",
checkIconClass: "code-badge-check-icon",
onBeforeTextCopied: function(text, codeElement) {
return text;
}
};
window.highlightJsBadge(options);
});
function downloadJSAtOnloadz(){var e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnloadz,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnloadz):window.onload=downloadJSAtOnloadz;
//]]>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js'/>
</b:if>
الي هنا فقد تم اضافة صندوق الأكواد الي مدونتك بنجاح و لم يتبقا سوي القليل ليصبح كل شيئ جاهز .
كيفية استخدام صندوق الأكواد داخل بلوجر
و الأن نأتي الي كفية استخدام الاكواد داخل بلوجر أو داخل المقالات بشكل سليم علي حس استخدامك فعلي سبيل المثال :-
إذا كنت ترغب في عرض كود HTML ، يكون التنسيق على النحو التالي.
<pre><code class="html">
<!-- أدخل كود HTML هنا -->
</code></pre>
إذا كنت ترغب في عرض كود CCS، يكون التنسيق على النحو التالي.
<pre><code class="css">
<!-- أدخل كود CSS هنا-->
</code></pre>
إذا كنت ترغب في عرض كود JavaScript، يكون التنسيق على النحو التالي.
<pre><code class="js">
<!-- أدخل كود جافا سكريبت هنا -->
</code></pre>
وإذا كنت تريد عرض عدة أنواع من التعليمات البرمجية في وقت واحد مثل html و javascript و css ، فإن التنسيق على النحو التالي.
<pre><code class="html js css">
<!-- أدخل كود html و javascript و css هنا -->
</code></pre>
ملحوظة: قبل إضافة الكواد في المحرر عن انشاء تدوينة، عليك أولاً أن تقوم بتحويل الكود حتي لا يتلف مظهر التدوينة
و الي هنا نكون قد انتهينا من درس اليوم