Comment highlight son code côté serveur ?

28 mars 2024 · 0 minutes, 15 seconds

Pour ce faire, j'ai utilisé la librairie Tempest\Highlight que tu peux trouver ici. Le code du block Kirby est donc :

<?php

use Kirby\Toolkit\I18n;

$highlighter = new \Tempest\Highlight\Highlighter();
/** @var \Kirby\Cms\Block $block */
$code = '<code>' . $highlighter->parse($block->code()->value, $block->language()) . '</code>';
// https://getkirby.com/docs/reference/panel/blocks/code
?>

<div class="relative text-xs group">
    <button class="absolute hidden gap-2 uppercase group-hover:flex top-4 right-4" data-code-id="<?= $block->id() ?>">
        <span data-icon="copy-icon"><?= snippet('svg/icons/remixicon-file-copy-line') ?></span>
        <span class="hidden" data-icon="copied-icon"><?= snippet('svg/icons/remixicon-check-line') ?></span>
        <span><?= I18n::translate('actions.copy') ?></span>
    </button>
    <pre id="code-<?= $block->id() ?>" class="p-8 overflow-scroll leading-relaxed bg-gray-950 bg-gradient-to-t from-indigo-400/5 to-transparent rounded-2xl"><?= $code ?></pre>
</div>