recent
أخبار ساخنة

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

رؤيا للتقنيات
الصفحة الرئيسية
الحجم
محتويات المقال

أهمية عرض الأكواد داخل صندوق احترافي

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

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

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


ما هو صندوق عرض الأكواد البرمجية؟

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

مميزات صندوق عرض الأكواد:

  • تنسيق الأكواد بشكل احترافي ومنظم.
  • منع تشغيل الأدواد داخل المقالات.
  •  سهولة النسخ والتحميل للأكواد البرمجية.
  • تحسين تجربة المستخدم وتقليل الأخطاء البرمجية أثناء النسخ.
  • دعم مختلف لغات البرمجية مثل HTML، CSS، وJavaScript.

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

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

1. إضافة أكواد CSS لتنسيق الصندوق

  1. انتقل إلى لوحة التحكم بالوجر.
  2. اذهب إلى المظهر. 
  3. اضغط على السهم بجانب تخصيص واختر تعديل HTML.
  4. ابحث عن هذا الوسم </head>
  5. قبل هذا الكود مباشرة أضف كود CSS التالي لتنسيق صندوق عرض الأكواد:

نسخ
     <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> 
  
<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>

ثم حفظ التعديلات

2.إضافة كود JavaScript لتفعيل وظائف الصندوق

  1. ابحث عن الكود التالي داخل القالب </body>
  2. قبل هذا الكود مباشرة أضف كود JavaScript التالي:
نسخ
<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>  
 
<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>   
 
<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>

ثم حفظ التعديلات  

3. إدراج كود HTML داخل المقالات 

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

يمكنك استبدال <!-- ضع الكود البرمجي هنا --> بأي كود تريد عرضه.

تحسين السيو لمحركات البحث (SEO)

لضمان توافق المقال مع معايير السيو(SEO) وزيادة ظهوره في نتائج البحث:

خاتمة 

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

إذا كان لديك أي استفسار، لا تتردد في ترك تعليق وسنكون سعداء بمساعدتك! 🚀

google-playkhamsatmostaqltradent