Markdown

Markupress uses Expressmark in standard syntax. A site's markdownSyntax option, or a page's markdownSyntax front matter, selects compatible, which reads CommonMark and GFM. Expressmark parses the document and renders its HTML. Markupress adds the documentation presentation: highlighted code, callouts, tab controls, heading links and the page outline.

Use the preferred forms below. Ordinary HTML and imported component usage can sit alongside Markdown; component definitions stay in their own .html files.

Callouts

Put a title in brackets after the type:

::: warning [Before you upgrade]
Back up your data first.
:::

Before you upgrade

Back up your data first.

Use note, tip, warning or danger for common messages. Markupress also presents the semantic types info, important, success and neutral with Looma callouts. Omit the brackets when there is no title. A container with no type, such as ::: [Heads up], is a callout in the default tone.

Details

::: details [Show the output] {open}
This content starts expanded.
:::

Show the output

This content starts expanded.

Remove {open} to start closed. Details use the browser's native disclosure behavior.

Tabs and code examples

Adjacent tab containers form a tab group. Each panel has a bracketed label:

::: tab [npm] {group=package-manager}
```sh
npm install markupress
```
:::

::: tab [pnpm] {group=package-manager}
```sh
pnpm add markupress @nextwebwg/html-next @threadlabs/looma
```
:::

npm install markupress

pnpm add markupress @nextwebwg/html-next @threadlabs/looma

The group attribute shares the selected label across matching groups and remembers it for the next visit. Without JavaScript all panels remain readable. A tab may hold any Markdown, including code.

Inline elements

Status :chip[Ready]{tone=green}, owned by @[Ada Lovelace]#u1.

- [x] Read the changelog
- [ ] Run the migration

Text with a footnote[^note].

[^note]: The note's content.

Status Ready, owned by Ada Lovelace.

☑ Read the changelog
☐ Run the migration

Text with a footnote¹.

Chips carry a semantic tone. Mentions keep their display label separate from the referenced entity. Footnotes render with numbered references and links back to each occurrence.

Tables

Use a named list table so each value stays beside its field name in the source:

::: table

- Field: `title`
  Type: string
  Effect: Sets the page title.

- Field: `order`
  Type: number
  Effect: Orders the page in navigation.

:::

Field	Type	Effect
`title`	string	Sets the page title.
`order`	number	Orders the page in navigation.

Figures and layout

::: figure [The *Markupress* mark]
![Markupress mark](/mark.svg){width=160}
:::

Use a standard layout container for alignment or floating content, such as ::: layout {align=center} or ::: layout {float=start}.

::: toc [On this page] {depth=3}
:::

Markupress fills the placeholder with links to the document's heading anchors. See Code blocks for highlighting, captions and line numbers, and Components for importing external HTML components.

The note's content. ↩