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

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

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

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

يمكننا تنفيد أداة تمييز بناء جملة على صفحات موقع الويب و المنتديات و المدونات عبر الإنترنت ، ويتم إستخدامها على نطاق واسع لتسهيل الزائرين ترميز css و javascript و html و لغات البرمجة الأخرى ، بشكل عام يمكن بناء جملة التمييز تحويل الحروف إلى العديد من متغيرات الألوان إعتمادًا على رمز الترميز سواء كان رابط أو كود أو أرقام زائد زر النسخ بشكل إحترافي ، كذلك ملائم للوضع اليلي ، هناك العديد من الطرق حول كيفية إنشاء أداة تمييز بناء جملة في موقع المدون واحد منهم يُشبه البرنامج التعليمي أدناه لكن لا يحتوي على أكواد صحيح مثل الموجود عندي في المقالة ، هذه الأكواد تتجاوب مع جميع القوالب حتى قوالب جاك دنيال ، إذا كنت تريد متابعة هذا البرنامج فسوف يبدو مثل لقطة الشاشة التالية ، قد يهمك موضوع إنشاء ملف robots.txt مخصص لتحسين محركات البحث في مدونة بلوجر.

هكذا يبدو الكود عندما نقوم بتنصيب السكريبت الخاص بالترميز و هناك ألوان أخرى متوفرة أتوماتيكي.

إتبع هذه الخطوات لإضافة أداة تمييز إلى موقع بلوجر

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


<b:if cond='data:blog.pageType == "item"'> 
<script src='https://cdn.statically.io/gh/Aslori/file/master/highlight.min.js'></script>
<script src='https://cdn.statically.io/gh/Aslori/file/master/clipboard.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
"use strict";!functionundefinede,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?oundefinede,!0):functionundefinede){ifundefined!e.document)throw new Errorundefined"A window with a document is required");return oundefinede)}:oundefinede)}undefined"undefined"!=typeof window?window:this,functionundefinedy,e){ifundefined"boolean"!=typeof o)var o=!1;function tundefinede){var o,m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function tundefined){m.loadDelay?setTimeoutundefinedn,loadDelay):nundefined)}function nundefined){ifundefined!document.querySelectorundefinedm.templateSelector)){var e=document.createElementundefined"div");e.innerHTML=functionundefined){forundefinedvar e=["<style>","@media print {","   .code-badge { display: none; }","}"," .dark-mode .code-badge {","        background: rgbaundefined78,95,109,.10);","    }"," .code-badge-pre {","        position: relative;","    }","    .code-badge {","        display: flex;","        flex-direction: row;","        white-space: normal;","        background: rgbaundefined88,101,111,.63);","        color: #333;","        font-size: 0.875em;","        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}undefined);var o=e.querySelectorundefined"style"),t=e.querySelectorundefinedm.templateSelector);document.body.appendChildundefinedo),document.body.appendChildundefinedt)}forundefinedvar n=document.querySelectorundefinedm.templateSelector).innerHTML,c=document.querySelectorAllundefined"pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];ifundefined!r.querySelectorundefined".code-badge")){forundefinedvar d="",l=0;l<r.classList.length;l++){var i=r.classList[l];ifundefined"language-"===i.substrundefined0,9)){d=r.classList[l].replaceundefined"language-","");break}ifundefined"lang-"===i.substrundefined0,5)){d=r.classList[l].replaceundefined"lang-","");break}ifundefined!d)forundefinedvar s=0;s<r.classList.length;s++)ifundefined"hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==undefinedd=d?d.toLowerCaseundefined):"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&undefinedd="foxpro");var p=n.replaceundefined"{{language}}",d).replaceundefined"{{copyIconClass}}",m.copyIconClass).trimundefined),u=document.createElementundefined"div");u.innerHTML=p,u=u.querySelectorundefined".code-badge");var g=r.parentElement;g.classList.addundefined"code-badge-pre"),m.copyIconContent&&undefinedu.querySelectorundefined".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBeforeundefinedu,r)}}document.querySelectorundefinedm.contentSelector).addEventListenerundefined"click",functionundefinede){return e.srcElement.classList.containsundefined"code-badge-copy-icon")&&undefinede.preventDefaultundefined),e.cancelBubble=!0,functionundefinede){var o=e.srcElement.parentElement.parentElement.parentElement,t=o.querySelectorundefined"pre>code"),n=t.textContent||t.innerText;m.onBeforeCodeCopied&&undefinedn=m.onBeforeCodeCopiedundefinedn,t));var c=document.createElementundefined"textarea");c.value=n.trimundefined),document.body.appendChildundefinedc),c.style.display="block",y.document.documentMode?c.setSelectionRangeundefined0,c.value.length):c.selectundefined);document.execCommandundefined"copy"),document.body.removeChildundefinedc),functionundefinede){var o=m.copyIconClass.splitundefined" "),t=m.checkIconClass.splitundefined" "),n=e.querySelectorundefined".code-badge-copy-icon");n.innerText=m.checkIconContent;forundefinedvar c=0;c<o.length;c++)n.classList.removeundefinedo[c]);forundefinedc=0;c<t.length;c++)n.classList.addundefinedt[c]);setTimeoutundefinedfunctionundefined){n.innerText=m.copyIconContent;forundefinedvar e=0;e<t.length;e++)n.classList.removeundefinedt[e]);forundefinede=0;e<o.length;e++)n.classList.addundefinedo[e])},2e3)}undefinedo)}undefinede)),!1})}o=e,Object.assignundefinedm,o),"loading"==document.readyState?document.addEventListenerundefined"DOMContentLoaded",t):tundefined)}y.highlightJsBadge=t,y.module&&y.module.exports&&undefinedy.module.exports.highlightJsBadge=t),o&&tundefined)});

document.addEventListenerundefined"DOMContentLoaded", undefinedevent) => {
  var pres = document.querySelectorAllundefined"pre>code");
  for undefinedvar i = 0; i < pres.length; i++) {
    hljs.highlightBlockundefinedpres[i]);
  }

  var options = {
    contentSelector: ".post-body",
    loadDelay:0,
    copyIconClass: "code-badge-copy-icon",
    checkIconClass: "code-badge-check-icon",
    onBeforeTextCopied: functionundefinedtext, codeElement) {
      return text;   
    }
  };
  window.highlightJsBadgeundefinedoptions);
});
function downloadJSAtOnloadundefined){var e=document.createElementundefined"script");e.src="https://cdn.statically.io/gh/Aslori/file/master/highlight.min.js",document.body.appendChildundefinede)}window.addEventListener?window.addEventListenerundefined"load",downloadJSAtOnload,!1):window.attachEvent?window.attachEventundefined"onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

function cdClearundefined){var e=document.getElementByIdundefined"codes");e.value="",e.focusundefined);forundefinedvar t=document.querySelectorAllundefined"#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1,document.getElementByIdundefined"btnInfo").style.display="none",document.getElementByIdundefined"button-link").style.display="none"}function preConvertundefined){var e=document.getElementByIdundefined"codes"),t=e.value,c=document.getElementByIdundefined"opt1"),l=document.getElementByIdundefined"opt2"),n=document.getElementByIdundefined"opt3"),d=document.getElementByIdundefined"opt4"),o=document.getElementByIdundefined"opt5"),u=document.getElementByIdundefined"opt10"),t=t.replaceundefined/\t/g,"    ");u.checked&&undefinedc.checked&&undefinedt=t.replaceundefined/&/g,"&amp;")),l.checked&&undefinedt=t.replaceundefined/'/g,"&#039;")),n.checked&&undefinedt=t.replaceundefined/"/g,"&quot;")),d.checked&&undefinedt=t.replaceundefined/</g,"&lt;")),o.checked&&undefinedt=t.replaceundefined/>/g,"&gt;")),t=undefinedt=t.replaceundefined/^/,"<i rel='pre'>")).replaceundefined/$/,"</i>"),e.value=t,e.focusundefined),document.getElementByIdundefined"button-link").style.display="inline-block")}function codeConvertundefined){var e=document.getElementByIdundefined"codes"),t=e.value,c=document.getElementByIdundefined"opt1"),l=document.getElementByIdundefined"opt2"),n=document.getElementByIdundefined"opt3"),d=document.getElementByIdundefined"opt4"),o=document.getElementByIdundefined"opt5"),u=document.getElementByIdundefined"opt11"),t=t.replaceundefined/\t/g,"    ");u.checked&&undefinedc.checked&&undefinedt=t.replaceundefined/&/g,"&amp;")),l.checked&&undefinedt=t.replaceundefined/'/g,"&#039;")),n.checked&&undefinedt=t.replaceundefined/"/g,"&quot;")),d.checked&&undefinedt=t.replaceundefined/</g,"&lt;")),o.checked&&undefinedt=t.replaceundefined/>/g,"&gt;")),t=undefinedt=t.replaceundefined/^/,"<i rel='code'>")).replaceundefined/$/,"</i>"),e.value=t,e.focusundefined),document.getElementByIdundefined"button-link").style.display="inline-block")}function imgConvertundefined){var e=document.getElementByIdundefined"codes"),t=e.value,c=document.getElementByIdundefined"opt6"),t=t.replaceundefined/\t/g,"    ");c.checked&&undefinedt=undefinedt=t.replaceundefined/^/,"<i rel='img'>")).replaceundefined/$/,"</i>"),e.value=t,e.focusundefined),document.getElementByIdundefined"button-link").style.display="inline-block")}function videoConvertundefined){var e=document.getElementByIdundefined"codes"),t=e.value,c=document.getElementByIdundefined"opt7"),t=t.replaceundefined/\t/g,"    ");c.checked&&undefinedt=undefinedt=t.replaceundefined/^/,"<i rel='video'>")).replaceundefined/$/,"</i>"),e.value=t,e.focusundefined),document.getElementByIdundefined"button-link").style.display="inline-block")}function quoteConvertundefined){var e=document.getElementByIdundefined"codes"),t=e.value,c=document.getElementByIdundefined"opt8"),t=t.replaceundefined/\t/g,"    ");c.checked&&undefinedt=undefinedt=t.replaceundefined/^/,"<b rel='quote'>")).replaceundefined/$/,"</b>"),e.value=t,e.focusundefined),document.getElementByIdundefined"button-link").style.display="inline-block")};

var clipboard = new Clipboardundefined".button-link");
clipboard.onundefined"success", function undefinedo) {
    console.logundefinedo), document.getElementByIdundefined"btnInfo")
        .style.display = "block", document.getElementByIdundefined"codes")
        .value = ""
}), clipboard.onundefined"error", function undefinedo) {
    console.logundefinedo)
});
//]]>
</script>
</b:if>

طريقة إضافة كود css لتمييز صندوق عرض الأكواد

الأن ما سنقوم به إضافة كود css فوق وسم الإغلاق الهاد ، بهذا الكود أصبح صندوق العرض جاهز للعمل به في صفحة بلوجر.

Alert message : للبحث عن أي شيء في قسم قالب بلوجر اضغط السيطرة+F ثم اكتب مصطلحًا للبحث ثم اضغط على زر الإدخال.

الأن ضع الكود فوقه مباشرة وحفط القالب.


<b:if cond='data:blog.pageType == "item"'> 
<style>
/* Sytax Highlighter */
.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}
article.post pre code:hover::-webkit-scrollbar-thumb {display:block}
article.post pre code::-webkit-scrollbar-thumb {display:none;background-color:rgbaundefined65,72,67,.53)}
mark{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px}
code mark{font-size: 13px;margin: 2px;display: inline-block;}
pre code mark{margin:0;padding:0;border-radius:2px}
mark .hljs, mark .hljs-subst, mark .hljs-tag, mark .hljs-addition, mark.hljs-built_in, mark .hljs-builtin-name, mark .hljs-selector-attr, mark .hljs-selector-id, mark .hljs-selector-pseudo, mark .hljs-string, mark .hljs-attr, mark .hljs-template-variable, mark .hljs-type, .hljs-variable, mark .hljs-attribute,mark .hljs-symbol,mark .hljs-bullet,mark .hljs-link,mark .hljs-literal,mark .hljs-number,mark .hljs-quote,mark .hljs-regexp{color:#000}
.code-badge-copy-icon {
background: urlundefined"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect height='13' rx='2' ry='2' width='13' x='9' y='9' fill='none' stroke='%23c6c9ce' stroke-width='1.6'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' fill='none' stroke='%23c6c9ce' stroke-width='1.6'%3E%3C/path%3E%3C/svg%3E");background-size: 55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px;}
.code-badge > .code-badge-check-icon {
background: green;
}
.code-badge-check-icon {
cursor: pointer;
padding: 0 7px;
background: urlundefined'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');
background-size: 100% 100%;
}
div#copyy i.code-badge-copy-icon:before {content:'Copy Code';font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgbaundefined0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease}
div#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px}
div#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 rgbaundefined0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease}
div#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px}
div#copyy  i.code-badge-check-icon:before {content:'Code Copied!';font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgbaundefined0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease}
div#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 rgbaundefined0,0,0,.57) 4px;transition:all .2s ease}
.dark-mode div#copyy i.code-badge-copy-icon:before, .dark-mode div#copyy  i.code-badge-check-icon:before{background:rgbaundefined255,255,255,.06)}
.dark-mode div#copyy i.code-badge-copy-icon:after, .dark-mode div#copyy i.code-badge-check-icon:after{border-top:solid rgbaundefined255,255,255,.06) 4px}
.Blog pre{font-size:13px;position:relative;width:100%;background-color:#262a2d;color:rgbaundefined255,255,255,.9);border-radius:4px;margin:25px auto;-moz-tpab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-family: 'Fira Mono', monospace;line-height:1.5em}
.Blog pre code{display:block;padding:20px;white-space:pre;font-family: 'Fira Mono', monospace;overflow-x:auto;}
.Blog pre span.block{color:#fff;background:#3a7bd5}
@media screen and undefinedmin-width:768px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgbaundefined0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgbaundefined0,0,0,.45)}::-webkit-scrollbar-thumb:active{background-color:rgbaundefined0,0,0,.45)}}
</style>
</b:if>

معرفة طريقة إستخدام الأداة في صفحة بلوجر

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


<pre><code class="html">
<!-- Enter all HTML code here -->
</code></pre>
<pre><code class="css">
<!-- Enter all CSS code here -->
</code></pre>
<pre><code class="javascript">
<!-- Enter all Javascript code here -->
</code></pre>