Code

Fenced blocks become <pre><code class="language-…">. This site lists @kirigami/plugin-highlight under plugins:, so its prepros:html hook runs highlight.js over every block at build time — the .hljs-* spans you see below are baked into the HTML. Drop the plugin and you still get the bare language class to style yourself. Either way there is no client-side highlighter shipped.

                        // _lib/functions.php — a custom tag in ~5 lines
                        register_tag('swatches', function ($tag, $attrs, $body) {
                            $chips = '';
                            foreach (img_palette($attrs['asset'], 6) as $hex) {
                                $chips .= "<li style=\"--chip:$hex\"><span></span></li>";
                            }
                            return "<ul class=\"swatches\">$chips</ul>";
                        });
                    

                        .card {
                            background: var(--surface-2);
                            box-shadow: var(--shadow);
                            &:hover { transform: translateY(-4px); }
                        }
                    

                        $ npx kiri watch
                        [css-core] batch 1 styles/kirigami.core.scss
                        ✔ Build finished
                    

The hover Copy button on every block comes from the plugin's copyButton option — a ~1 KB script folded into the js-core bundle via the esbuild:after hook, its styles via sass:after.

Prefer an explicit tag to a fence? plugin-highlight also registers a <highlight lang="…"> tag (PHP side, prepros:php hook) that normalises to the same markup:

                        #[Route('/feed.xml')]
                        public function feed(Repository $posts): Response
                        {
                            return $this->render('feed.xml.twig', ['posts' => $posts->latest(20)]);
                        }