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

Pavel Tipy & triky, JavaScript, CSS, PHP, HTML

Zvýraznění syntaxe je základ textových editorů a vývojářských nástrojů. Pokud ale dáváme zdrojové kódy na web, může se někdy hodit zvýraznit syntaxi pro lepší čtení a orientaci. Pro svůj blog jsem také syntax highlighter hledal a našel. Ukážeme si použití a porovnáme s pár dalšími.

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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

xergic

http://www.kandera.net 3.3.2015 11:58

Doteď jsem používal Prettify, ale jak jsem začal dělat novou verzi blogu (kterou snad brzo spustím), hledal jsem alternativy a Prism mi přijde nejlepší. Jenom mi nefungovaly čísla řádků, ale za to může nejspíš Bootstrap. A taky mi nechce zvýrazňovat XML.
Highlight.js je ale taky dobrý.

Jo, kéž bych tak měl WYSIWYG editor, můj systém pochází z doby kamenné a takové vymoženosti tam nemám :-)

Odpovědět

Pavel

http://www.kutac.cz/blog/ 3.3.2015 15:59

To je zvláštní s tím XML. Já s tím problém neměl, označil jsem jej jako "markup" a vše fungovalo dobře.

xergic

http://www.kandera.net 3.3.2015 21:53

No, teď si připadám trapně - měl jsem tam překlep. A můžu se stokrát divit, že to nefunguje :D

Novinky z blogu

Možnosti vložení obrázků do emailů

Obrázky lze do těla emailů vkládat třemi způsoby. Každý má své výhody i nevýhody, některé fungují lépe než jiné. Největší problém ale stejně jsou emailoví klienti. Některé...

Další články