markupress 0.0.2 → 0.1.0

package/dist/versions.js

@@ -2,7 +2,7 @@ import { cp, mkdir, readFile, realpath, rename, rm, writeFile } from 'node:fs/pr
 import { resolve, join, relative, isAbsolute, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { buildApplication, createApplication } from '@nextwebwg/htmlkit';
-import { prepareSite } from './site.js';
+import { siteOptions } from './site.js';
 import { stylesheet } from './styles.js';
 /** URLs are projected from logical identity; renaming a route never changes the switch target. */
 export function versionLinks(documents, versions, id, selected, base) {
@@ -59,11 +59,12 @@ export async function snapshotVersion(id, options = {}) {
         }
         // Let HTMLKit/Vite identify the authored HTML, module, stylesheet and asset closure.
         // Mirroring project-relative paths keeps imports valid without rewriting source code.
-        const prepared = await prepareSite({ ...options, versions: [{ id: 'current', directory: relation }], defaultVersion: 'current' });
+        const site = siteOptions({ ...options, versions: [{ id: 'current', directory: relation }], defaultVersion: 'current' });
         const validation = join(destination, '.validation');
-        const built = await buildApplication({ ...prepared.application, outDir: validation });
-        const inputs = new Set([...built.browserInputs, ...prepared.sourceFiles]);
-        const application = await createApplication(prepared.application);
+        const built = await buildApplication({ ...site, outDir: validation });
+        const application = await createApplication(site);
+        // Files that Markdown references, which HTMLKit serves, belong to the snapshot too.
+        const inputs = new Set([...built.browserInputs, ...application.files.values()]);
         try {
             for (const pathname of await application.entries()) {
                 for (const component of (await application.render(pathname)).components) {
@@ -72,6 +73,10 @@ export async function snapshotVersion(id, options = {}) {
                         inputs.add(file.startsWith('file:') ? fileURLToPath(file) : file);
                     for (const dependency of stylesheet(component.definition.css, fileURLToPath(file), false).files)
                         inputs.add(dependency);
+                    // HTMLKit delivers a component's imported stylesheets apart from its local CSS, nested imports included.
+                    for (const sheet of component.definition.stylesheets ?? [])
+                        if (sheet.url.startsWith('file:'))
+                            inputs.add(fileURLToPath(sheet.url));
                 }
             }
         }

package/dist/versions.js.map

@@ -1 +1 @@
-{"version":3,"file":"versions.js","sourceRoot":"","sources":["../src/versions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"versions.js","sourceRoot":"","sources":["../src/versions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupress",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Versioned Markdown documentation built on HTMLKit and native declarative components.",
   "license": "MIT",
   "type": "module",
@@ -11,11 +11,15 @@
       "import": "./dist/index.js"
     },
     "./controllers/shell.js": "./dist/controllers/shell.js",
-    "./styles/base.css": "./styles/base.css"
+    "./controllers/code.js": "./dist/controllers/code.js",
+    "./controllers/outline.js": "./dist/controllers/outline.js",
+    "./styles/base.css": "./styles/base.css",
+    "./styles/prose.css": "./styles/prose.css"
   },
   "files": [
     "dist",
-    "styles"
+    "styles",
+    "theme"
   ],
   "engines": {
     "node": ">=22.22.2 <23 || >=24.15 <25"
@@ -36,11 +40,13 @@
   },
   "devDependencies": {
     "@types/node": "22.20.1",
-    "oxlint": "1.81.0",
+    "oxlint": "1.88.0",
     "typescript": "7.0.2",
-    "vitest": "5.0.0",
-    "playwright": "1.63.0",
-    "@axe-core/playwright": "4.13.0"
+    "vitest": "5.0.4",
+    "playwright": "1.64.0",
+    "@axe-core/playwright": "4.13.0",
+    "@nextwebwg/html-next": "1.0.0-alpha.51",
+    "@threadlabs/looma": "0.28.5"
   },
   "publishConfig": { "access": "public" },
   "repository": {
@@ -52,14 +58,17 @@
     "url": "https://github.com/threadlabs-studio/markupress/issues"
   },
   "dependencies": {
-    "@nextwebwg/htmlkit": "1.0.0-alpha.35",
-    "marked": "18.1.0",
+    "@nextwebwg/htmlkit": "1.0.0-alpha.51",
+    "marked": "18.1.1",
     "parse5": "8.0.1",
     "yaml": "2.9.1",
-    "@threadlabs/looma": "0.26.0",
-    "postcss": "8.5.29",
+    "postcss": "8.5.30",
     "postcss-value-parser": "4.2.0",
-    "@nextwebwg/html-next": "1.0.0-alpha.35"
+    "shiki": "4.5.0"
+  },
+  "peerDependencies": {
+    "@nextwebwg/html-next": "1.0.0-alpha.51",
+    "@threadlabs/looma": "^0.28.5"
   },
   "bin": {
     "markupress": "./dist/cli.js"

package/styles/base.css

@@ -1,24 +1,4 @@
-/* Page-wide defaults; component styles remain owned by their native resource. */
+/* Page-wide defaults, delivered through HTMLKit's css option; components keep their own styles. */
 html { background: var(--ui-surface); }
 body { margin: 0; }
 *, *::before, *::after { box-sizing: border-box; }
-/* Documentation typography spans the projected page's own component region. */
-.markupress-prose a { color: var(--ui-accent); text-underline-offset: .2em; }
-.markupress-prose h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.2; }
-.markupress-prose h2, .markupress-prose h3 { margin-top: 2rem; scroll-margin-top: 2rem; }
-.markupress-prose h1 a, .markupress-prose h2 a, .markupress-prose h3 a { color: inherit; text-decoration: none; }
-.markupress-prose pre { overflow: auto; max-width: 100%; padding: 1rem; background: var(--ui-surface-sunken); border-radius: .5rem; }
-.markupress-prose code { font-size: .9em; }
-.markupress-prose img, .markupress-prose svg { max-width: 100%; }
-.markupress-prose table { border-collapse: collapse; display: block; max-width: 100%; overflow: auto; }
-.markupress-prose th, .markupress-prose td { border: 1px solid var(--ui-border, #8885); padding: .4rem .75rem; }
-.markupress-prose :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
-/* HTMLKit provides native navigation without presentation; this theme owns its appearance. */
-.site [data-component~="htmlkit-navigation"] ul { margin: 0; padding: 0; list-style: none; }
-.site [data-component~="htmlkit-navigation"] li { margin: .25rem 0; }
-.site [data-component~="htmlkit-navigation"] a { display: block; color: var(--ui-text); padding: .3rem .5rem; border-radius: .25rem; text-decoration: none; }
-.site [data-component~="htmlkit-navigation"] a:hover { background: var(--ui-surface-sunken); }
-.site [data-component~="htmlkit-navigation"] a[aria-current="page"] { color: var(--ui-accent); font-weight: 600; background: var(--ui-surface-sunken); }
-.site [data-component~="htmlkit-navigation"] [data-depth="2"] { padding-left: .75rem; }
-.site [data-component~="htmlkit-navigation"] [data-depth="3"] { padding-left: 1.5rem; }
-.site [data-component~="htmlkit-navigation"] :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

package/styles/prose.css

@@ -0,0 +1,14 @@
+/* Documentation typography. Each Markdown page component imports this, so its selectors match inside
+   that page only and stop at any component the page embeds. The page root itself is .markupress-prose. */
+a { color: var(--ui-accent); text-underline-offset: .2em; }
+h1 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.2; }
+h2, h3 { margin-top: 2rem; scroll-margin-top: 2rem; }
+h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
+pre { overflow: auto; max-width: 100%; padding: 1rem; background: var(--ui-surface-sunken); border-radius: .5rem; }
+figure.code { margin: 1rem 0; }
+figure.code figcaption { margin-bottom: .25rem; font: .85rem ui-monospace, monospace; color: var(--ui-text-muted, inherit); }
+code { font-size: .9em; }
+img, svg { max-width: 100%; }
+table { border-collapse: collapse; display: block; max-width: 100%; overflow: auto; }
+th, td { border: 1px solid var(--ui-border, #8885); padding: .4rem .75rem; }
+:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }

package/theme/outline.html

@@ -0,0 +1,11 @@
+<template component="markupress-outline" controller="../dist/controllers/outline.js">
+<defs><prop name="items" type="list(object({ id: string, href: string, label: string, depth: number }))" required>The page's headings, in order</prop></defs>
+<nav aria-labelledby="markupress-outline-title"><strong id="markupress-outline-title">On this page</strong><ul><li $each="item of $items" from:data-depth="$item.depth"><a from:href="$item.href">{$item.label}</a></li></ul></nav>
+<style>
+nav { font-size: .875rem; } strong { display: block; margin-bottom: .5rem; }
+ul { margin: 0; padding: 0; list-style: none; border-inline-start: 1px solid var(--ui-border, #8885); }
+li { margin: 0; } li[data-depth="3"] a { padding-inline-start: 1.75rem; }
+a { display: block; padding: .2rem 0 .2rem 1rem; margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--ui-text-muted, inherit); text-decoration: none; }
+a:hover { color: var(--ui-text); } a[aria-current="location"] { border-color: var(--ui-accent); color: var(--ui-accent); }
+:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
+</style></template>

package/theme/shell.html

@@ -0,0 +1,66 @@
+<link rel="component" href="@threadlabs/looma/components/ui-button/ui-button.html">
+<link rel="component" href="@threadlabs/looma/components/ui-badge/ui-badge.html">
+<link rel="component" href="./outline.html">
+<template component="markupress-shell" controller="../dist/controllers/shell.js">
+<title>{$title}</title><link $if="$favicon" rel="icon" from:href="$favicon"><defs>
+<prop name="title" type="string" required>Site title</prop>
+<prop name="home" type="string" required>Home URL</prop>
+<prop name="logo" type="object({ light: string, dark: string })" nullable>Logo images for the light and dark themes</prop>
+<prop name="favicon" type="string" nullable>Site icon URL</prop>
+<prop name="badge" type="string" default="">Badge beside the title</prop>
+<prop name="nav" type="list(object({ label: string, href: string, current: string, items: list(object({ label: string, href: string, current: string, ... })), ... }))" required>Top navigation: links, and dropdowns with items</prop>
+<prop name="social" type="list(object({ label: string, href: string, icon: string }))" required>Social links</prop>
+<prop name="sidebar" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>The section's sidebar: pages and links, and folders and groups with children, as &lt;hk-nav&gt; renders them</prop>
+<prop name="outline" type="list(object({ id: string, href: string, label: string, depth: number }))" required>The page's headings</prop>
+<prop name="footer" type="object({ columns: list(object({ title: string, items: list(object({ label: string, href: string, current: string })) })), copyright: string })" required>Footer link columns and copyright</prop>
+<prop name="versions" type="list(object({ href: string, label: string, current: string, note: string }))" required>Documentation versions</prop>
+<prop name="crumbs" type="list(object({ href: string, label: string, current: string, depth: number, pageName: string, ... }))" required>Trail from the version home to this page</prop>
+<prop name="previous" type="object({ href: string, label: string, current: string, depth: number, pageName: string, ... })" nullable>The page before this one</prop>
+<prop name="next" type="object({ href: string, label: string, current: string, depth: number, pageName: string, ... })" nullable>The page after this one</prop>
+<state name="dark" type="boolean" value="false"></state></defs>
+<div class="site"><a class="skip" href="#documentation-content">Skip to content</a>
+<header>
+<span class="menu"><ui-button variant="ghost" tone="neutral" popovertarget="documentation-navigation">Navigation</ui-button></span>
+<a class="brand" from:href="$home"><template $if="$logo"><img class="logo logo-light" from:src="$logo.light" alt=""><img class="logo logo-dark" from:src="$logo.dark" alt=""></template>{$title}</a>
+<ui-badge $if="$badge" tone="accent">{$badge}</ui-badge>
+<nav class="top" $if="$nav.length" aria-label="Main"><ul><li $each="item of $nav">
+<template $match><a $when="$item.href" from:href="$item.href" from:aria-current="$item.current">{$item.label}</a>
+<details $else name="markupress-nav"><summary from:data-current="$item.current">{$item.label}</summary><ul><li $each="link of $item.items"><a from:href="$link.href" from:aria-current="$link.current">{$link.label}</a></li></ul></details></template>
+</li></ul></nav>
+<div class="actions"><ul class="social" $if="$social.length"><li $each="link of $social"><a from:href="$link.href"><template $match><img $when="$link.icon" from:src="$link.icon" from:alt="$link.label"><template $else>{$link.label}</template></template></a></li></ul>
+<ui-button variant="ghost" tone="neutral" data-action="theme" from:aria-pressed="$dark">Dark theme</ui-button></div></header>
+<div class="columns"><aside id="documentation-navigation" popover>
+<hk-nav from:items="$sidebar" label="Documentation"></hk-nav>
+<nav class="versions" aria-label="Documentation versions"><strong>Versions</strong><ul><li $each="version of $versions"><a from:href="$version.href" from:aria-current="$version.current">{$version.label}</a><small $if="$version.note">{$version.note}</small></li></ul></nav>
+</aside><main id="documentation-content" tabindex="-1"><hk-breadcrumbs from:items="$crumbs"></hk-breadcrumbs><slot name="page"></slot><hk-pager from:previous="$previous" from:next="$next"></hk-pager></main>
+<aside class="outline" $if="$outline.length"><markupress-outline from:items="$outline"></markupress-outline></aside></div>
+<footer $if="$footer.columns.length or $footer.copyright"><div class="footer-columns" $if="$footer.columns.length"><div $each="column of $footer.columns"><strong>{$column.title}</strong><ul><li $each="link of $column.items"><a from:href="$link.href" from:aria-current="$link.current">{$link.label}</a></li></ul></div></div>
+<p $if="$footer.copyright">{$footer.copyright}</p></footer></div>
+<style>
+:host { display: block; background: var(--ui-surface); color: var(--ui-text); font: 1rem/1.7 system-ui, sans-serif; min-height: 100vh; }
+.site { display: flex; flex-direction: column; min-height: 100vh; }
+header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-bottom: 1px solid var(--ui-border, #8885); padding: .75rem max(1rem, calc((100vw - 90rem) / 2)); background: var(--ui-surface); }
+.brand { display: flex; align-items: center; gap: .5rem; color: inherit; font-size: 1.15rem; font-weight: 700; text-decoration: none; } .logo { block-size: 2rem; inline-size: auto; }
+.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-inline-start: auto; }
+header ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
+header a { color: inherit; text-decoration: none; } header a:hover, header a[aria-current="page"], header a[aria-current="true"], summary[data-current="true"] { color: var(--ui-accent); }
+.social img { display: block; block-size: 1.25rem; inline-size: auto; }
+.top details { position: relative; } .top summary { cursor: pointer; }
+.top details ul { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-start: 0; display: grid; gap: .25rem; min-inline-size: 12rem; padding: .5rem 1rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-md, .5rem); background: var(--ui-surface); }
+.columns { display: flex; gap: 3rem; flex: 1; inline-size: 100%; max-inline-size: 90rem; margin: auto; padding: 2rem 1.5rem; }
+#documentation-navigation { flex: 0 0 15rem; } main { min-width: 0; flex: 1; max-width: 65ch; } .outline { flex: 0 0 13rem; }
+/* Wide screens show the sidebar in the page; narrow ones open it as a native popover, which needs no script. */
+@media (min-width: 769px) { #documentation-navigation { display: block; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
+  #documentation-navigation, .outline { position: sticky; top: 5rem; align-self: flex-start; max-block-size: calc(100vh - 6rem); overflow: auto; } .menu { display: none; } }
+@media (max-width: 1199px) { .outline { display: none; } }
+@media (max-width: 768px) { header { position: static; } .columns { display: block; padding: 1rem; }
+  #documentation-navigation { inset: 0 auto 0 0; block-size: 100%; max-block-size: none; inline-size: min(20rem, 85vw); margin: 0; padding: 1rem; border: 0; border-inline-end: 1px solid var(--ui-border, #8885); background: var(--ui-surface); color: var(--ui-text); }
+  #documentation-navigation::backdrop { background: rgb(0 0 0 / .4); } }
+.versions ul { margin: 0; padding: 0; list-style: none; } .versions li { margin: .4rem 0; } .versions { margin-top: 2rem; }
+a { color: var(--ui-accent); text-underline-offset: .2em; } a[aria-current="page"] { font-weight: 700; } small { display: block; color: var(--ui-text-muted, inherit); line-height: 1.4; } :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
+.skip { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); padding: .5rem 1rem; background: var(--ui-surface); z-index: 3; } .skip:focus { transform: none; }
+footer { border-top: 1px solid var(--ui-border, #8885); padding: 2rem max(1.5rem, calc((100vw - 90rem) / 2)); color: var(--ui-text-muted, inherit); font-size: .9rem; }
+.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; } footer ul { margin: .5rem 0 0; padding: 0; list-style: none; } footer li { margin: .25rem 0; } footer strong { color: var(--ui-text); }
+footer p { margin: 1.5rem 0 0; }
+@media (max-width: 640px) { header { padding-inline: 1rem; } }
+</style></template>

package/theme/theme.css

@@ -0,0 +1,52 @@
+/* Global, so it reaches HTMLKit's built-in navigation, breadcrumbs and pager inside the shell; the shell's own <style> is scoped and stops at them. */
+[data-component~="markupress-shell"] :is([data-component="hk-breadcrumbs"], [data-component="hk-pager"]) a {
+  color: var(--ui-accent); text-underline-offset: .2em;
+}
+[data-component~="markupress-shell"] [data-component="hk-breadcrumbs"] a[aria-current="page"] { font-weight: 700; }
+[data-component~="markupress-shell"] [data-component="hk-breadcrumbs"] ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .875rem; }
+[data-component~="markupress-shell"] [data-component="hk-breadcrumbs"] li + li::before { content: "/"; margin-inline-end: .5rem; color: var(--ui-text-muted, inherit); }
+[data-component~="markupress-shell"] [data-component="hk-pager"] { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ui-border, #8885); }
+[data-component~="markupress-shell"] [data-component="hk-pager"] a { display: grid; }
+[data-component~="markupress-shell"] [data-component="hk-pager"] a[rel="next"] { margin-inline-start: auto; text-align: end; }
+[data-component~="markupress-shell"] [data-component="hk-pager"] small { color: var(--ui-text-muted, inherit); }
+/* The sidebar is HTMLKit's <hk-nav>: nested lists, with each folder and group in a native <details>. */
+[data-component~="markupress-shell"] [data-component="hk-nav"] ul { margin: 0; padding: 0; list-style: none; }
+[data-component~="markupress-shell"] [data-component="hk-nav"] li { margin: .4rem 0; }
+[data-component~="markupress-shell"] [data-component="hk-nav"] details ul { padding-inline-start: .75rem; }
+[data-component~="markupress-shell"] [data-component="hk-nav"] summary { cursor: pointer; font-weight: 600; }
+[data-component~="markupress-shell"] [data-component="hk-nav"] a { color: var(--ui-accent); text-underline-offset: .2em; }
+[data-component~="markupress-shell"] [data-component="hk-nav"] a[aria-current="page"] { font-weight: 700; }
+/* Shared blocks. Markdown inside a callout or tabs is projected into a Looma component, where the page's scoped
+   prose styles never reach (HTML Next styling: a page's rules stop at every nested component), so these global
+   rules space the blocks and repeat the prose code styles inside them. Details is native and needs no script. */
+.markupress-prose :is([data-component~="ui-callout"], [data-component~="ui-tabs"], details) { margin-block: 1rem; }
+.markupress-prose details { padding: .5rem 1rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-md, .5rem); }
+.markupress-prose summary { cursor: pointer; font-weight: 600; }
+.markupress-prose [data-component~="ui-callout"] :is(p, ul, ol, pre, figure, table, details) { margin-block: .5rem; }
+.markupress-prose [data-component~="ui-callout"] :is(p, ul, ol, pre, figure, table, details):first-child { margin-block-start: 0; }
+.markupress-prose [data-component~="ui-callout"] :is(p, ul, ol, pre, figure, table, details):last-child { margin-block-end: 0; }
+.markupress-prose :is([data-component~="ui-callout"], [data-component~="ui-tabs"]) pre { overflow: auto; max-width: 100%; padding: 1rem; background: var(--ui-surface-sunken); border-radius: .5rem; }
+.markupress-prose :is([data-component~="ui-callout"], [data-component~="ui-tabs"]) code { font-size: .9em; }
+.markupress-prose :is([data-component~="ui-callout"], [data-component~="ui-tabs"]) figure.code { margin: 1rem 0; }
+.markupress-prose :is([data-component~="ui-callout"], [data-component~="ui-tabs"]) figure.code > pre { margin: 0; }
+.markupress-prose [data-component~="ui-tabs"] figure.code:only-child { margin: 0; }
+.markupress-prose .code-group section { padding-inline: 0; }
+/* Code blocks. Highlighted lines and line numbers are classes written at build time; a highlighted line tints the page
+   surface, which contrasts more with the code than the block's sunken surface does. The copy and wrap buttons stay
+   hidden until the page's code controller connects, and show while the block is hovered or holds focus. */
+.markupress-prose figure.code { position: relative; }
+.markupress-prose .code-actions { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; display: flex; gap: .25rem; opacity: 0; transition: opacity var(--ui-motion-fast, .12s); }
+.markupress-prose figure.code > figcaption ~ .code-actions { inset-block-start: 0; }
+.markupress-prose .code-actions[hidden] { display: none; }
+.markupress-prose figure.code:is(:hover, :focus-within) .code-actions { opacity: 1; }
+@media (hover: none) { .markupress-prose .code-actions { opacity: 1; } }
+.markupress-prose .code-actions button { padding: .3rem .5rem; border: 1px solid var(--ui-border, #8885); border-radius: var(--ui-radius-sm, .25rem); background: var(--ui-surface); color: var(--ui-text); font: .75rem/1 system-ui, sans-serif; cursor: pointer; }
+.markupress-prose .code-actions button[aria-pressed="true"] { border-color: var(--ui-accent); }
+.markupress-prose pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
+.markupress-prose pre .line.highlighted { display: inline-block; box-sizing: content-box; min-inline-size: 100%; margin-inline: -1rem; padding-inline: 1rem; background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)); box-shadow: inset 2px 0 var(--ui-accent); }
+.markupress-prose pre.line-numbers code { counter-reset: line; }
+.markupress-prose pre.line-numbers .line::before { counter-increment: line; content: counter(line); display: inline-block; inline-size: 2ch; margin-inline-end: 1.5ch; text-align: end; color: var(--ui-text-muted, #888); user-select: none; }
+/* The logo for the theme in use: the head script sets data-theme before first paint, and without it the light logo shows. */
+[data-component~="markupress-shell"] .logo-dark { display: none; }
+:root[data-theme="dark"] [data-component~="markupress-shell"] .logo-dark { display: inline; }
+:root[data-theme="dark"] [data-component~="markupress-shell"] .logo-light { display: none; }