Zvýrazňovač kódu

Na začátku bez čísel řádků

Zapnout podporu pro zvýraznění kódu je práce na pár minut. Stačí zapnout modul codesample, vložit do toolbaru tlačítko a nastavit, jaké jazyky chceš vkládat:

tinymce.init({
    selector: '.tinymcetext',
    plugins: 'codesample',
    toolbar: 'codesample',
    codesample_languages: [
        { text: 'PHP', value: 'php'},
        { text: 'Latte', value: 'latte'},
        { text: 'HTML/XML', value: 'markup'},
        { text: 'JavaScript', value: 'javascript'},
        { text: 'CSS', value: 'css'},
        { text: 'Bash', value: 'bash'},
        { text: 'Ini', value: 'ini'},
        { text: 'JSON', value: 'json'},
        { text: 'PowerShell', value: 'powershell'},
        { text: 'SQL', value: 'sql'}
    ]
});

Samozřejmě, že asi budeš mít konfiguraci rozsáhlejší - více pluginů i tlačítek na toolbaru a další různá nastavení. Nicméně pokud v konfiguraci nebude chybět to, co vidíš výše, stačí kliknout na tlačítko {;} a zobrazí se okno pro vložení kódu. Stačí si vybrat jazyk dané ukázky, vložit samotný kód a potvrdit. Do TinyMCE editoru se kód vloží a barevně zvýrazní. Jen upozorním, že toto barevné zvýraznění si řeší TinyMCE samo vlastními prostředky. Kdybys stránku uložil a zobrazil ji na svém webu, barevně kód zatím neuvidíš. Ale o tom později.

Třeba kousek PHP kódu:

public function actionAdd($id = 1): void
{
    $this->id = $id;
}

Když by sis zobrazil zdrojový kód TinyMCE editoru, najdeš tam toto:

<pre class="language-php">
    <code>
        public function actionAdd($id = 1): void
        {
            $this-&gt;id = $id;
        }
    </code>
</pre>

Důležitá je ta třída "language-php". Abys zajistil, že i na frontendu bude kód krásně vybarvený, použij knihovnu prism.js. Na jejich stránkách najdeš možnost nakonfigurovat si jaké moduly a jaké jazyky chceš používat. Já třeba kvůli přehlednosti kódu používám modul přo číslování řádků, plus plugin pro zvýraznění souvisejících závorek v kódu.

Na prismjs.com se píše v návodech, jak zajistit, aby se kód čísloval a závorky označovaly. Stačí do <pre> přidat další třídy. Konkrétně line-numbers pro číslování a match-braces pro označení páru závorek. Jenže TinyMCE nic takového samo neudělá. Nebo ano?

Dáme čísla řádků pěkně do pořádku

Uvažoval jsem tak, že bude potřeba zapojit javascript. Je potřeba zachytit událost, kdy se něco změní v textovém poli editoru. Vezme se celý obsah, najde se element <pre>, a pokud obsahuje třídu, která začíná znaky "language-", doplnit obě další třídy. Poslouží nám k tomu oddíl v inicializaci:

tinymce.init({
    selector: '.tinymcetext',
    setup: function (editor) {
        editor.on('NodeChange', function(e) {
            if (e.element.tagName === 'PRE' && e.element.className.includes('language-')) {
                e.element.classList.add('line-numbers', 'match-braces');
            }
        });
    },
});

Opět - nejspíš v sekci "init" budeš mít víc věcí, ale to, co je zvýrazněno, tak přidej. Tím zajistíš, že každý tebou vložení kód bude mít číslované řádky a bude označovat spárované závorky.

Mimochodem - to, že jsou tu řádky zvýrazněné, zajistí doplnění <pre> o data atribut: data-line="3-9". Ale to už musíš ručně zeditovat zdrojový kód, jelikož to už asi zautomatizovat nejde.