Zvýrazňovače a editory kódu

Prism

Pokud bych chtěl dnes na webu jen zvýraznit zdrojový kód, tak sáhnu nejspíš po Prism: maličký, elegantní, snadný na použití:

<link rel="stylesheet" href="prism/prism.css">
<script src="prism/prism.js"></script><!-- nakonfigurované na https://prismjs.com/download -->
<code class="language-html"><a onclick="alert('Hi')">Example</a></code>

Prism neobsahuje editor kódu, ten je k dispozici zvlášť a vypadá, že je udělaný přesně v duchu Prism. Má i autocomplete, ale ne pro SQL.

CodeMirror

CodeMirror je primárně editor kódu, ale dá se použít i pro zvýrazňování syntaxe. To se hodí hlavně v situaci, kdy na stránce nějaký editor máme a ukázky kódu chceme zvýraznit stejně.

<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/runmode/runmode.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<code class="cm-s-default"><a onclick="alert('Hi')">Example</a></code>
<script>
const el = document.querySelector('.cm-s-default');
CodeMirror.runMode(el.textContent, 'text/html', el);
</script>

Ace

Editor Ace se zaměřuje hlavně na výkon. Ale způsob, jak pomocí něj jenom zvýraznit kód, jsem hledal snad hodinu:

<script src="ace/ace.js"></script>
<script src="ace/ext-static_highlight.js"></script>
<code class="example"><a onclick="alert('Hi')">Example</a></code>
<script>
const highlight = require('ace/ext/static_highlight');
const el = document.querySelector('.example');
highlight(el, {mode: 'ace/mode/sql', theme: 'ace/theme/tomorrow'});
</script>

Ace má problém s inline kódem, protože používá <div>.

Monaco Editor

Monaco je editor používaný VS Code, ale dá se použít i samostatně pro editaci i zvýrazňování kódu.

<script src="/vs/loader.js"></script>
<code data-lang="html"><a onclick="alert('Hi')">Example</a></code>
<script>
require.config({ paths: { vs: '/vs' } });
require(['vs/editor/editor.main'], function (monaco) {
	document.querySelectorAll('[data-lang]').forEach(monaco.editor.colorizeElement);
});
</script>

JUSH

Přiznám se, že můj JUSH už se mi moc nechce udržovat, proto hledám náhradu. Killer-feature tohoto zvýrazňovače a editoru jsou odkazy do dokumentace, což používám zaprvé tady na blogu: strpos(). A zadruhé taky v Admineru, kde se jednak odkazuji do dokumentace prováděných SQL příkazů, ale používám to třeba i pro nápovědu u tlačítek pro údržbu tabulek (ANALYZE TABLE a spol.), u kterých nikdy nevím, co které znamená. Odkazy vedou do dokumentace přesně toho výrobce a verze databáze, které používáte, např. PostgreSQL 16. Podobnou feature jsem našel jen u Prism pro odkazy do neudržované Web Platform Docs. Radši bych je pro webové věci měl do MDN. Pro SQL bych si to musel udělat sám.

<script src="jush/jush.js"></script>
<code class="example"><a onclick="alert('Hi')">Example</a></code>
<script>
jush.style('jush/jush.css');
jush.highlight_tag(document.querySelectorAll('.example'));
</script>

JUSH zaostává v napovídání klíčových slov a tabulek, což ostatní editory podporují.

Použití v Admineru

V Admineru JUSH zatím nechám jako výchozí zvýrazňovač syntaxe. Ale existují pluginy pro CodeMirror, pro Ace, pro Prism i pro Monaco Editor.

JUSH včetně odkazů do dokumentace zabírá ve zkompilovaném Admineru přijatelných 42 kB. CodeMirror bez odkazů by měl asi 130 kB, Ace asi 120 kB. Prism Code Editor je dělaný tak moderně, že jeho zabalení do jednoho souboru by bylo problematické, ale nejspíš by měl jen pár kilo. Monaco Editor nejspíš několik MB. Na Ace a Prism mi vadí, že nerozlišují variantu použitého SQL, takže "text" zvýrazňují stejně jako 'text', i když to první v PostgreSQL znamená identifikátor a v MySQL řetězec. CodeMirror a JUSH to umí rozlišit.

Jakub Vrána, Seznámení s oblastí, 1.4.2025, diskuse: 0 (nové: 0)

Vložit komentář

Navigace

PHP triky

Kupte si mou knihu

Reklama

Hledáte-li programátora nebo naopak sami programujete a nemáte do čeho píchnout, využijte služeb portálu nezávislých profesionálů Na volné noze.

Web běží na serveru

Váš hosting

Články podle skupin

Výběr článků

Nejnovější články

Normy a manuály

Další projekty

. Můžeme si tykat. Skripty předpokládají nastavení: magic_quotes_gpc=Off, magic_quotes_runtime=Off, error_reporting=E_ALL & ~E_NOTICE a očekávají předchozí zavolání mysql_set_charset. Skripty by měly být funkční v PHP >= 4.3 a PHP >= 5.0.