إذا كنت تدير موقعًا يعتمد على عرض الأكواد البرمجية (مثل مدونة تقنية أو موقع تعليمي)، فمن المهم أن تكون الأكواد ملوّنة ومنسّقة بشكل واضح. هنا يأتي دور PrismJS، وهي مكتبة خفيفة وسريعة لتمييز الأكواد (Syntax Highlighting) تدعم عشرات لغات البرمجة.

في هذا المقال سنتعلم كيفية إضافة PrismJS إلى قالب ووردبريس بسهولة.

1. تحميل مكتبة PrismJS

يمكنك الحصول على الملفات بطريقتين:

• من الموقع الرسمي: https://prismjs.com
• أو استخدام CDN (وهو الأسهل).

مثال باستخدام CDN:

<!-- CSS Prism -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />

<!-- JS Prism -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

2. إضافتها إلى قالب ووردبريس

لا تقم بلصق الروابط مباشرة داخل ملفات القالب، بل الأفضل استخدام دالة wp_enqueue_scripts داخل ملف functions.php للقالب.

افتح ملف functions.php في مجلد القالب وأضف الكود التالي:

function add_prism() {

    if ( is_single() && has_tag( 'code' ) ) {
        
    // إضافة ملف CSS
        wp_enqueue_style(
        'prismjs-style',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-okaidia.min.css',
        array(),
        '1.30.0'
    );

    // إضافة ملف JS
    wp_enqueue_script(
        'prismjs-script',
        'https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js',
        array(),
        '1.30.0',
        true
    );

    }
}
add_action('wp_enqueue_scripts', 'add_prism');

بهذا الشكل سيقوم ووردبريس بتحميل مكتبة PrismJS بشكل صحيح في موقعك.

يمكنك تغيير الستايل بتغيير prism-okaidia

‘https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-okaidia.min.css بي

• prism-funky
• prism-dark
• prism-tomorrow
• prism-twilight
• prism-coy
• prism-solarizedlight

استخدام PrismJS في المقالات

لإظهار الأكواد داخل التدوينات، استخدم المكون شفرة خاصة <> وأضف الكود الذي تريد عرضه في الموقع .
مثال لاضافة شفرة خاصة

مثال لاضافة الكود المراد عرض في الموقع

ليعمل الكود يجب تحقيق الشروط التالية:

• اولا اضافة كلاس اللغة language-css على سبيل المثال.
• ثانيا اضافة وسم code الى المقالة.

اضافة كلاس اللغة language-css

اضافة وسم code الى المقالة.

النتيجة:

:root {
    --color-principale: #edf2fc;
    --color-hover: #009879;
    --bg-color-hover: #2121211e;
    --white-color: white;

}

* {
    font-family: "cairo", serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body {
    background-color: var(--white-color);
}

.container {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: fixed;
    /* top: 0; */
    z-index: 9999;
}

الطريقة الثانية: تحميل و اضافة ملف prism.css و prism.js الى مجلد المشروع

الطريقة الثانية هي أن تقوم بتحميل ملفات PrismJS (CSS و JS) ووضعها داخل مجلد القالب أو الثيم الخاص بك في ووردبريس، بدلاً من استخدام CDN. هذه الطريقة مفيدة إذا كنت تريد أن يعمل موقعك بدون الاعتماد على الإنترنت الخارجي أو إذا كنت تريد تخصيص الملفات.

1. تحميل الملفات

• ادخل إلى الموقع الرسمي: https://prismjs.com/download.html
• اختر اللغات التي تريد دعمها (مثلاً: HTML, CSS, JavaScript, PHP).
• اختر المظهر (Theme) الذي يعجبك (مثل: Default أو Okaidia).
• قم بتحميل الملفين:
  • prism.css
  • prism.js

الشرح التطبيقي بالصور

ادخل إلى الموقع الرسمي: https://prismjs.com/download.html

اختر التيم Themes المناسب لموقعك تم اختر Development version

اختر اللغات التي تحتاجها في موقعك او اختر جميع اللغات Languages

اختر الاضافات التي تحتاجها Plugins

بعدما تقوم بكل المراحل السابقة اضغط على تحميل الستايل مع السكريبت , download JS و download CSS

2. رفع الملفات إلى مجلد القالب

افتح مجلد القالب:

/wp-content/themes/اسم-القالب/

أنشئ مجلد جديد باسم assets/prism وضع داخله:

• prism.css
• prism.js

3. ربط الملفات في functions.php

افتح ملف functions.php داخل القالب وأضف الكود:

function add_prism() {

    if ( is_single() && has_tag( 'code' ) ) {
        
        // إضافة CSS
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/assets/prism/prism.css' // 
        );

        // إضافة JS
        wp_register_script(
            'prismJS', 
            get_stylesheet_directory_uri() . '/assets/prism/prism.js' 
        );

        
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');

    }
}
add_action('wp_enqueue_scripts', 'add_prism');

4. كتابة الأكواد في المقالات

نفس الطريقة المشروحة في الاعلى