عرض الكود في مدونات بلوغرز

كنت ابحث عن طريقة لعرض الشيفرة المصدرية source code بالمدونة و كنت أستخد سابقا إحدا الإضافات التي تدعم ذلك على محرري العزيز Window Live Writer لكنها لم تعد تعمل الأن على النسخة الجديدة :(.

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

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

• فور دخولك لبلوغر إختر التخطيط –> تحرير HTML .
• خذ نسخة إحتياطية من القالب عن طريق حفظ قالب.
• ثم إبحث عن نهاية وسم Tag </head>d قبل نهايته ضع ما يلي .

<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'/>
<!-- add brushes here -->
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

• الأن بعد إضافة هذا الكود في رأس القالب نريد أن نضيف ما تسميها هذ الإضافة ب فرشاة كي تلون الكود حسب اللغة المستخدمة و ضع هذه الكود مكان التعليق

<!-- add brushes here -->

• بالنسبة لي وضعت الفراشي التالية و هي ل HTML , XML , C#, Python , javascript و بإمكانك الإختيار من مجموعة واسعة من الفراشي هنا .

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/shBrushPython.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/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>

• بكل بساطة تستطيع أن تضيف الكود الذي تريده لكن إذا أردت أن تضيف كود HTML تأكد أن يكون مشفرا يعني بدل > تضع &lt; و ما إلى ذلك من علامات HTML و هناك خدمة بسيطة تفعل ذلك على هذا الموقع فتضع الكود الذي تريد عرضة هنا و تحولة.

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

<pre class="brush:js">

function Sum(var1, var2)
{
var sum = var1 + var2;

//Return value;

return sum;
};
</pre>

كما يلي

function Sum(var1, var2)
{
var sum = var1 + var2;
//Return value;
return sum;
};

و أريد أن أذكر أن لن تستطيع أن ترى النتيجة النهائية إلا بعد نشر التدوينة .