Reading code at the measure

Every block below is the same Koenig code card. The only thing that differs is the language each one declares, and that is the one thing this theme reads: a block that names its language gets the strip and the palette, and a block that names nothing is left exactly as the design draws it.

Inline code is untouched — --syntax-keyword is set in the stylesheet, not by the highlighter.

The design's own specimen

JSON, because JSON is what the design source draws in the post this theme was measured against.

{
  "corrected_at": "2026-03-14",
  "field": "subhead",
  "was": "four newsrooms",
  "now": "three newsrooms"
}

Ten languages, on demand

Each grammar is a separate module and only the ones this page uses are ever fetched.

const WORDS_PER_MINUTE = 275;

export function readingTime(html) {
	const text = html.replace(/<[^>]+>/g, ' ');
	const words = text.match(/[a-z0-9]+/gi) ?? [];
	return Math.max(1, Math.round(words.length / WORDS_PER_MINUTE));
}

type Mode = 'light' | 'dark';

/** The visitor's choice outranks the publication's default. */
export const nextMode = (mode: Mode): Mode => (mode === 'dark' ? 'light' : 'dark');

.mirror-content pre {
	background-color: var(--color-code-bg);
	color: var(--color-code-fg);
	overflow-x: auto;
}

::highlight(keyword) {
	color: var(--syntax-keyword);
}

{{#post}}
	<h1>{{title}}</h1>
	<div class="mirror-content">{{content}}</div>
{{/post}}

#!/usr/bin/env bash
set -euo pipefail

for mode in light dark; do
	curl -sf "http://localhost:2368/?mode=$mode" > "shot-$mode.html"
done

def reading_time(words: int, images: int = 1) -> int:
    seconds = words * 60 / 275
    for i in range(images):
        seconds += max(12 - i, 3)
    return round(seconds / 60)

select t.slug, count(pt.post_id) as posts
from tags as t
join posts_tags as pt on pt.tag_id = t.id
where t.visibility = 'public'
group by t.slug
order by posts desc
limit 14;

collections:
  /archive/:
    permalink: /{slug}/
    template: index
    limit: 14
taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

<figure class="kg-card kg-code-card">
	<pre><code class="language-json">{ "ok": true }</code></pre>
	<figcaption>A captioned code card.</figcaption>
</figure>

--- a/ghost/assets/css/screen.css
+++ b/ghost/assets/css/screen.css
@@ -327,7 +327,7 @@
 .mirror-content pre {
-	color: var(--color-code-fg);
+	color: var(--color-code-fg);
 }

A captioned card

[theme]
name = "mirror"
layouts = ["magazine cover", "editorial masthead"]

[theme.modes]
default = "light"

The two blocks that stay plain

A block that declares no language is the design's own drawing, and the theme leaves it alone — no strip, no palette, one colour.

const words = 275 * (minutes - 0.2);

A block that declares a language nobody ships a grammar for keeps its strip and loses only the colour. The highlighter fails quietly by design; this is what that looks like.

IDENTIFICATION DIVISION.
PROGRAM-ID. READING-TIME.
PROCEDURE DIVISION.
    DISPLAY "275 words per minute".
    STOP RUN.