كيف تعرض الأكواد بالألوان

سأشرح لكم في هذه التدوينة طريقة عرض الأكواد بالألوان. وقد كتبت في تدوينة سابقة حول كيفية عرض الأكواد من اليسار إلى اليمين في مربع خاص، عبر تعديل خصائص دالة <pre> في ملف ال css. ما سأقوم به اليوم هو شرح طريقة إستخدام إضافة wp-syntax التي تقوم بتلوين الأكواد أوتوماتيكياً حسب ما هو متعارف عليه في لغة البرمجة، كما فعلت أنا حديثاً في موقعي.

إضافة WP-Syntax

هدف الإضافة

تلوين الأكواد حسب ما هو متعارف عليه في لغة البرمجة.

مثال حيّ

أنظر المثال التالي.

تعريب

لا تحتاج! هذه إضافة بسيطة جداً.

طريقة العمل

1- حمّل الإضافة من دليل ووردبرس (لمزيد من التفاصيل راجع تدوينتي هذه)

2- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

3- إتبع التعليمات كما يلي:

– إذهب إلى محرر ال Html في ووردبرس

– حدد لغة الكود الذي تريد عرضه

– أدخل التعليمة التالية قبل الكود:

<pre lang="xxx">

حيث xxx يساوي الدالة المتعارف عليها للّفة. مثلاً php للغة php و css للغة css و html4strict للغة html. لمزيد من التفاصيل حول اللغات المدعومة ودالاتها الخاصة، أنظر الصفحة التالية.

هذا كل شيئ! أكتب الكود الذي تريد عرضه وأغلق دالة <pre> وسيظهر لك الكود بالألوان. لاحظ أنك تستطيع تعديل طريقة و شكل عرض الأكواد (البوردر والخلفية و ما إلى ذلك) عبر تعديل ملف wp-syntax.css المرفق مع الإضافة. بالتوفيق و ما عليكم لا السؤال إن إحتجتم أي مساعدة.