تلوين الأكواد في بلوجر باستخدام Google Code Prettify

بواسطةzinouprof •
0 
مكنك إضافة هذا الموضوع في مدونتك على بلوجر لشرح طريقة استخدام Google Code Prettify (المعروف لدالة prettyPrint) وكيفية تطبيقه عمليًّا لتلوين الأكواد وعرضها بشكل جميل:

تلوين الأكواد في بلوجر باستخدام Google Code Prettify
مقدمة
عند مشاركة مقاطع كود برمجي في المدونات، من المهم أن تظهر بشكل منظّم وواضح مع تلوين نحوي (Syntax Highlighting) يساعد القارئ على فهم البُنى اللغوية بسهولة. إحدى أسهل وأخفّ الطرق لتحقيق ذلك في بلوجر هي باستخدام مكتبة Google Code Prettify ودالة prettyPrint().

1. ما هي Google Code Prettify؟
مكتبة JavaScript وCSS مفتوحة المصدر من جوجل.

تلوّن تلقائيًّا أنواعًا عديدة من لغات البرمجة (Python, JavaScript, HTML, CSS… إلخ).

خفيفة ولا تحتاج إلى إعداد معقد أو إضافات “Plugin” في بلوجر.

2. خطوات إضافة Prettify إلى قالب بلوجر
افتح محرّر القالب

من لوحة بلوجر: Theme → Edit HTML.

ضمن  أضف:
  




هذا يضيف ملف الـCSS لخطوط وألوان الكود، وملف جافاسكريبت الذي يحوي prettyPrint().

احفظ التغييرات.
3. كيفية كتابة الأكواد في التدوينات
عند إنشاء تدوينة جديدة:

انتقل إلى وضع HTML (وليس Compose).

أحطّ كودك داخل وسم 
 مع كلاس prettyprint:

html
Copier le code


# مثال بلغة بايثون
def greet(name):
    print(f"Hello, {name}!")



  prettyprint لإعلام المكتبة بوجود كود يلوّن.

linenums لعرض أرقام الأسطر (اختياري).

انشر التدوينة، وستظهر الأكواد ملونة مع أرقام الأسطر.
  
 4. تخصيص مظهر الكود
يمكنك إثراء تجربة القارئ بـCSS إضافي. مثلاً أدخل هذا في  بعد رابط Prettify:

html
Copier le code
 
  

  
  خلفية: تبرز الكود عن باقي الصفحة.

حدود مدورة: لمظهر عصري.

تمرير أفقي: لتفادي كسر التخطيط عند الأسطر الطويلة.

5. نصائح عملية
استخدم علامات الفاصلة الثلاثية (fenced code blocks) في Markdown إن كانت مدونتك تدعمها، لكتابة أكواد بلغات متعددة.

جرّب الكود أولًا في مسودة تدوينة للتأكد من ظهور التلوين والأرقام بشكل صحيح.

عند تحديث الكود، ما عليك سوى تحرير التدوينة نفسها؛ لا حاجة لتعديل القالب مجددًا.


  الخلاصة
بتطبيق هذه الخطوات البسيطة، تحصل على نظام تلوين أكواد سريع وفعّال داخل مدونتك على بلوجر، يعزز من وضوح شروحاتك البرمجية ويسهل على القارئ متابعة الأجزاء التقنية.


التصنيف :

إرسال تعليق

أحدث أقدم