موضوعنا يتعلق عن إضافة SyntaxHighlighter وكيفية استخدامها في Blogger ..

السلام عليكم ورحمة الله وبركاته ..

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

موضوعنا يتعلق عن إضافة SyntaxHighlighter وكيفية استخدامها في Blogger ..

طبعاً أغلبكم لا يعرف ما فائدة الإضافة , فقط كـ نبذة عنها هي تقوم بترتيب وتلوين سطور الأكواد بـ حيث تكون مرتبة ويسهل على الزائر قراءتها دون تشويه محتوى الصفحة , ومن مميزات الإضافة أنها تتعرف على العديد من اللغات البرمجية , ولـ تعرف أكثر عنها شاهد هذه الصورة الملتقطة من مدونتي كـ مثال لـ كود php :



شاهد كيف هي مرتبة ومنظمة أفضل من سردها في التدوينة ..

والآن نأتي لـ طريقة التركيب :

1- نقوم بالدخول إلى لوحة التحكم الخاصة بـ Blogger وندخل على Template كما في الصورة :



2- نشاهد الستايل الخاص بنا , ثم نضغط على Edit HTML لـ نقوم بـ تعديلاتنا الخاصة لـ تهيئة الإضافة :



3- نشاهد أكواد الستايل الآن في الصورة التالية ونبحث عن :

رمز PHP:

</head> 

4- إضافة الأكواد التالية الخاصة بالإضافة فوق </head> :

رمز PHP:

<!-- Syntax Highlighter Additions START -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
  
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all(); </script> <!-- Syntax Highlighter Additions END --> 

كما تشاهد أدناه :



5- نقوم بـ حفظ Template كما تشاهد في الصورة التالية :



6- نذهب الآن لـ كتابة تدوينة كاملة مع الأكواد المراد تنظيمها كما تشاهد في الصورة التالية :



7- ثم الدخول على HTML لـ تعديل الأكواد واستخدام الإضافة :



8- لـ نضرب مثال أسهل قبل التعديل , لو أنني امتلك كود محتواه :

رمز PHP:

<?php echo "hello!"; ?>

سـ أضيفه بالطريقة التالية :

رمز PHP:

<pre class="brush:php;">
&lt;?php echo "hello!";
?&gt;
</pre> 

شاهد في السطر الأول أنني اخترت كلاس php لـ يتعرف على الكود أنه php , ولو تلاحظ أن الأكواد التي أضفناها سابقاً هي جميع روابط كلاسات اللغات المشهورة وبإمكانك استخدامها فقط بـ حسب اللغة ..

مثلاً عندنا كود SQL هذا :

رمز PHP:

INSERT INTO adminstaff VALUES("System","Admin","","","7","5","","","","","","","","000","","","17","2007-05-22","17","000000","Admin","Active","","0","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","000","System.A","0","2012-08-08 11:52:13","","Grant","Grant",""); 

سـ نقوم بإضافته في المدونة كـ التالي :

رمز PHP:

<pre class="brush:sql"> INSERT INTO adminstaff VALUES("System","Admin","","","7","5","","","","","","","","000","","","17","2007-05-22","17","000000","Admin","Active","","0","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","Grant","000","System.A","0","2012-08-08 11:52:13","","Grant","Grant","");
</pre> 

وهكذا ..

الآن نعود لـ تدوينتنا لاستخدام الإضافة على بعض أكواد php , ولـ نقوم بتعديلها كما شرحنا سابقاً :



بعد التعديل على التدوينة وجميع الأسطر المراد إظهارها بالإضافة شاهد النتائج :



# ملاحظات :

1- SyntaxHighlighter تستطيع استخدامها في العديد من الأماكن وليس فقط مقتصرة على Blogger بل بعضها متوفرة على إضافات ومستخدمة في السكربتات الكبرى ..

2- بإمكانك إضافة وتعديل وحذف كلاسات كثيرة كما هي مرتبة في الكود أعلاه ..

3- هنالك أكثر من ستايل متوفر تجدها هنا :

SyntaxHighlighter - Themes

فقط قُم باختيار أحدهما والتعديل على السطر الثالث وهو هذا :

رمز PHP:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> 

إلى ستايل آخر كـ مثال الذي استخدمه أنا في مدونتي ذو الخلفية السوداء والبرتقالية :

رمز PHP:

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" /> 

وهكذا ..

أتمنى الصورة اتضحت لديكم ..