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

يسرني اليوم أن أضع اول موضوع حول منصة البلوجر, في هذا الموضوع سنتطرق الى تركيب الإضافة المميزة جدا, وهي ملون أكواد لغات البرجة عن طريق الجيكويري, jQuery highlight على منصة البلوجر Blogger.

رأيت الكثير من المدونات التي تهتم بمجال برمجة وتصميم المواقع تسخدم الأكواد مباشرة في تدويناتها, مما يعطي انطباع سيئ حول التدوينة ويشوه جماليتها, لذلك فكرة في شرح الحل لهذه المشكلة عن طريق تركيب إضافة ملون الأكواد jQuery highlight.

وعلى فكرة هذه أول تدوينة عربية وأجنبية تقوم بشرح تركيب اضافة ملون الأكواد على منصة البلوجر Blogger, فتابعوني.

أولا سنبدأ بالنتيجة التي سنتوصل اليها في هذا الموضوع:




طريقة تركيب المثال:

يجب عليك في الأول تحميل الملفات ورفعها في استضافة للملفات من أجل التمكن من استدعائها, وهذا رابط لتحميل الملفات مع المثال:




بعد ذلك قم بأخد نسخة من قالبك للبلوجر Blogger كي تعود اليه إن حذث خطأ ما لديك في التركيب.وأتبع الآتي:

قبل الوسم التالي (وسم نهاية رأس الصفحة)

</head>

قم بإضافة الكود التالي الذي يستدعي الملفات الخاصة بالتطبيق:

<script src="http://puertokhalid.com/up/blogger/prg4all-highlight/js/prg4all.jquery.js"></script>
<script src="http://puertokhalid.com/up/blogger/prg4all-highlight/js/prg4all.highlight.js"></script>
<link href="http://puertokhalid.com/up/blogger/prg4all-highlight/css/prg4all.highlight.css" rel="stylesheet"/>

<script type="text/javascript">//<![CDATA[
  $.noConflict();
  jQuery(document).ready(function($) {
     $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol', source:false});
  });
//]]></script>

وهكذا تكون الإضافة قد نصبت بنجاح بمدونتك.


طريقة عمل اللإضافة:

عند إضافتك لمشاركة (تدوينة) جديدة بمنصة البلوجر, نقوم بتغيير التحرير الى HTML عن طريق الضغط على الزر كما في الصورة:



بعد ذلك تلصق الكود التالي:

<pre class="code" lang="html">
   <!-- هنا الكود الذي نود إدراجه -->
</pre>

مع تغيير الكود التالي الى نوع اللغة التي ستضيفها داخل الكود السابق:

lang="html"

يعني لو كانت اللغة المدرجة تتركها كما في الأعلى. ويمكن أن تغير بين ثلاث لغات: HTML, PHP, CSS.

لكن المشكلة أنك لو أضفت اي كود HTML بالمحرر الخاص بالبلوجر فيتم التعرف عليه وتحريره على أنه تنسيق!؟

لحل هذه المشكل عليك تحويل الاكواد الى رموز entities, وموقع يوفر لك هذه الخدمة بالمجان من الرابط التالي:



وبهذا يكون موضوعنا لليوم قد انتهى, وأي استفسار أو طلب فلا تترددوا في طرحه, فهذف الموقع الأول هو التقرب من إفادتم.
إلى أن ألتقي بكم في موضوع جديد أستودعكم الله الذي لا تضيع ودائعه, والسلام عليكم.