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

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

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

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

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

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

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

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

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

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

 

1. الوصول إلى محرر HTML للقالب: اذهب إلى لوحة تحكم بلوجر > المظهر > اضغط على السهم المنسدل بجوار زر "تخصيص" > اختر "تعديل HTML".
2. البحث عن وسم إغلاق قسم التنسيقات: ابحث عن الكود التالي داخل محرر الأكواد:   ]]></b:skin>. يمكنك استخدام اختصار لوحة المفاتيح Ctrl + F (أو Cmd + F على نظام ماك) لفتح مربع البحث.
3. إضافة تنسيقات CSS: مباشرة فوق الكود ]]></b:skin>، قم بلصق كود CSS التالي. هذا الكود مسؤول عن تصميم شكل صندوق الكود وزر النسخ:

   
   /-- 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. إضافة كود JavaScript:  مباشرة فوق الكود </body>، قم بلصق كود JavaScript التالي. هذا الكود يجعل زر النسخ يعمل بشكل تفاعلي:

   
   <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. حفظ التغييرات: اضغط على أيقونة الحفظ (عادة ما تكون على شكل قرص مرن) لحفظ التعديلات التي قمت بها على القالب.

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

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

  <div class="code-box">
  <pre><code>

  <!--  ضع الكود الذي تريد عرضه هنا بعد تحويله-->

</code></pre>
  <button class="copy-button">نسخ</button>
</div>

في كل مرة تحتاج فيها إلى عرض كود برمجي، ستحتاج إلى هذا الكود الأساسي. ضع الكود البرمجي الذي تريد عرضه بداخله. هام جداً: قبل لصق الكود الفعلي، يجب عليك تحويله إلى صيغة قابلة للعرض الآمن في HTML. السبب في ذلك هو أن بعض الرموز في الأكواد البرمجية (مثل علامات < و >) قد تتداخل مع تركيب HTML وتؤدي إلى مشاكل في العرض. لتحويل الكود، يمكنك استخدام أدوات "محول الأكواد HTML" المتوفرة على الإنترنت. هذه الأدوات تقوم بتحويل الرموز الخاصة إلى ما يُعرف بـ "كيانات HTML". 

الكود الذي تم تحويله هو الذي يجب عليك لصقه داخل الكود الأخير، تحديدًا في المكان المُخصّص له بين وسمي <code> و </code>. بعد ذلك، اضغط على "حفظ" أو "تحديث" للمقالة، وسيظهر الكود مع زر النسخ داخل صندوق العرض الأنيق.

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