تلوين الاكواد البرمجية اثناء عرضها باستخدام jquery

[MaX_10]

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

اليوم نأتي لكم بموضوع جميل جدا و يضفي لمسة جمالية لمشاريعنا البرمجية و خصوصا الخاصة بالمقالات و الدروس و المدونات - التي تعرض فيها الاواد البرمجية .

فموضوعنا اليوم نشرح فيه كيف نضيف ميزة تلوين تلك الاكواد البرمجية اثناء عرضها في المقال اة الدر او التدوينة بابسط طريقة ممكنة و باستخدام محبوبة الجميع الجي كواري

JQuery syntax Highlight

نشوف اولا مثال على موضوعنا و كذالك وصلة تحميل التطبيق كامل

المثال : http://ajaxar.com/resources/highligh...ight/demo.html (http://ajaxar.com/resources/highlight/highlight/demo.html)
الملفات : http://ajaxar.com/resources/highlight/highlight.zip

في الاول نستدعي الملفات الضرورية للاضافة و هي :
jquery.min.js : ملف المكتبة
highlight.js : المكتبة الاضافية و الخاصة بموضوعنا
highlight.css : ملف الانماط الانسيابة الخاص بالاضافة

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="highlight.js"></script> <link type="text/css" rel="stylesheet" media="all" href="highlight.css" />

و نضيف هذه الدالة تحت الملفات مباشرة لتنفيذ العملية :

$(document).ready(function(){
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});

نأتي لتطبيق الاضافة على الاكواد البرمجية : تدعم هذه الاضافة 4 انساق - انواع - من الاكواد البرمجية الا وهي :
1 : css - الانماط الانسيابية
2 : html - و xhtml
php : 3
js : 4 - الجافا و الجافا سكريبت

اذا لما يكون عندنا كود css مثلا لازم نحصره ضمن الوسم pre و نضيف له التالي class="code" lang="css" - حيث class="code" هو كلاس تنسيق المظهر العام و lang="css" هو نوع الكود كما وضحناه فوق لاحظ اننا حددنا النوع css لان مثالنا قلنا فيه كود css
اجمالا العملية تكون هكذا :

<pre class="code" lang="css">
كود الانماط الانسيابية هنا
</pre>

و نوع html

<pre class="code" lang="html">
كود الايتش ام آل و شبيهاته
</pre>

و php

<pre class="code" lang="php">
و كود البي اتش بي هنا
</pre>

و كود الجافا و الجافا سكريبت

<pre class="code" lang="js">
كود الجافا أو الجافا سكريبت هنا
</pre>


بهذه الطريقة البسيطة سيكون لدينا كود منسق و بشكل لائق و بالتالي برمجة نضيفة و متطورة



انتظرونا ان شاء الله في موضوع آخر و جديد

[الشبح]

بارك الله فيك يامبدع

[عبودي الجنابي]

مشكوررررررررررررر