Content

Pages are Markdown files under pages. The folder structure is the site structure: pages/guides/setup.md becomes /guides/setup/, index.md files become their folder.

Front matter

Key	Role
`layout`	Layout name from `markdownPlugin`’s `layouts`. Default `default`.
`publish`	`false` drops the page from the build, sidebar, and llms files.
`minHeading`, `maxHeading`	Heading levels the table of contents shows, default 2 and 3.
`sidebar.*`	Sidebar settings, see markdownPlugin.

Everything else is passed to the layout as $data.

Publish

With publish: true in the plugin, the default, every page is built unless it says otherwise:

---
publish: false
---

With publish: false in the plugin, only pages marked publish: true are built. Useful for a notes folder where most files are drafts.

Callouts

rehype-callouts syntax, the type is case-insensitive. A - after the type makes the callout collapsible, a + collapsible and open.

> [!note]
> A note.

> [!tip]- Collapsible
> Hidden until opened.

Note

A note.

Collapsible

Hidden until opened.

Warning

Warning.

Danger

Danger.

Important

Important.

Success

Success.

Quote

Quote.

Types sharing a color: note, info, todo; tip, hint, summary, tldr, abstract; important, example; warning, caution, attention, question, help, faq; danger, error, bug, failure, fail, missing; success, check, done; quote.

Collapsible callouts render as sv-accordion through the callouts part in the layout.

Math

remark-math and rehype-katex with output: "mathml". Inline $E = mc^2$ gives $E = mc^2$ , a block:

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

\int_0^1 x^2 \, dx = \frac{1}{3}

The KaTeX fonts come from katex.css and assetsPlugin.

Diagrams

A ```mermaid fence, rendered in the browser by the mermaid part. Colors follow the theme and update with the color scheme switch.

```mermaid
graph LR
  A[Markdown] --> B[staticbolt]
  B --> C[HTML]
```

graph LR
  A[Markdown] --> B[staticbolt]
  B --> C[HTML]

Pages without a diagram don’t load mermaid.

Code

Fences get Expressive Code, see Expressive Code.

```ts title="answer.ts" showLineNumbers
const answer = 42;
```

1
const answer = 42;

Tables

Wide tables scroll on their own, see Rehype plugins.