Advanced Syntax

Updated Apr 28, 2026

HTML Blocks

Standard HTML tags are supported directly in markdown files. Common examples include <kbd> for keyboard shortcuts, <sup>/<sub> for superscripts and subscripts, and <details>/<summary> for accordions.

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy. Water is H<sub>2</sub>O.

Renders as:

Press Ctrl + C to copy. Water is H₂O.

Since Livemark uses MDX, HTML attributes follow JSX conventions: use className instead of class, and style takes an object instead of a string.

Tailwind CSS 4 utility classes are available in HTML blocks via className:

<div className="rounded-lg border border-border bg-card p-4 text-sm text-muted-foreground">
  A styled container using Tailwind utilities.
</div>

Renders as:

MDX Rendering

Livemark uses MDX under the hood, so JSX expressions and components can be used directly in markdown files when needed:

export const version = "2.0.0"

The current version is **{version}**.

You can also import modules:

import { authors } from "./data.ts"

{authors.map(a => <span key={a.name}>{a.name}</span>)}

This is an escape hatch for advanced use cases. Prefer standard markdown and directive syntax when possible.

LaTeX Expressions

LaTeX math expressions are supported via KaTeX.

Inline math uses single dollar signs: $E = mc^2$ renders as $E = mc^2$. Use it for variables like $x$, $\alpha$, or expressions like $\sum_{i=1}^{n} i$.

Display math uses double dollar signs for centered, block-level equations:

Matrices and aligned equations:

Mermaid Diagrams

Render diagrams using Mermaid syntax. Diagrams automatically adapt to light and dark themes.

```mermaid
graph LR
    A[Markdown] --> B[Remark]
    B --> C[Rehype]
    C --> D[HTML]
```

Renders as:

```mermaid
pie title Languages
    "TypeScript" : 45
    "Python" : 30
    "Rust" : 15
    "Other" : 10
```

Renders as:

Included Documents

Reference content from other files using the ::include directive. Markdown files are inlined with frontmatter stripped. Code files are automatically wrapped in a fenced code block with the language detected from the file extension.

Including a markdown file:

::include{file="./includes/disclaimer.md"}

Renders as:

Including a code file:

::include{file="./includes/example.ts"}

Renders as:

import { defineConfig } from "livemark"

export default defineConfig({
  include: "docs/*.md",
})

Code file meta (title, line highlighting, etc.) can be passed via the meta attribute:

::include{file="./includes/example.ts" meta="{2} lineNumbers"}

Renders as:

import { defineConfig } from "livemark"

export default defineConfig({
  include: "docs/*.md",
})

Paths are resolved relative to the current file. Nested includes are supported up to 5 levels deep.