> ## Content Index
> Fetch the complete content index at: https://mirror.redpixelthemes.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Reading code at the measure
- URL: https://mirror.redpixelthemes.com/reading-code-at-the-measure/
- Published: 2019-11-14T12:00:00.000Z
- Updated: 2026-10-23T01:44:13.000Z
- Description: Thirteen code blocks, ten languages and one the highlighter has never heard of — the specimen the theme's syntax palette is measured against.
- Author: Iben Falk
- Tags: Books

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.

```json
{
  "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.

```javascript
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));
}
```

```typescript
type Mode = 'light' | 'dark';

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

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

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

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

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

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

```python
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)
```

```sql
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;
```

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

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

```diff
--- 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

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

[theme.modes]
default = "light"
```

A captioned code card: the strip belongs above the code, inside the figure, never above the caption.

## 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.

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