הדגשת קוד ב־WordPress עם Gutenberg ו־Prism.js

כאשר אתם יוצרים תוכן ב־WordPress, אתם בדרך כלל משתמשים בעורך Gutenberg.
הוא הופיע בגרסת WordPress 5.0 (דצמבר 2018) והחליף את העורך הישן TinyMCE.

TinyMCE היה עורך פשוט מתקופת Web 1.0 — שדה <textarea> עם כפתורים בסיסיים כמו "מודגש", "נטוי" ו"קישור".
כל הטקסט נשמר כזרם אחד של קוד HTML, מה שהקשה להזיז בלוקים או להוסיף תוכן באמצע.
בנוסף, TinyMCE לא תמך בפריסת 12 עמודות רספונסיבית, שהפכה לסטנדרט בעידן Web 2.0.
לכן, מי שרצה לבנות מבנה עמוד מורכב נאלץ לעשות זאת ידנית בעזרת HTML ו־CSS.

---

Gutenberg — העורך מהדור החדש

Gutenberg פתר את הבעיה הזאת.
כעת כל חלק בעמוד הוא בלוק עצמאי — כותרת, פסקה, ציטוט, תמונה, טבלה או קטע קוד.
זה הופך את העריכה להרבה יותר נוחה, ואת הדפים — לגמישים ורספונסיביים.

התוכן צריך להיראות טוב בכל מכשיר — מטלפון ועד מסך רחב.
כאשר האתר לא מסתגל לגודל המסך, הטקסט "זז", התמונות נחתכות והטבלאות גולשות החוצה.
הפתרון הוא פריסה רספונסיבית, שמסתגלת אוטומטית.

הבסיס לפריסה כזו הוא רשת של 12 עמודות, שהפכה לסטנדרט הודות ל־Bootstrap ו־Foundation.
רוחב הקונטיינר נחלק ל־12 חלקים שווים (8.33% כל אחד), ומתוכם ניתן להרכיב כל מבנה עמוד.

דוגמה:

עמודה אחת  → [████████████] 100%
2 עמודות   → [██████][██████] 6/6
3 עמודות   → [████][████][████] 4/4/4
4 עמודות   → [███][███][███][███] 3/3/3/3

במכשירים ניידים העמודות מסתדרות אנכית,
כך שהתוכן נשאר קריא ונקי גם במסכים קטנים.

---

איך Gutenberg מיישם את הרשת

ב־Gutenberg ה־12 עמודות ממומשות באמצעות בלוק "עמודות" (Columns),
שמסדר אוטומטית את האלמנטים בהתאם לרוחב המסך.
ב־HTML מדובר בקונטיינרים עם המחלקות wp-block-columns ו־wp-block-column,
וב־CSS נעשה שימוש ב־Flexbox כדי לשלוט במבנה ובהתנהגות.

דוגמה:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>עמודה ראשונה</p>
  </div>
  <div class="wp-block-column">
    <p>עמודה שנייה</p>
  </div>
</div>

CSS:

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.wp-block-column {
  flex-grow: 1;
  flex-basis: 0;
}
@media (max-width: 600px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

כך Gutenberg שומר על פריסה גמישה ונכונה בכל רוחב מסך.

---

הבעיה עם בלוק הקוד

מבין כל הבלוקים ב־Gutenberg, בלוק הקוד הוא המעניין ביותר למפתחים.
הוא נועד להציג דוגמאות של קוד, פקודות או קונפיגורציה.
טכנית, זהו אלמנט פשוט:

<pre> ... </pre>

גם Gutenberg וגם TinyMCE מציגים אותו אותו דבר — טקסט בגופן מונוספייס
(בדרך כלל Consolas, Courier New או Monaco),
ללא הדגשה, ללא מספרי שורות וללא צבעים.

עבור טקסט רגיל זה בסדר, אבל כשמדובר במאמרים טכניים — זה קשה לקריאה.
הפתרון הפשוט ביותר הוא להשתמש בספריית Prism.js.

---

מה זה Prism.js

Prism.js היא ספרייה קלה ומהירה להדגשת תחביר בצד הדפדפן.
היא לא דורשת שרת — קובץ JavaScript סורק את התוכן שבתוך <pre><code>...,
וקובץ prism.css מוסיף צבעים למילות מפתח, מחרוזות, מספרים והערות.

Prism תומכת בעשרות שפות תכנות — מ־HTML ו־JavaScript ועד Python ו־Go —
ומציעה תוספים רבים: מספרי שורות, כפתור העתקה, הצגת שם השפה, מצב כהה ובהיר ועוד.

דוגמה:

<pre><code class="language-js">
function hello(name) {
  return `Hello, ${name}!`;
}

לאחר חיבור Prism.js הקוד יודגש אוטומטית בדפדפן.

---

עבודה עם תבנית בת

לפני שמוסיפים את Prism.js, אל תשנו את קבצי התבנית הראשית.
ב־WordPress נהוג לבצע שינויים רק בתבנית בת (Child Theme).

התבנית שולטת במראה האתר — פריסה, עיצוב, תפריטים, כותרות וכו’.
אם תשנו ישירות את התבנית הראשית, עדכון עתידי ימחק את כל השינויים.

תבנית בת יורשת הכול מהתבנית הראשית,
אך שומרת את הקוד שלכם בנפרד ומוגן מעדכונים.

צרו תיקייה:

/wp-content/themes/my-child-theme/

הוסיפו קובץ style.css:

/*
 Theme Name:   My Theme Child
 Template:     mytheme
 Version:      1.0
*/

השדה Template צריך להתאים לשם תיקיית התבנית הראשית.
לאחר מכן צרו קובץ functions.php:

<?php
add_action('wp_enqueue_scripts', 'child_enqueue_styles');
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

כעת הפעילו את התבנית בתפריט עיצוב → תבניות.
כל שינוי שתעשו מכאן ואילך יתבצע בתבנית הבת בלבד.

---

שימוש באתר Prism.js

לאחר שהכנתם את התבנית הבת, בקרו באתר הרשמי של Prism:
👉 https://prismjs.com

כנסו ללשונית Download, ושם תוכלו לבחור אילו רכיבים לכלול.

הגדרות מומלצות

1. Compression level: Minified
2. Languages: HTML, CSS, JavaScript, PHP, Python, JSON
3. Plugins:
   • Line Numbers
   • Toolbar
   • Copy to Clipboard Button
   • (לא חובה) Show Language
   • (לא חובה) Highlight Lines

לאחר מכן הורידו את הקבצים:

• DOWNLOAD JS → prism.js
• DOWNLOAD CSS → prism.css

והעתיקו אותם לתיקיית התבנית הבת:

/wp-content/themes/my-child-theme/

---

חיבור Prism.js ל־WordPress

פתחו את functions.php והוסיפו:

add_action('wp_enqueue_scripts', 'theme_enqueue_prism_assets');
function theme_enqueue_prism_assets() {
    $version = '1.29.0';
    wp_enqueue_style('prism-css',
        get_stylesheet_directory_uri() . '/prism.css', [], $version);
    wp_enqueue_script('prism-js',
        get_stylesheet_directory_uri() . '/prism.js', [], $version, true);
}

מעתה Prism.js יודגש אוטומטית כל קטע קוד בעמוד.

---

הוספת מספרי שורות

כדי להוסיף מספרי שורות אוטומטית, הוסיפו פילטר:

add_filter('render_block_core/code', 'theme_add_prism_line_numbers', 10, 2);
function theme_add_prism_line_numbers($content, $block) {
    return str_replace(
        '<pre class="wp-block-code">',
        '<pre class="wp-block-code line-numbers">',
        $content
    );
}

---

טיפול בתווי HTML

כדי למנוע מהדפדפן לפרש < ו־> כתגיות אמיתיות,
יש להוסיף פילטר שמחליף אותם בגרסאות בטוחות:

add_filter('content_save_pre', 'theme_escape_code_on_save');
function theme_escape_code_on_save($content) {
    return preg_replace_callback(
        '/<code([^>]*)>(.*?)<\/code>/is',
        function ($m) {
            $attrs = $m[1];
            $code  = htmlspecialchars($m[2], ENT_NOQUOTES, 'UTF-8');
            return "<code{$attrs}>{$code}";
        },
        $content
    );
}

---

עיצוב בלוקי הקוד

הוסיפו את הקוד הבא לקובץ style.css:

pre[class*="language-"] {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 1em;
  background: #f6f8fa;
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow: auto;
}
pre[class*="language-"].line-numbers {
  padding-left: 3.8em;
}

---

תוספים נוספים של Prism.js

• 🔢 מספור שורות — מציג מספרים לצד כל שורה.
• 🧠 הדגשת שורות ספציפיות — ניתן להוסיף data-line="2,4-5".
• 📋 כפתור העתקה — מעתיק קוד בלחיצה אחת.
• 💡 שם השפה — מציג את שם שפת התכנות.
• 🌗 מצב כהה ובהיר — מעבר אוטומטי לפי הגדרות מערכת:

@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}

• 🎨 התאמת צבעים אישית:

.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

---

לפני ואחרי Prism.js

לפני

<pre><code>
function greet(name) {
  return `Hello, ${name}`;
}

מוצג כטקסט רגיל, ללא צבעים או מספרי שורות.

אחרי

<pre class="line-numbers"><code class="language-js">
function greet(name) {
  return `Hello, ${name}`;
}

עכשיו כל שורה ממוספרת, הקוד מודגש צבעונית,
ולמעלה מופיע כפתור Copy נוח להעתקה.

---

Prism.js מוסיף לתוכן שלכם מגע מקצועי —
קטעי הקוד נראים טוב, קריאים, ומודגשים אוטומטית ללא תוספים נוספים או קוד מורכב.