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

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

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

ماهو صندوق عرض الأكواد؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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