القائمة الرئيسية

الصفحات

تعديل المشاركة

كيفيه اضاففه كود للشرح فى بلوجر"code block"

mohammed
(0)

طريقه اضافه البلوك الخاص بالاكواد فى بلوجر

المقصود بالبلوك هو الجزء الذى يتم وضع الاكواد البرمجيه فيه داخل المواضيع "CodeBlock" يوجد كثير من الاشخاص التى تشرح اكواد برمجيه او تشرح اضافه جزء برمجى او كود ما وتريد ان تضع هذا الكود فى الموضوع بشكل جميل ولكن اغلب القوالب لاتدعم هذه الخاصيه اولا يكون بها تنسيق يسهل هذه العميله وفى هذا الموضوع سنقوم بحل تلك المشكله

وهذه صوره توضح ما نقصد "code block & Display Code Block"



اضافه اسطر الاكواد داخل قالب بلوجر

ملاحظه : مهمه جدا جدا لابد من اخذ نسخه من القالب قبل اى تعديل لامكانيه الرجوع لها ان حدثت اى مشاكل او اخطاء

الاضافه التى سنقوم باضافتها هى "highlight.js" وان اردت الذهاب للموقع الاصلى من هنا

ولاضافه السطور البرمجيه من خلال الشرح اتبع الاتى

اسفل وسم "<head>" وفى بعض القوالب ستجد الوسم بالشكل التالى "&lt;head&gt;" سنضيف السطر التالى وهو خاص بشكل العرض "style" للسطور البرمجيه وتوجد اشكال متعدده يمكن ان تختار منها ما تحب وسنشرح كيف ذلك لاحقا


<!-- add this before </head> -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.4.0/build/styles/a11y-dark.min.css"/>

وقبل وسم اغلاق "</body>" نضع السطور التاليه، اول سطر خاص بمكتبه الجافا اسكربت المستخدمه والسطر الثانى خاص بعمل "initialization" وتحميل المكتبه


<!-- add this before </body> -->
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.4.0/build/highlight.min.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

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

كيفيه يتم استخدام الاضافه داخل المواضيع

يمكن الاستخدام فى المواضيع القديمه او الجديده ولا اشكال فى ذلك ولكن لتجنب اى مشاكل فى مرحله التجربه نقوم بعمل مشاركه جديده ونحول الوضع ل "عرض HTML" ونضيف الكود التالى


<pre dir="ltr" style="text-align: left;"><code>
....
</code></pre>

ملاحظه : " dir="ltr" style="text-align: left;" " هذه الاوامر لجعل الاتجاه من الشمال الى اليمين لانه فى بعض القوالب يكون الاتجاه لليمين ويمكن حذفها ان كان القالب الخاص بك لغته انجليزى او الاتجاه من "LTR"

نكتب مكان النقاط الكود المراد اضافته ولكن اكواد ال "Html" وال "xml" سنحتاج عمل تحويل لها لكى تظهر ولا تتعارض مع اكواد مدونات بلوجر وذلك يكون من خلال المواقع التاليه

ننسخ الكود المراد تحويله ونضعه فى مكان التحويل فى اى من المواقع السابقه وان ارتم شرح كيفيه التحويل اكتب تعليق لنعلم ذلك وسيتم شرح استخدام الثلاث مواقع

وكما ذكرنا انفا انه يمكن اختيار اكثر من استايل وذلك من خلال الدخول الى الموقع التالى
الموقع "cdnjs"

ونجعل الاخيارات كما يلى  (Version = 10.4.0)  و ( Asset Type = Styling ) ستظهر جميع الاستيلات المتاحه نختار الاستايل المراد استخدامه فى المدونه ونقوم باستبداله مكان السطر الذى وضعناه اسفل ال "head" فى قالب المدونه وبعد ذلك نحفظ التعديل


والى هنا نكون وصلنا الى نهايه الموضوع 
لا تتردد فى اى استفسار 
هل اعجبك الموضوع :

أخر المواضيع من قسم : ♪ بلوجر♪

تعليقات

إرسال تعليق

التنقل السريع