MicroLighter: moderní zvýrazňování kódu bez zbytečného JavaScriptu
Pokud na svém WordPress webu pravidelně zobrazujete ukázky kódu, pravděpodobně už jste narazili na knihovny jako Prism.js nebo Highlight.js. Tyto nástroje fungují spolehlivě, ale často s sebou nesou poměrně složitý markup, spoustu HTML tříd a JavaScript, který se stará o barevné zvýraznění. Na scénu nyní přichází MicroLighter – řešení, které sází především na moderní CSS a slibuje jednodušší implementaci a menší zátěž pro prohlížeč.
MicroLighter není úplně nový projekt, ale díky tomu, že se opírá o technologii CSS Custom Highlights a pseudoprvku ::highlight(), která se letos stala součástí Baseline, získává na aktuálnosti. V podstatě jde o čistě CSS přístup k zvýrazňování syntaxe, který nevyžaduje složité HTML obalování ani desítky kilobajtů JavaScriptu. Pokud vás zajímá, jak by mohl zjednodušit práci s kódem na vašem webu, čtěte dál.
Co je MicroLighter a jak funguje
MicroLighter je nástroj na zvýrazňování syntaxe, který se od většiny konkurence liší tím, že se maximálně spoléhá na CSS. Autoři ho popisují jako „v podstatě čisté CSS postavené na Custom Highlights“. To znamená, že místo aby každé slovo v kódu obaloval do <span> elementů s třídami, využívá nativní prohlížečovou podporu pro definování oblastí, které mají být zvýrazněny. JavaScript se používá jen minimálně – například pro rozpoznání jazyka a rozdělení kódu na tokeny. Zbytek stylování obstará CSS pomocí pravidla ::highlight() a vlastních CSS proměnných.
Standardní zápis pro vložení kódu zůstává jednoduchý:
<pre><code class="language-javascript">const answer = 42;</code></pre>
Žádné složité konfigurace, žádné další atributy. MicroLighter si s tímto markupem poradí a s pomocí CSS a malého kousku JavaScriptu vykreslí barevně odlišený kód.
Hlavní výhody oproti tradičním nástrojům
Konkurenční řešení jako Prism.js nebo Highlight.js jsou osvědčená a robustní. Prism.js například podporuje obrovské množství jazyků, je velmi lehký a odolný. MicroLighter se s nimi nesnaží soupeřit v počtu funkcí, ale přináší několik zásadních výhod.
První a nejdůležitější je méně JavaScriptu. Celý proces zvýrazňování je postaven na CSS, takže prohlížeč nemusí zpracovávat stovky řádků skriptů, aby přebarvil jednotlivé části kódu. To se pozitivně projeví na rychlosti načítání stránky, zejména pokud máte na webu několik bloků s kódem.
Druhou výhodou je využití moderních CSS vlastností. MicroLighter hned od začátku podporuje funkci light-dark(), která automaticky přizpůsobí barvy kódu podle světlého nebo tmavého režimu. Můžete tak snadno vytvořit jedno téma, které bude fungovat v obou režimech, aniž byste museli psát složité media query nebo přepínače.
Třetí výhodou je modularita. MicroLighter je navržený tak, abyste si mohli vzít jen ty části, které skutečně potřebujete – konkrétní jazyky, jen určitá témata, nebo například funkci pro číslování řádků. Nic se nenačítá zbytečně.
Přizpůsobení a vlastní témata
Jednou z nejsilnějších stránek MicroLighteru je snadné přizpůsobení vzhledu pomocí CSS proměnných. Každý typ tokenu (klíčové slovo, řetězec, komentář, funkce atd.) má vlastní proměnnou, kterou můžete změnit. Navíc díky funkci light-dark() stačí nadefinovat dvě barvy pro každou proměnnou – jednu pro světlý a jednu pro tmavý režim.
Ukázka základních proměnných:
--syntax-background: light-dark(#ffffff, #0d1117);
--syntax-foreground: light-dark(#24292f, #c9d1d9);
--syntax-comment: light-dark(#6e7781, #8b949e);
--syntax-keyword: light-dark(#cf222e, #ff7b72);
--syntax-string: light-dark(#0a3069, #a5d6ff);
--syntax-function: light-dark(#8250df, #d2a8ff);
--syntax-tag: light-dark(#116329, #7ee787);
--syntax-deleted: light-dark(#cf222e, #ff7b72);
Díky tomu můžete během pár minut vytvořit zcela vlastní barevné schéma, které bude ladit s designem vašeho webu. Není potřeba překládat celý soubor stylů, stačí upravit hodnoty proměnných ve svém CSS.
Praktické použití ve WordPressu
Pro správce WordPress webů je MicroLighter zajímavý zejména jako možná náhrada za stávající řešení. Například Chris Coyier, který dlouhodobě provozuje CSS-Tricks, používal léta vlastní WordPress blok postavený na Prism.js. V článku, který MicroLighter představuje, otevřeně zvažuje jeho integraci do svého bloku.
Implementace do WordPressu je technicky možná dvěma způsoby. Buď jako samostatný plugin, který přidá nový blok (například pomocí Gutenbergu), nebo jako rozšíření stávajícího bloku s kódem. Vzhledem k tomu, že MicroLighter používá standardní HTML <pre><code> strukturu, není složité ho zapojit i do vlastních šablon.
Pro běžného uživatele to znamená, že by se mohl zbavit nutnosti instalovat těžké knihovny a složité konfigurace. Stačí nahrát malý CSS soubor a jeden JavaScriptový skript – a zvýrazňování syntaxe funguje.
Závěr
MicroLighter představuje svěží přístup k problému zvýrazňování kódu na webu. Místo aby stavěl na tradičních JavaScriptových knihovnách, využívá moderní CSS vlastnosti a minimalizuje množství klientského skriptování. Výsledkem je rychlejší, jednodušší a snadněji přizpůsobitelné řešení.
Pokud na svém WordPress webu často publikujete ukázky kódu, možná stojí za to MicroLighter vyzkoušet. Díky podpoře light-dark motivů a CSS proměnných si snadno vytvoříte vzhled, který bude odpovídat vašemu brandu, a zároveň ušetříte na přenášených datech. Až se rozhodnete pro upgrade, určitě sledujte, zda se MicroLighter dočká oficiálního WordPress pluginu – podle všeho se na něm už pracuje.
Zdroje
MicroLighter Syntax Highlighter – CSS-Tricks
Potřebujete s WordPress webem pomoct? Kontakt najdete přes formulář na stránce formulář na stránce Kontakt.