الطريقة السليمة لعرض كود المصدر لتدوينات بلوجر

الكثير من المدونين الذين يستخدمون بلوجر و منهم أنا يبحثون عن الطريقة الأفضل لعرض أكواد المصدر – Source Code – بشكل سليم في تدويناتهم, و ذلك لتجنب حدوث أخطاء عند نسخ الكود من قِبَل الزائر, مما سوف يتسبب في تلف التطبيق الذي يقوم بتطبيقه الزائر علي درسك المطروح في مدونتك. هنا تأتي أهمية syntaxhighlighter لتصحيح شكل عرض أكواد المصدر بشكل سليم في مدونات بلوجر …

شرح التركيب علي بلوجر

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

1. أضغط علي CTRL + F للبحث من خلال المتصفح عن الوسم التالي :

</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'/>

2. أضغط CTRL + F مرة أخري و أبحث عن :

</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>

ثم قم بحفظ التغييرات.

شرح كيفية الإستخدام

قم بكتابة تدوينتك بالطريقة المعتادة و عندما تأتي للسطر الذي سوف تبدأ بكتابة كود المصدر فيه, أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة

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

مع مراعاة تغيير الـ class لإسم لغة البرمجة الذي ينتمي إليها الكود مثل : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. و هكذا.