عرض الأكواد في ووردبريس و بلوجر باستعمال SyntaxHighlighter

  بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال SyntaxHighlighter في مدونات بلوجر Blogger و في مدونات ووردبريس Wordpress كذلك. و تجدر الإشارة إلى أن هذه الإضافة تفيد المدونات التعليمية التي اعتاد أصحابها على إدراج أكواد فيها قصد الشرح و التوضيح . لا استعملها في مدونتي و اكتفي بخاصية الاقتباس لعرض الأكواد بغية التبسيط لا غير و لكن سأستعملها في هذا الموضوع توضيحا و تمكينا من التجريب.
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)

.box-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

1- طريقة تنصيب الإضافة في مدونات بلوجر Blogger

من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :

</head>

قبلها أي فوقها مباشرة نلصق الكود الموالي:

<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/>

مرة أخرى نبحث عن:

</body>

و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.ClipboardSwf = &#39;/flash/clipboard.swf&#39;;
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;, true, true, false, 1, false);
}
window.onload = start;
</script>

الآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالتدوينة أو الموضوع.
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :

<pre name="code" class="css">
هنا يوضع الكود
</pre>

أو

<textarea name="code" class="css">
هنا يوضع الكود
</textarea>

طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي

- < إلى &lt;
- > إلى &gt;

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

2 - طريقة تركيب الإضافة على مدونات ووردبريس

• تحميل الإضافة من هنا SyntaxHighlighter Plus
• فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
• تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
• ثم في التدوينة أو الموضوع ندرج الكود كما يلي:

[sourcecode language='css']هنا يوضع الكود[/sourcecode]

يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.

   المصدر: مدونة ذؤيب

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : عرض الأكواد في ووردبريس و بلوجر باستعمال SyntaxHighlighter | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات بلوجر, اضافات css, تنسيق القالب, دروس بلوجر