Przejdź do treści
> 💻 🧠 Kod 1001 > 🧪📓 Bez kategorii > Podświetlanie kodu w WordPress za pomocą Gutenberg i Prism.js

Podświetlanie kodu w WordPress za pomocą Gutenberg i Prism.js

Kiedy tworzysz treści w WordPressie, zazwyczaj korzystasz z edytora Gutenberg.
Pojawił się on w WordPress 5.0 (grudzień 2018) i zastąpił stary edytor tekstowy TinyMCE.

TinyMCE był prostym edytorem z epoki Web 1.0 — polem <textarea> z przyciskami typu „pogrubienie”, „kursywa” i „link”.
Cały tekst był zapisywany jako jednolity strumień HTML, co utrudniało przesuwanie bloków lub wstawianie nowych elementów.
Ponadto TinyMCE nie obsługiwał responsywnego układu 12 kolumn, który stał się standardem de facto w erze Web 2.0.
Złożone układy należało więc budować ręcznie, korzystając z HTML i CSS.

In Questo Articolo
  1. Gutenberg — edytor nowej generacji
  2. Jak Gutenberg realizuje siatkę
  3. Problem standardowego bloku kodu
  4. Czym jest Prism.js
  5. Praca z motywem potomnym
  6. Jak korzystać ze strony Prism.js
  7. Podłączanie Prism.js do WordPressa
  8. Automatyczna numeracja wierszy
  9. Escapowanie symboli HTML
  10. Style dla bloków kodu
  11. Dodatkowe funkcje Prism.js
  12. Przed i po podłączeniu Prism.js

Gutenberg — edytor nowej generacji

Edytor Gutenberg rozwiązał ten problem.
Każda część strony istnieje teraz jako blok — nagłówek, akapit, cytat, obraz, tabela lub fragment kodu.
To sprawia, że edycja jest prostsza, a strony bardziej elastyczne i responsywne.

Treść powinna wyglądać dobrze na każdym urządzeniu — od telefonu po szeroki monitor.
Jeśli strona nie dostosowuje się do ekranu, tekst „pływa”, obrazy są przycinane, a tabele wychodzą poza blok.
Rozwiązaniem jest responsywny układ, który automatycznie dostosowuje się do szerokości ekranu.

Podstawą takiego układu jest siatka 12 kolumn, spopularyzowana przez frameworki takie jak Bootstrap i Foundation.
Szerokość kontenera dzieli się na 12 równych części (po 8,33% każda), co pozwala tworzyć dowolne układy.

Przykład:

1 kolumna  → [████████████] 100%
2 kolumny  → [██████][██████] 6/6
3 kolumny  → [████][████][████] 4/4/4
4 kolumny  → [███][███][███][███] 3/3/3/3

Na urządzeniach mobilnych kolumny automatycznie ustawiają się pionowo,
dzięki czemu treść pozostaje czytelna i uporządkowana.

Jak Gutenberg realizuje siatkę

W Gutenbergu układ 12 kolumn realizowany jest za pomocą bloku „Kolumny”,
który automatycznie dostosowuje układ elementów do szerokości ekranu.
W HTML są to kontenery z klasami wp-block-columns i wp-block-column,
a w CSS stosowany jest Flexbox, który odpowiada za wyrównanie i zachowanie kolumn.

Przykład:

<div class="wp-block-columns">
  <div class="wp-block-column">
    <p>Pierwsza kolumna</p>
  </div>
  <div class="wp-block-column">
    <p>Druga kolumna</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;
  }
}

Ta struktura sprawia, że Gutenberg jest elastyczny i zapewnia poprawne wyświetlanie stron na wszystkich urządzeniach.

Problem standardowego bloku kodu

Wśród wszystkich bloków Gutenberga szczególną uwagę zasługuje blok „Kod”.
Służy on do prezentowania przykładów programów, skryptów czy konfiguracji.
Technicznie jest to prosty kontener HTML:

<pre> ... </pre>

Zarówno Gutenberg, jak i TinyMCE wyświetlają go tak samo — jako tekst o stałej szerokości znaków
(zazwyczaj Consolas, Courier New lub Monaco),
bez podświetlenia składni i bez numeracji wierszy.

Dla zwykłego tekstu to wystarczy, ale w artykułach technicznych taki kod trudno się czyta.
Najprostszym rozwiązaniem jest użycie Prism.js.

Czym jest Prism.js

Prism.js to lekka biblioteka JavaScript do podświetlania składni bezpośrednio w przeglądarce.
Nie wymaga części serwerowej: skrypt analizuje zawartość znaczników <pre><code>...,
a plik stylów prism.css dodaje kolory do słów kluczowych, ciągów, liczb i komentarzy.

Prism obsługuje dziesiątki języków programowania — od HTML i JavaScript po Python i Go —
i oferuje wiele wtyczek: numerację wierszy, przycisk kopiowania, nazwę języka, tryby jasny i ciemny itp.

Przykład:

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

Po podłączeniu Prism.js kod zostanie automatycznie podświetlony w przeglądarce.

Praca z motywem potomnym

Przed dodaniem Prism.js nie należy modyfikować plików motywu głównego.
Wszystkie zmiany w WordPressie powinno się wykonywać w motywie potomnym.

Motyw w WordPressie kontroluje wygląd strony — szablony, style, menu, nagłówki i stopki.
Jeśli zmienisz aktywny motyw bezpośrednio, kolejne aktualizacje usuną wszystkie twoje modyfikacje.

Motyw potomny rozwiązuje ten problem: dziedziczy wszystko po motywie nadrzędnym,
ale przechowuje twoje ustawienia oddzielnie, chroniąc je przed aktualizacjami.

Utwórz folder:

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

Dodaj plik style.css:

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

Pole Template musi odpowiadać nazwie folderu motywu nadrzędnego.
Następnie utwórz 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')
    );
}

Aktywuj motyw w sekcji Wygląd → Motywy,
a następnie wykonuj wszystkie modyfikacje tylko w motywie potomnym.

Jak korzystać ze strony Prism.js

Kiedy motyw potomny jest gotowy, przejdź na oficjalną stronę Prism.js:
👉 https://prismjs.com

Otwórz zakładkę Download — to tutaj możesz zbudować własną wersję biblioteki.

Zalecane ustawienia

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

Następnie pobierz:

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

Umieść oba pliki w folderze motywu potomnego:

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

Podłączanie Prism.js do WordPressa

Otwórz functions.php i dodaj:

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);
}

Od tej pory Prism.js automatycznie będzie podświetlał kod w znacznikach
<pre><code>....

Automatyczna numeracja wierszy

Dodaj filtr WordPressa, który automatycznie doda numerację wierszy:

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
    );
}

Escapowanie symboli HTML

Jeśli twój kod zawiera znaki < lub >, przeglądarka może je odczytać jako znaczniki HTML.
Aby temu zapobiec, dodaj filtr, który automatycznie zamienia te symbole podczas zapisu posta:

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 dla bloków kodu

Dodaj poniższe style do pliku style.css motywu potomnego:

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;
}

Dodatkowe funkcje Prism.js

  • 🔢 Numeracja wierszy — dodaje numery po lewej stronie kodu.
  • 🧠 Podświetlanie wybranych linii — użyj data-line="2,4-5" do zaznaczenia konkretnych linii.
  • 📋 Przycisk „Kopiuj” — kopiuje kod jednym kliknięciem.
  • 💡 Wyświetlanie języka — pokazuje nazwę języka nad blokiem kodu.
  • 🌗 Tryby jasny i ciemny — automatyczne przełączanie motywów:
@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: #d4d4d4; }
}
  • 🎨 Dostosowanie kolorów — zmień kolory tokenów w swoim style.css:
.token.keyword { color: #d73a49; font-weight: 600; }
.token.string  { color: #032f62; }
.token.comment { color: #6a737d; font-style: italic; }

Przed i po podłączeniu Prism.js

Przed

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

Rezultat:

function greet(name) {
  return `Hello, ${name}`;
}

Zwykły tekst o stałej szerokości, bez kolorów i numeracji.

Po

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

Rezultat:

1 function greet(name) {
2   return `Hello, ${name}`;
3 }

Każda linia jest ponumerowana, kod podświetlony,
a w prawym górnym rogu pojawia się przycisk Copy.

Prism.js sprawia, że fragmenty kodu są czytelne i estetyczne.
Działa w całości po stronie przeglądarki, bez dodatkowych wtyczek,
nie wpływa na wydajność i pozwala twoim artykułom wyglądać profesjonalnie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *