Code

Inline code, keyboard input, code blocks, and syntax highlighting.

ASW styles all four semantic code elements — <code>, <kbd>, <samp>, and <pre> — with the monospace font stack and surface background tokens. Syntax highlighting is layered on via Prism.js, themed entirely through ASW CSS variables so it adapts to light and dark mode automatically.

Inline code

The <code> element marks a short fragment of computer code inline within prose — a variable name, file path, attribute value, or short snippet. It renders in the monospace font with a subtle surface background.

<p>Set <code>data-layout="docs"</code> on the wrapper div.</p>
<p>The <code>--accent</code> token defaults to <code>var(--green-5)</code>.</p>

Live demo

Set data-layout="docs" on the wrapper div.

The --accent token defaults to var(--green-5).

Keyboard input

The <kbd> element marks text the user should type — a key name, shortcut, or command. ASW inverts the code palette: dark background, light text. This makes keyboard shortcuts visually distinct from inline code.

<p>Press <kbd>⌘ K</kbd> to open the command palette.</p>
<p>Save with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Live demo

Press ⌘ K to open the command palette.

Save with Ctrl + S. Undo with Ctrl + Z.

Sample output

The <samp> element marks output produced by a computer program — a terminal response, log line, or error message. It shares the code font and surface background but carries a different semantic meaning than <code>.

<p>The command returned: <samp>✓ Built dist/agentic.css — 120KB</samp></p>

Live demo

The command returned: ✓ Built dist/agentic.css — 120KB

Error: ENOENT: no such file or directory, open 'config.json'

Code blocks

A code block is a <pre> element containing a <code> element. The outer <pre> preserves whitespace and provides the block container (padding, scroll, background). The inner <code> inherits the font and line-height.

<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

Live demo

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("world"));

Code blocks scroll horizontally when content overflows — no line wrapping. Long lines stay intact.

Syntax highlighting

ASW includes a built-in Prism.js theme in agentic.css. The theme uses ASW CSS variable tokens — --blue-4, --green-4, --red-4, etc. — so it adapts to light and dark mode automatically. You provide the library; ASW provides the colors.

Setup

Add three lines to your <head>:

<!-- 1. Prism base theme (ASW overrides its colors) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">

<!-- 2. Prism core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>

<!-- 3. Language autoloader (loads grammars on demand) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

Then add a class="language-*" attribute to the inner <code> element:

<pre><code class="language-html">...</code></pre>
<pre><code class="language-css">...</code></pre>
<pre><code class="language-javascript">...</code></pre>
<pre><code class="language-bash">...</code></pre>

That's the full setup. Prism tokenizes the block; ASW colors the tokens.

Language demos

Live demos using Prism.js autoloader. Each uses class="language-*" on the inner <code>.

HTML

<article data-session="2026-04-02">
  <header>
    <h1>Session record</h1>
    <p data-text="dim">Vigilio Desto · autonomous</p>
  </header>
  <p>The taxonomy is <strong>complete</strong>. 26 docs pages.</p>
</article>

CSS

:root {
  --accent: var(--green-5);
  --surface: var(--gray-15);
  --text: var(--gray-1);
}

@media (prefers-color-scheme: light) {
  :root {
    --accent: var(--green-8);
    --surface: var(--gray-0);
    --text: var(--gray-15);
  }
}

JavaScript

// Toc spy — highlight nav item for current scroll position
const headings = document.querySelectorAll('article h2, article h3');
const links = document.querySelectorAll('[data-nav="toc"] a');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      links.forEach(l => l.removeAttribute('aria-current'));
      const active = document.querySelector(`[data-nav="toc"] a[href="#${entry.target.id}"]`);
      if (active) active.setAttribute('aria-current', 'true');
    }
  });
}, { rootMargin: '-20% 0px -70% 0px' });

headings.forEach(h => observer.observe(h));

Shell

#!/usr/bin/env bash
# build.sh — compile ASW layers into single dist file

set -euo pipefail

DIST="dist/agentic.css"

./build.sh && echo "✓ Built $DIST"

# Push to Forgejo remote
git add -A
git commit -m "build: recompile agentic.css"
git push origin main

Python

import json
from pathlib import Path

def read_session(vault_path: str, session_id: int) -> dict:
    """Read a session record from the vault."""
    path = Path(vault_path) / "daily" / f"session-{session_id}.json"
    if not path.exists():
        raise FileNotFoundError(f"Session {session_id} not found")
    return json.loads(path.read_text())

session = read_session("~/.napkin", 42)
print(f"Session {session['id']}: {session['title']}")

Agent directive

When generating pages with code examples:

  1. Load Prism.js in <head> (the three-line snippet above).
  2. Use <pre><code class="language-*"> for all code blocks.
  3. Use bare <code> (no class) for inline code in prose.
  4. Use <kbd> for keys and shortcuts. Use <samp> for program output.
  5. Escape HTML entities in code content: &lt; for <, &amp; for &.

Language identifiers: html, css, javascript (or js), bash (or shell), python, json, markdown, yaml. Prism autoloader handles the rest.

Design tokens

Token Default (dark) Purpose
--code-color var(--text-2) Default text color inside code elements
--kbd-bg var(--text) Keyboard input background (inverted)
--kbd-color var(--surface) Keyboard input text (inverted)
--font-mono var(--font-monospace-code) Monospace font stack for all code elements

Prism token colors (dark)

Token class ASW variable Examples
.token.comment --gray-6 // comments, /* block comments */
.token.string, .token.attr-value --green-4 "strings", attr="value"
.token.keyword, .token.atrule --blue-4 function, return, @media
.token.tag --red-4 <div>, <article>
.token.attr-name --yellow-4 class, data-layout
.token.number, .token.boolean --orange-4 42, true, null
.token.function, .token.class-name --cyan-4 greet(), IntersectionObserver
.token.selector, .token.builtin --teal-4 CSS selectors, built-in globals

Light mode uses darker shades of the same hues (-8 / -9 scale steps) for legibility on light backgrounds. The mappings are in src/layers/02-semantic.css.