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

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

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

إذا كنت مبرمج مهتم بالبرمجة وتريد مشاركة الأكواد التي تتعلمها أو تريد إنشاء مدونة تقدم أكواد برمجية تقوم أنت بإنشائها فهذا الصندوق سيساعدك في ذلك.

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

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

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

1- اذهب إلى لوحة تحكم بلوجر > المظهر> اضغط على القائمة المنسدلة بجانب تخصيص > تعديل html

2- ابحث عن الكود التالي:  ]]></b:skin>

لإظهار خانة البحث اضغط في لوحة المفاتيح على Ctrl + F

3- فوقه مباشرة قم بلصق الكود التالي:


/*-- 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;}

4- ابحث عن الكود التالي: </body>

5- فوقه مباشرة قم بلصق الكود التالي:


<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>

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

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

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


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

في كل مرة تريد فيها عرض كود برمجي تحتاج إلى هذا الكود الأخير وتضع بداخله الكود الذي تريد عرضه.

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

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

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

أحدث أقدم

نموذج الاتصال