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

 

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

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

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

اذهب إلى لوحة تحكم بلوجر > المظهر> اضغط على القائمة المنسدلة بجانب تخصيص > تعديل html
ابحث عن الكود التالي: ]]></b:skin>
لإظهار خانة البحث اضغط في لوحة المفاتيح على Ctrl + F
فوقه مباشرة قم بلصق الكود التالي:

  
  
  
/*-- codebox by jistweb.com --*/
.code-box{border:1px solid #ccc;border-radius:4px;padding:16px;position:relative;margin:10px 0;}
.code-box pre{background-color:#f8f8f8;border:0;margin:0;overflow:auto;padding:16px}
.copy-button{background-color:#6cc060;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:12px;outline:0;padding:5px 13px;position:absolute;right:16px;top:16px;transition:background-color .2s}
.copy-button:hover{background-color:#5ca751}
.post-body pre, pre.code-box {direction: ltr;display: block;background-color: #9b9b9b0d;font-family: Monospace;font-size: 13px;color: #444444;white-space: pre-wrap;line-height: 1.4em;padding: 20px;border: 1px solid #9b9b9b1a;border-radius: 5px;}

نسخ
    

ابحث عن الكود التالي: </body>
فوقه مباشرة قم بلصق الكود التالي:

  
  
  
<script type='text/javascript'>
//<![CDATA[
const codeBoxes=document.querySelectorAll(".code-box");codeBoxes.forEach(t=>{const e=t.querySelector(".copy-button");e.addEventListener("click",()=>{var e=t.querySelector("code");const o=window.getSelection(),c=document.createRange();c.selectNodeContents(e),o.removeAllRanges(),o.addRange(c),document.execCommand("copy"),o.removeAllRanges()})});   
//]]></script>

نسخ
    

اضغط على حفظ المظهر

انتهينا من الجزء الأول، الآن توجه إلى المقالة التي تريد عرض الكود فيها قم اضغط على ايقونة القلم الموجودة على اعلى اليمين وانقر على عرض html

اختر المكان الذي تريد عرض الكود فيه والصق الكود التالي:

  
  
     <div class="code-box">
  <pre><code>
  
  <!--  ضع الكود الذي تريد عرضه هنا بعد تحويله-->
    
</code></pre>
  <button class="copy-button">نسخ</button>
</div>
    

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

رابط تحويل الاكواد

تحميل اضغط هنا