Zvýraznění syntaxe zdrojových kódů

Existující řešení

Když jsem zjišťoval, jaké jsou možnosti v době tvorby blogu, narazil jsem na 2 možnosti, SyntaxHighlighter a PrismJS. Druhá možnost se mi líbila natolik, že jsem se pro ni rozhodl, aniž bych hledal dále.

Když jsem ale psal článek, našel jsem třetí možnost Highlight.JS. Asi bych si vybral tuto možnost, pokud bych na něj narazil dříve.

SyntaxHighlighter

Nejznámější a asi i nejpoužívanější je SyntaxHighlighter. Na tomto zvýrazňovači se mi ale nelíbí jeho velikost. Jen JavaScripty při mé konfiguraci zabírají okolo 50kB.

Jednotlivé štětce pro jazyky jsou navíc v oddělených souborech, což vyústí ve více požadavků na server. Autoloader sice dokáže načítat pouze potřebné, ale při více různých jazyků na jedné stránce to může vyústit ve velké zpomalení při načítání.

PrismJS a Highlight.JS

Oba tyto nástroje jsou na tom podobně. Při mé konfiguraci PrismJS zabírá 19,5kB a Highlight.js 22.8kB + CSS, zde záleží na stylu. Highlight.JS ovšem nabízí možnost automatické detekce vybraného jazyka, což může usnadnit práci.

PrismJS zase nějaké ty pluginy, jako užitečná čísla řádků. Obarvení syntaxe ovšem řeší pomocí regulárních výrazů, což někdy znamená, že neobarví vše korektně. Jde to vidět i u mého kódu pro přidání tagu code. Netají se tím, a známé problémy najdete na webu.

U obou najdeme možnost sestavit si skript podle požadavků na jazyky. Vyberete si, které budete používat a tím zeštíhlíte výslednou velikost.

Použití

Zdrojové kódy asi budete všichni zadávat přes WYSIWYG. Já používám CKEditor ale základní použití bude všude stejné. Stačí pouze povolit zápis to bloků pre, který zachovává mezery, a případně přidávat CSS třídy tomuto elementu.

Protože používám Prism, který neumí rozpoznávat syntaxi, z nabídky stylů v CKEditoru vybírám přesně, který jazyk chci použít.

$("#wysiwygTiny").ckeditor({
  ...
  stylesSet: [
    ...
    {name: "PHP", element: "pre",attributes: {'class': 'language-php'}},
    {name: "HTML", element: "pre",attributes: {'class': 'language-markup'}},
    {name: "CSS", element: "pre",attributes: {'class': 'language-css'}},
  ],
  format_tags: 'p;h2;h3;h4;pre',
});

Přidání tagu code

WYSIWYG vám vloží do HTML kód, který bude vypadat následovně.

<pre class="language-php">
  <!-- Váš obsah zde -->
</pre>

Ale správné použití v HTML5 by mělo pro PrismJS i Highlight.js takto:

<pre>
  <code class="language-php">
    <!-- Váš obsah zde -->
  </code>
</pre>

Proto je nutné před vypsání obsahu na stránku provést jednoduché přeformátování pomocí regulárního výrazu. Abychom nenačítali JS skripty a CSS na stránce, kde není potřeba, spočítáme počty výskytů. Následné přidání či odebrání odkazů na CSS a JS soubor již záleží na použitém frameworku.

$count_tag_pre = 0;
$text = preg_replace(
  '#<pre(.*?)>(?:[\n\r]*)(.*?)(?:[\n\r]*)</pre>#ms',
  "<pre class=\"line-numbers\"><code$1>$2</code></pre>",
  $text, -1, $count_tag_pre);

if($count_tag_pre > 0){
  //přidáme do hlavičky CSS a JS
  //řešení závisí na použitém frameworku
}

Vysvětlení regulárního výrazu

Přidání tagu code provedeme přes funkci preg_replace, která dokáže také spočítat počty nahrazených bloků. Najdeme tag pre, a veškeré jeho atributy. Poté hledáme prázdné řádky na začátku, získáme obsah a hledáme prázdné řádky na konci.

Toto nahradíme tagem pre, kterému dáme třídu line-numbers pro načtení pluginu, dále tag code kterému přidáme všechny atributy z původního tagu pre a do něj vložíme hlavní obsah.

Nyní pokud jsme nahradili alespoň 1 blok, do hlavičky si přidáme JS a CSS soubory zvýrazňovače.

Spuštění skriptu

Zde není potřeba nic rozvádět. PrismJS se spustí sám, vyhledá veškeré elementy pre a code a obarví je podle zvolené třídy.

---

Pokud se vám článek líbí, využijete jej nebo jen vám připadá užitečný, budu rád za nějakou reakci komentářem nebo sdílení. Děkuji