recent
أخبار ساخنة

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

syntaxhighlighter

الكثير من المدونين الذين يستخدمون بلوجر و منهم أنا Happy يبحثون عن الطريقة الأفضل لعرض أكواد المصدر – 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. و هكذا.

author-img
محمد غراب - الحساب القديم

تعليقات

تعليق واحد
إرسال تعليق
  • ميم همزة photo
    ميم همزة16 سبتمبر 2010 في 1:55 م

    لكن ألا ترى معي أن استخدام هذه الطريقة من أجل موضوع واحد على سبيل المثال قد يثقل كاهل المدونة ككل ؟

    أظن أنه توجد طرق أيسر وأخف ..

    حذف التعليق
    google-playkhamsatmostaqltradent