SyntaxHighlight
كما هو موضح إخوتي في العنوان جعل الأكواد البرمجية ظاهرة في مدونتك ولها خلفية مختلفة داخل صندوق خاص بها ، هناك عدة طرق للقيام بالعملية
الطريقة الاولى يدويا والثانية من خلال إضافات بلوجر وهي غير مجانية .....
ما اطرحه عليكم اليوم هي طريقة مستخدمة في أغلب المواقع والمدونات الاجنبية التي تنهج syntaxhighlight في تكويداتها للغات البرمجية واشهرها Postbin
قبل البدأ في وضع الكود داخل المدونة قد يهمك الإطلاع علي دورة html
ودورة في css
حتى لا تواجهك أي مشكلة في التعديل على كود المدونة
من داخل اعدادات بلوجر حولها للتدوين باستخدام الكود كما هو موضح في الصورة المتحركة :
بعدها مباشرة قبل كود <head/> ضع الكود التالي :
من داخل اعدادات بلوجر حولها للتدوين باستخدام الكود كما هو موضح في الصورة المتحركة :
بعدها مباشرة قبل كود <head/> ضع الكود التالي :
بعدها عند وضع أي كود برمجي داخل المدونة اضغط على ادات تكويد المدونة والصق الكود البرمجي بين وسمي pre
مثال:
<pre><code class="html">
أضف الكود هنا
</code></pre>
في هذه الحالة انت تمتلك مدونة بضومين خاص مذا عن قوانين google الجديدة التي تمنع النطاقات الغير المشفرة داخل مدوناتها المجانية اي التي تنتهي بblogspot
هذه مشكلة ستجعل الناس تحذر من مدونتك ومع الوقت سيمنع المتصفح دخول الناس الى مدونتك بمعنى اخر يتم القضاء على مدونتك لان وضعت روابط http في السورس بدلا من https
في حالتنا الاتية قمنا بوضع ادوات api لتميز الكود في المدونة لكن روابط api التي استخدمناها تنتمي الى نطاق http ونحن في مدونة بضومين blogspot يطلب منا نطاق امن قمت برفع الملفات الاساسية على موقع github ويمكنك تحميل او تعديل هذه الملفت عبر الرابط التالي : https://github.com/sadik-fattah/Syntex_2018
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
--------
Django theme
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
Emacs theme
الكود:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
Fade to Grey theme
كود :
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeFadeToGrey.css' rel='stylesheet' type='text/css'/>
Eclipse theme
كود:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
Midnight theme
كود:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
RDark theme
كود:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
----------------------------------------
لمحبي التطوير وضنع ستايلات خاصة بك أضع أمامك مشروع كامل مفتوح المصدر قصد التطوير
الى هنا اخوتي الكرام ينتهي شرحنا ان اعجبتك التدوينة لا تنسى اخي دعمي بتعليق ومشاركة مع اصدقائق وهذا رابط قناتي التعليمية على اليوتوب انصحك بالإطلاع عليها
0 تعليقات