اضافه صندوق الاكواد الى مدونه بلوجر

ضافه صندوق الاكواد الى مدونه بلوجر حيث يمكنك من خلال هذا الصندوق عرض الاكواد الخاصه بك بطريقه مميزه ويتميز هذه الصندوق بشكله الجديد كما انه يحتوى على زر لنسخ المحتوى مما يسهل عليك نسخ ونقل الاكواد كما ان الصناديق يمكن تخصيصهل للغه معينه مثل html وcss وjs  يمكنك استخدام هذه الاضافه مع جميع قوالب بلوجر حيث ان هذه الاضافه لا تحتوى على اى اكواد تتعارض مع اكواد القالب.

وتم تكويد هذه الإضافة بلغتي html وcss وjs ويمكنك معاينة الاضافة من خلال الزر التالي

يجب عليك حذف الاكواد الخاصه بصندوق الاكواد اذا كنت تستخدم قالب median


الاضافه لن تعمل اذا كان قالبك يحتوى على اكواد خاصه بصناديق الاكواد السابقه لذلك يجب عليك حذفها

كيفيه حذف الاكواد من القالب 

1.  حذف الاكواد من  قالب median ui v1.5

قم بالبحث عن الكود التالى وقم بحذفه
.post pre{position:relative;font-family:var(--font-code);line-height:1.6em;font-size:.8rem} .post pre:before, .commentContent i[rel="pre"]:before{content:'</>';position:absolute;left:0;top:0;color:var(--highlight-comment);font-size:10px;padding:0 10px;z-index:2;line-height:35px} .post pre.html:before{content:'.html'} .post pre.css:before{content:'.css'} .post pre.js:before{content:'.js'} .post code, .commentContent i[rel="pre"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:var(--highlight-bg);color:var(--highlight-color); padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:var(--font-code);line-height:1.6em} .post pre span{color:var(--highlight-green)} .post pre span.block{color:#fff;background:var(--highlight-blue)} .post pre i{color:var(--highlight-blue);font-style:normal} .post pre i{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .post pre i.comment, article pre i.tag, article pre i.blue{color:var(--highlight-comment);user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-webkit-touch-callout:text;} article pre i.tag{color:var(--highlight-orange)} article pre i.blue{color:var(--highlight-blue)} .post .code{display:inline;padding:2px 4px;font-size:85%;line-height:inherit;color:var(--highlight-color);background-color:rgba(0,0,0,.05);font-family:var(--font-code)} .darkMode .post code, .darkMode .commentContent i[rel="pre"]{background-color:rgba(0,0,0,.09);color:var(--dark-textAlt)} .darkMode .post .code{color:var(--dark-textAlt);background-color:rgba(255,255,255,.1)}

2. حذف الاكواد من قالب median ui v1.6

قم بالبحث عن الكود التالى وقم بحذفه
  /* Syntax */ .pre{background:var(--synxBg);color:var(--synxC); direction: ltr} .pre:not(.tb){position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto;font-family:var(--fontC)} .pre pre{margin:0;color:inherit;background:inherit} .pre:not(.tb)::before, .cmC i[rel=pre]::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:var(--synxGray);font-size:10px;padding:0 10px;z-index:2;line-height:30px} .pre:not(.tb).html::before{content:'.html'} .pre:not(.tb).css::before{content:'.css'} .pre:not(.tb).js::before{content:'.js'} pre, .cmC i[rel=pre]{display:block;position:relative;font-family:var(--fontC);font-size:13px;line-height:1.6em;border-radius:3px;background:var(--synxBg);color:var(--synxC);padding:30px 20px 20px;margin:1.7em auto; -moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre} pre i{color:var(--synxBlue);font-style:normal} pre i.block{color:#fff;background:var(--synxBlue)} pre i.green{color:var(--synxGreen)} pre i.gray{color:var(--synxGray)} pre i.red{color:var(--synxOrange)} pre i.blue{color:var(--synxBlue)} code{display:inline;padding:5px;font-size:14px;border-radius:3px;line-height:inherit;color:var(--synxC);background:#f2f3f5;font-family:var(--fontC)} /* Multi syntax */ .pre.tb{border-radius:5px} .pre.tb pre{margin:0;background:inherit} .pre.tb .preH{font-size:13px;border-color:rgba(0,0,0,.05);margin:0} .pre.tb .preH >*{padding:13px 20px} .pre.tb .preH::after{content:'</>';font-size:10px;font-family:var(--fontC);color:var(--synxGray);padding:15px;margin-left:auto} .pre.tb >:not(.preH){display:none} .pS input[id*="1"]:checked ~ div[class*="C-1"], .pS input[id*="2"]:checked ~ div[class*="C-2"], .pS input[id*="3"]:checked ~ div[class*="C-3"], .pS input[id*="4"]:checked ~ div[class*="C-4"]{display:block}

طريقه اضافه صندوق الاكواد الى مدونه بلوجر

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اسفل الوسم     
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style>
/* syntax highlighter */
.post pre{font-family:tajawal; font-size:.8rem;position:relative;width:100%;background-color:#f6f6f6;border-radius:2px;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 pre code {color: #2f3337;display: block;padding: 20px;white-space: pre;font-family: tajawal;font-size: 16px;overflow-x: auto;line-height: 1.5em;height: fit-content;max-height: 120px;}
.darkMode .post pre{background: #232323;}
.darkMode .post pre code{color:#fefefe;}

/*.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(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 512 512&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;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&#39; fill=&#39;%23c6c9ce&#39;/%3E%3Cpath d=&#39;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&#39; fill=&#39;%23c6c9ce&#39;/%3E%3C/svg%3E&quot;);background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -14px -5px -8px}
.code-badge &gt; .code-badge-check-icon{background:green}
.code-badge-check-icon{cursor:pointer;padding:0 7px;margin:-5px -5px -5px 0;background:url(&#39;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=&#39;);background-size:100% 100%}
#copyy i.code-badge-copy-icon:before{content:&#39;نسخ الكود&#39;;font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:var(--link-color);color:#fff;border-radius:3px;left: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:&#39;&#39;;position:absolute;top:0;left:13px;border-right:solid transparent 4px;border-left:solid transparent 4px;border-top:solid var(--link-color) 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:&#39;تم النسخ!&#39;;font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(236, 13, 252,.90);color:#fff;border-radius:3px;left:0;padding:2px 6px;transition:all .2s ease}
#copyy i.code-badge-check-icon:after{content:&#39;&#39;;position:absolute;top:-9.8px;left:13px;border-right:solid transparent 4px;border-left:solid transparent 4px;border-top:solid rgba(236, 13, 252,.90) 4px;transition:all .2s ease}
.post .code{display:inline;padding:2px 4px;font-size:85%;line-height:inherit;color:#16967f;background-color:#f1f1f1;font-family:tajawal} 
.darkMode .post .code{color:var(--dark-textAlt);background-color:rgba(255,255,255,.1)}
</style>
</b:if>

3.قم بالبحث عن وسم </body>  واضف الكود التالى اعلى الوسم
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<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; }","}"," .darkMoode .code-badge {","        background: rgba(254, 254, 254,.90);","}"," .code-badge-pre {","        position: relative;","    }","    .code-badge {","        display: flex;","        flex-direction: row;","        white-space: normal;","        background: rgba(88,101,111,100);","        color: #333;","        font-size: 13px;","        line-height: 1.5em;","        opacity: 0.5;","        transition: opacity linear 0.5s;","        border-radius: 4px 0 4px 0;","        padding: 5px 8px 5px 8px;","        position: absolute;","        left: 0;","        top: 0;","    }","    .code-badge.active {","        opacity: 100;","    }","","    .code-badge:hover {","        opacity: 100;","    }","","    .code-badge a,","    .code-badge a:hover {","        text-decoration: none;","    }","","    .code-badge-language {","        margin-left: 10px;","        font-weight: 600;","        color:#fefefe;","    }","    .fa.text-success:{ color:#ec0dfc!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("copy"),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",
    loadDelay:0,
    copyIconClass: "code-badge-copy-icon",
    checkIconClass: "code-badge-check-icon",
    onBeforeTextCopied: function(text, codeElement) {
      return text;   
    }
  };
  window.highlightJsBadge(options);
});
//]]>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js'/>
</b:if>
4.قم بنسخ الكود التالى  واضفه فى صفحه المقال
<pre><code class="html">
<!-- المحتوى -->
</code></pre>
<pre><code class="css">
<!-- المحتوى -->
</code></pre>
<pre><code class="javascript">
<!-- المحتوى -->
</code></pre>

تحميل الاكواد

code box.zip 4.14KB

والان نكون قد انتهينا من شرح هذا الموضوع اذا واجهتك مشكله فى تطبيق هذه الخطوات يرجى مراسلتنا عبر التعليقات اونموذج الاتصال

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

تعليقان (2)

  1. ازى احذف صندوق الاكواد فى قالب واجهه المستخدم
  2. تم اضافه طريقه حذفه فى المقال