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

بواسطة Amine27

أغسطس 29, 2009

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

توجد العديد من المكتبات الجاهزة للإستعمال مثل SyntaxHighlighter، لكن أشهرها مكتبة GeSHi التي توفر خصائص وميزات عدة وتدعم الكثير من اللغات، في شرحنا لن نتناول هذه المكتبة بل إضافة أخرى تستعلمها وتطوعها لملائمة التدوينات والمدونين

1
2
3
4
5
6
7

#include <stdio.h>

int main(int argc, char *argv[])
{
printf("Hello world\n");
return 0;
}

الإضافة هي CodeColorer، توفر الواجهة العربية وتدعمها فقط بتعديل من صفحة الإدارة، تحتوي العديد من الخصائص أهمها:

تلوين الأكواد في خلاصات RSS
تلوين سطر محدد في مجموعة أسطر من الأكواد
تلوين الأكواد في التعليقات
إظهار أو إخفاء أرقام الأسطر
ربط الكلمات المفتاحية بتوثيقها على النت
شريط التمرير ألي
توفر العديد من السمات مع إمكانية التخصيص

التثبيت وضبط العربية:

عملية التثبيت عادية كأي إضافة؛ قم بتحميلها من هنا

قم برفعها إلى المجلد wp-content/plugins/codecolorer ثم فعلها من لوحة تحكم ووردبريس

لإظهار الأكواد من اليسار إلى اليمين في المدونات العربية أضف السطر التالي إلى حقل “نمط CSS مخصص” ضمن خصائص الإضافة:

.codecolorer-container { direction:ltr;}

وهكذا ستضبط الإضافة مع المدونات العربية

طريقة الإستعمال:

طريقة الإستعمال سهلة، أضف أحد السطرين (يفضل الأول):

[cc lang="lang"]your code[\cc]

مع مراعات تغيير \ إلى / (لم استطع كتابتها من دون هذه الحيلة ) أو:

أعتقد أن الكود واضح، كل ماعليك فعله هو إستبدال “lang” باللغة التي تريد مثلا c أو cpp أو php، اللغات المدعومة من الإضافة وإختصاراتها تجدها هنا
ضع الكود الذي تريده مكان your code، وإذا واجهت أي مشاكل قم باستعمال محرر HTML بدلا من الظاهري عند إضافة الأكواد

إستعمال متقدم:

مايمز هذه الإضافة هو إمكانيات تخصيص عرض الكود، حيث تحتوي على العديد من المتغيرات أهمها:

lang: شاهدناها وهي المسؤولة عن اللغة
tab_size: تغيير حجم التبويب
line_numbers: لإظهار أو إخفاء أرقام الأسطر
no_links: لتعطيل تتبع الكلمات المفتاحية بروابط
theme: السمة المراد إستعمالها
nowarp: تعطيل الرجوع التلقائي إلى السطر
width: تغيير قيمة العرض
height: تغيير قيمة الطول

أمثلة:

السطر التالي:

بعد إضافة بعض الكود سيعطي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#include <QApplication>
#include <QPushButton>

int main( int argc, char **argv )
{
QApplication a( argc, argv );

QPushButton hello( "Hello world!", 0 );
hello.resize( 100, 30 );

a.setMainWidget( &hello );
hello.show();
return a.exec();
}

مثال آخر:

ينتج:

1
2
3
4
5
6
7
8
9

#!/usr/bin/python
print "List the first N elements of the Fibonacci sequence"
def fibo(n):
a, b = 0, 1
for i in range(n):
print b,
a, b = b, a+b
# call
fibo(20)

أو حتى:

لنحصل على:

!/bin/bash
# This script will test if we're in a leap year or not.

echo "Type the year that you want to check (4 digits), followed by [Enter]:"
read year

#year=`date +%Y`

if [ $[$year % 400] -eq "0" ]; then
echo "This is a leap year. February has 29 days."
elif [ $[$year % 4] -eq 0 ]; then
if [ $[$year % 100] -ne 0 ]; then
echo "This is a leap year. February has 29 days."
else
echo "This is not a leap year. February has 28 days."
fi
else
echo "This is not a leap year. February has 28 days."
fi

بعض الأمثلة الأخرى تجدها هنا
يمكن أيضا تخصيص أو إضافة سمات بالتعديل على ملف css

ملاحظة: الإصدار 0.9.5 لتعمل ترجمته قم بإعادة تسمية الملف الموجود في languages من codecolorer-ar_AR.mo إلى codecolorer-ar.mo، سيتم تدارك هذه الهفوة في الإصدار المقبل إن شاء الله

تحديث: تم ضبط المشكل السابق في الإصدارة 0.9.6

الموقع الرسمي للإضافة هنا

بالتوفيق

شارك التدوينة :