Code Blocks

A code block is a <pre><code>, styled by the theme in its mono font. Every code block gets a copy button and a button that wraps long lines. Escape the code inside it: < for < and & for &. Tabs of code blocks are covered under Code Tabs.

<pre><code>const greeting = "&lt;hello&gt;"</code></pre>

```
const greeting = "<hello>"
```

Renders as:

const greeting = "<hello>"

Syntax Highlighting

A language-* class on the <code> colors the block at build time with VS Code's TextMate grammars, the same output as Shiki, in a light and a dark theme that follow the reader's (see Syntax Themes). Over 220 languages are built in, with their usual aliases (ts, sh, yml); an unknown one, or a block holding markup of its own, stays plain.

<pre><code class="language-rust">fn main() {
    println!("hello");
}</code></pre>

```rust
fn main() {
    println!("hello");
}
```

Renders as:

fn main() {
    println!("hello");
}

Titles

data-title on the <pre> gives the block a title bar, usually the file name; it works whether or not the block is highlighted.

<pre data-title="htmlpress.yaml"><code class="language-yaml">title: Htmlpress</code></pre>

```yaml title="htmlpress.yaml"
title: Htmlpress
```

Renders as:

title: Htmlpress

Line Highlighting

data-lines on a highlighted block marks lines, counted from 1: single lines and ranges, comma-separated.

<pre><code class="language-js" data-lines="2">…</code></pre>

```js lines="2"
…
```

const a = 1
const b = 2
const c = 3

Word Highlighting

data-words on a highlighted block marks every occurrence of each comma-separated word. A word the grammar splits into two tokens is not marked.

<pre><code class="language-js" data-words="greeting">…</code></pre>

```js words="greeting"
…
```

const greeting = "hello"
console.log(greeting)

Line Numbers

data-line-numbers on a highlighted block numbers its lines; data-line-numbers="10" starts from 10. The copy button leaves the numbers out.

10const a = 1
11const b = 2

Diff Lines

data-add and data-remove on a highlighted block mark lines as added or removed, with a + or − the copy button leaves out. Inside a terminal, <ins> and <del> color output green and red.

<pre><code class="language-js" data-remove="1" data-add="2">…</code></pre>

```js remove="1" add="2"
…
```

const port = 8080
const port = 8000
serve(port)

Focus Lines

data-focus on a highlighted block dims every other line, until the reader points at the block.

import { build } from "htmlpress"
await build("docs")
console.log("done")

Error and Warning

data-error and data-warning mark lines in red and yellow.

undefinedCall()
const unused = 1

Every line mark takes the same list as data-lines, such as 2,4-5, and an invalid list fails the build.

Collapsible Code

A <details> around a long block hides it behind its <summary>:

<details>
  <summary>The full config</summary>
  <pre><code>…</code></pre>
</details>

:::details[The full config]
```
…
```
:::

data-collapse on the <pre> shows only its first lines, with an Expand bar under the block for the rest; without the script, the block scrolls instead. A block no taller than that gets no bar.

<pre data-collapse="5"><code class="language-yaml">…</code></pre>

```yaml collapse="5"
…
```

steps:
  build: 1
  build: 2
  build: 3
  build: 4
  build: 5
  build: 6
  build: 7
  build: 8
  build: 9
  build: 10
  build: 11
  build: 12

ANSI Output

A block in language-ansi renders terminal output's color escapes, written raw or as : the 16 colors, the 256-color and true-color forms, bold, dim, italic, underline and strikethrough. Other escapes are dropped.

<pre><code class="language-ansi">&#27;[32m✓&#27;[0m built 48 pages
&#27;[1;31merror&#27;[0m: index.html: no title</code></pre>

<pre><code class="language-ansi">&#27;[32m✓&#27;[0m built 48 pages
&#27;[1;31merror&#27;[0m: index.html: no title</code></pre>

Renders as:

✓ built 48 pages
error: index.html: no title

Language Icons

A titled block shows its language's logo in the title bar: TypeScript, JavaScript, React (jsx, tsx), Python, Rust and shell, the set Livemark shows, or a generic file icon for any other language.

fn main() {}

htmlpress build docs

TypeScript Support

NPM Commands

Write one npm or npx command inside <htmlpress-package-tabs> and the build turns it into tabs for npm, pnpm, yarn and bun, synced across the site. Other lines stay as written.

<htmlpress-package-tabs>
  <pre><code>npm install --save-dev gethtmlpress</code></pre>
</htmlpress-package-tabs>

```npm
npm install --save-dev gethtmlpress
```

Renders as:

npm install --save-dev gethtmlpress

pnpm add -D gethtmlpress

yarn add -D gethtmlpress

bun add -D gethtmlpress

Terminal

A <pre> inside <htmlpress-terminal> looks like a terminal window, dark in both themes and named by title. Inside it, <kbd> is a typed command (the prompt is added), <samp> plain output, and <ins>, <del> and <mark> green, red and yellow output.

<htmlpress-terminal title="zsh">
  <pre><kbd>htmlpress build docs</kbd>
<samp>built 7 pages…</samp>
<ins>✓ ready</ins></pre>
</htmlpress-terminal>

<htmlpress-terminal title="zsh">
  <pre><kbd>htmlpress build docs</kbd>
<samp>built 7 pages…</samp>
<ins>✓ ready</ins></pre>
</htmlpress-terminal>

Renders as:

htmlpress build docs
built 7 pages and 0 files into docs/.htmlpress/build
✓ ready
✗ 1 page failed
! 1 warning