Jak dodać nowe języki do wtyczki Highlighting Code Block w WordPressie?

Highlighting Code Block to popularna wtyczka WordPress oparta o Prism.js, służąca do kolorowania składni wstawionego kodu. Domyślnie obsługuje ograniczoną liczbę języków, jednak dzięki modularnej architekturze Prism.js możesz łatwo rozszerzyć jej możliwości. Poniżej pokażę Ci, jak to zrobić krok po kroku — bez ryzyka nadpisania oryginalnych plików.

📁 Pobierz wymagane składniki z prismjs.com

1. Przejdź na stronę https://prismjs.com/download.html
2. Wybierz języki, które chcesz dodać (np. YAML, SQL, Rust, Docker, itp.) oraz wtyczki (Line Numbers, Custom Class)
3. Kliknij Download JS — otrzymasz gotowy plik prism.js.
4. Możesz wybrać więcej pluginów co zwiększy możliwości wtyczki, ale nie wszystkie pola są prawidłowo formatowane, więc może wyglądać to słabo. Poniżej opis dostępnych pluginów (na dzień publikacji artykułu)

Nazwa Pluginu	Opis
Line Highlight	Pozwala podświetlić konkretne linie kodu za pomocą atrybutu data-line. Przykład: data-line="3,5-7"
Line Numbers	Dodaje numerację wierszy do bloków kodu.
Show Invisibles	Pokazuje znaki niedrukowalne, jak spacje, tabulatory, znaki końca linii.
Autolinker	Automatycznie wykrywa i zamienia adresy URL oraz e-maile na klikalne linki.
WebPlatform Docs	Dodaje linki kontekstowe do WebPlatform.org. Projekt jednak już nie istnieje, więc plugin jest przestarzały.
Custom Class	Pozwala dodać niestandardowe klasy CSS na podstawie języka, np. language-js dodaje klasę lang-js.
File Highlight	Automatycznie ładuje i wyświetla kod z plików zewnętrznych za pomocą atrybutu data-src.
Show Language	Pokazuje nazwę języka w górnej części bloku kodu.
JSONP Highlight	Podobne do File Highlight, ale używa JSONP – może pobierać pliki z innych domen.
Highlight Keywords	Pozwala ręcznie oznaczyć słowa kluczowe do podświetlenia przez data-keywords.
Remove initial line feed	Usuwa początkowy znak końca linii (\n) jeśli istnieje.
Inline color	Wyświetla kolory inline, np. #ff0000 pokazuje mały kwadrat z tym kolorem.
Previewers	Pozwala wyświetlać podgląd dla wartości CSS (np. kolory, cienie, gradienty, fonty) w czasie rzeczywistym.
Autoloader	Automatycznie ładuje moduły językowe, jeśli nie zostały wcześniej dołączone. Wymaga pliku components.json.
Keep Markup	Zachowuje oryginalne HTML-tag’i wewnątrz bloku <code>. Domyślnie Prism je usuwa.
Command Line	Stylizuje bloki kodu jak terminal (CLI), z możliwością pokazania promptów.
Unescaped Markup	Pozwala pisać kod HTML w postaci nieescapowanej – zachowuje znaczniki.
Normalize Whitespace	Normalizuje formatowanie kodu: usuwa nadmiarowe spacje, taby, końce linii.
Data-URI Highlight	Wyróżnia dane typu data: w kodzie (np. base64).
Toolbar	Dodaje pasek narzędzi nad blokiem kodu. Może współpracować z innymi wtyczkami (Copy, Download).
Copy to Clipboard Button	Dodaje przycisk „Kopiuj do schowka” w toolbarze.
Download Button	Pozwala pobrać kod jako plik. Wymaga Toolbar.
Match Braces	Podświetla pasujące nawiasy klamrowe, nawiasy itp.
Diff Highlight	Umożliwia podświetlenie różnic w kodzie w stylu + dodane i - usunięte.
Filter highlightAll	Pozwala stosować highlightAll tylko dla elementów z daną klasą lub atrybutem.
Treeview	Wizualizuje dane JSON/XML jako rozkładane drzewo.

📁 Wgraj nowy prism.js do katalogu wtyczki

Wtyczka trzyma swój skrypt zazwyczaj tu:

/wp-content/plugins/highlighting-code-block/assets/js/prism.js

• Zrób kopię oryginału i nazwij np. prism_original.js – nie pomijaj tego kroku!
• Zamień oryginalny plik prism.js na ten pobrany z prismjs.com z dodatkowymi językami.
• W razie potrzeby nadaj plikowi odpowiednie uprawnienia (644).

⚙️ Dodaj nowe języki do interfejsu wtyczki

W panelu WordPressa przejdź do Ustawienia → Highlighting Code Block → Language set to use

Tam znajdziesz listę języków w formacie:

ABAP:"ABAP",
bash:"Bash",
c:"C",
cpp:"C++",

Dodaj nowe języki, pamiętając o ważnych zasadach:

• Klucz (np. yaml) musi być identyczny jak identyfikator w prism.js (uwzględniaj wielkość liter!)
• Wartość (np. "YAML") to etykieta wyświetlana w interfejsie

Przykład:

yaml:"YAML",
rust:"Rust",
sql:"SQL",

Po zapisaniu zmian nowe języki będą dostępne na liście rozwijanej podczas edycji wpisu.

🧪 Przetestuj działanie

• Przejdź do edytora wpisów lub stron.
• Dodaj blok kodu.
• Wybierz jeden z nowo dodanych języków.
• Zapisz i podejrzyj wpis — kod powinien być kolorowany zgodnie z dodanym językiem.

💡 Wskazówki

Jeśli kod nie jest kolorowany lub strona wyświetla błąd JS, upewnij się, że:

• W prism.js rzeczywiście znajduje się parser danego języka.
• Nazwa języka w Language set to use zgadza się co do litery z tą w Prism.js.

Choć zrobiłem to samodzielnie to na dole oficjalnej strony wtyczki jest również podana podobna „instrukcja”.