Zvýrazňovač syntaxe pre tvoj web - highlight.js

Iste si si už všimol, že tento web obsahuje krásne naformátované zdrojáčiky. Hľadal som nejaké šikovné, rýchle, jednoúčelové riešenie ktoré by nezaberalo veľa miesta a našiel som toto: https://highlightjs.org/. Takže poďme si ukázať ako vlastne funguje.

Najprv si treba nainštalovať npm balík:

yarn add highlight.js

alebo (ak používaš npm):

npm i highlight.js --save

V zdrojáku treba kód, ktorý sa má highlightovať uzavrieť do takéhoto bloku. Nezabudni na prefix "language-", knižnica síce funguje aj bez neho, ale pre naše účely ho potrebujeme.

<pre>
	<code class="language-javascript">
		... hociaky zdrojak
	</code>
</pre>

Ešte doplním zápis v markdowne (ak nevieš čo je markdown pozri sem). Ako si si už všimol v markdowne prefix "language-" neuvádzame, lebo ten ho pri preklade do HTML doplní automaticky:

```javascript
	... hociaky zdrojak
```

A potom ešte musíme naimportovať potrebné súbory (používam typescript-ový zápis, v čistom JS odstráň "* as"):

/* zapis v typescripte (ak pouzivate JS tak tu hviezdicku "* as" prec) */
import * as highlightJS from 'highlight.js/lib/highlight';
import 'highlight.js/styles/vs2015.css'; // moznost vyberu z viacerych stylov

import * as javascript from 'highlight.js/lib/languages/javascript';
highlightJS.registerLanguage('javascript', javascript);
highlightJS.initHighlightingOnLoad();

Všimni si tie 2 predposledné riadky, ak chcem zvýrazňovať syntax nejakého jazyka, musím ho najprv naimportovať a potom navyše ešte aj zaregistrovať. Takže tuná mám zaregistrovaný len JavaScript a keď v kóde použijem dajme tomu C#, tak mi ho highlighter nezvýrazní.

Keď som to uvidel prvý krát, kládol som si otázku, či to autor knižnice myslí vážne, prečo to musí takto komplikovať? Ale potom ma napadlo, že tie pre/code elementy majú názov jazyka už v názve CSS triedy. A náš krásny markdown k nim pridáva ešte aj prefix "language-", čo sa mi bude hodiť, lebo podľa neho viem, ktorá CSS trieda reprezentuje názov jazyka.

A máme riešenie:

Tak som si napísal skriptík. A ten podľa toho aké jazyky používame v pre/code blokoch zaregistruje príslušné highlightery. Samozrejme vždy v pre/code elemente treba používať názov jazyka totožný s názvom súboru highlighteru (teda napr.: nie JS, ale javascript) a pred názov pridať prefix "language-" (len ak nepoužívaš markdown, ktorý ho dopĺňa automaticky). Tu je môj skript (je pod licenciou Public Domain, takže si s ním rob čo chceš):

import * as highlightJS from 'highlight.js/lib/highlight';
import 'highlight.js/styles/vs2015.css';
import * as javascript from 'highlight.js/lib/languages/javascript';

const registerRelevantLanguages = (highlightJS) => {
    let registeredLanguages = new Set<string>();
    document.querySelectorAll('pre/code').forEach(element => {
        const prefixedName = element.className.split(' ').find(c => c.startsWith('language-'));
        if (typeof prefixedName === "string") {
            const names = prefixedName.split('-');
            if (names.length === 2) {
                const languageName = names[1];
                if (!registeredLanguages.has(languageName)) {
                    const language = require(`highlight.js/lib/languages/${languageName}`);
                    highlightJS.registerLanguage(languageName, language);
                    registeredLanguages.add(languageName);
                }
            }
        }
    });
}
registerRelevantLanguages(highlightJS);
highlightJS.initHighlightingOnLoad();

Tramtadadá a je to. O nič ďalšie sa nemusíš starať, všetko sa naimportuje automaticky. Samozrejme tú funkciu bude kvôli prehľadnosti dobré hodiť do samostatného modulu (to už je na tebe).