Rich Elements

Updated Apr 28, 2026

Tables

Standard GFM tables with sortable columns — click any header to sort:

| Language   | Year | Typing  |
| ---------- | ---- | ------- |
| TypeScript | 2012 | Static  |
| Python     | 1991 | Dynamic |
| Rust       | 2010 | Static  |
| JavaScript | 1995 | Dynamic |

Renders as:

Language	Year	Typing
TypeScript	2012	Static
Python	1991	Dynamic
Rust	2010	Static
JavaScript	1995	Dynamic

Expandable

Create expandable content using the :::details directive:

:::details[Click to expand]
Hidden content here with **markdown** support.
:::

Renders as:

You can nest any markdown inside, including code blocks, lists, and callouts:

Code Tabs

Group consecutive code blocks into tabs using tab="name" meta:

```js tab="JavaScript"
console.log("hello")
```

```python tab="Python"
print("hello")
```

Renders as:

console.log("hello")

Add sync="key" to keep multiple code tab groups in sync across the page. Selecting a tab in one group updates all others with the same key:

```js tab="JavaScript" sync="lang"
console.log("hello")
```

```python tab="Python" sync="lang"
print("hello")
```

Content Tabs

Group arbitrary content into tabs using the :::tab directive. Consecutive tabs are automatically grouped.

Add a sync attribute to synchronize tab selection across multiple tab groups on the same page. When a user selects a tab in one group, all other groups with the same sync key switch to the matching tab. The selection is persisted in localStorage.

:::tab{title="npm" sync="pm"}
npm install livemark
:::

:::tab{title="pnpm" sync="pm"}
pnpm add livemark
:::

Here is an example without sync:

:::tab{title="React"}
React uses JSX for templating and hooks for state management.
:::

:::tab{title="Vue"}
Vue uses single-file components with template, script, and style sections.
:::

Renders as:

React uses JSX for templating and hooks for state management.

function App() {
  return <h1>Hello</h1>
}

Steps

Add [step] to headings to create numbered step-by-step guides:

### Install Dependencies [step]

Run `npm install` to add all required packages.

### Configure Project [step]

Create a config file in the project root.

### Deploy [step]

Push to production.

Renders as:

Install Dependencies

Run npm install to add all required packages.

Configure Project

Create a config file in the project root.

Deploy

Push to production.

Cards

Create content cards using the :::card directive. Consecutive cards are automatically grouped into a grid.

:::card{title="Getting Started" href="/introduction" icon="rocket"}
Learn how to set up your first project.
:::

:::card{title="Configuration" href="/configuration" icon="layers"}
Configure your Livemark project.
:::

Renders as:

Getting Started

Learn how to set up your first project.

Configuration

Configure your Livemark project.

GitHub

View the source code on GitHub.

Markdown

This page documents all markdown features.

Badges

Inline status badges using the :badge directive:

:badge[Beta] :badge[Deprecated]{variant="destructive"} :badge[New]{variant="secondary"}

Renders as:

Beta Deprecated New

Buttons

Call-to-action link buttons using the ::button leaf directive:

::button[Get Started]{href="/introduction"}

With variant and size options:

::button[Get Started]{href="/introduction" variant="default" size="lg"}
::button[Configuration]{href="/configuration" variant="outline"}
::button[View Source]{href="/github" variant="secondary" size="sm"}

You can also use the label attribute:

::button{href="/introduction" label="Get Started"}

Renders as:

Get Started Configuration View Source

Available variants: default, outline, secondary, ghost, destructive, link. Available sizes: default, sm, lg.

Icons

Inline icons from the Lucide library using the :icon directive:

:icon{name="rocket"} Launch :icon{name="check"} Done :icon{name="heart"} Love

Renders as:

Launch Done Love

With Tailwind colors:

:icon{name="check" className="text-green-500"} Pass :icon{name="x" className="text-red-500"} Fail :icon{name="star" className="text-yellow-500"} Star

Renders as:

Pass Fail Star

File Tree

Display file and directory structures using the :::filetree directive. Directories are indicated with a trailing /:

:::filetree

- src/
  - components/
    - Button.tsx
    - Card.tsx
  - helpers/
    - style.ts
  - index.ts
- package.json
- tsconfig.json
  :::

Renders as:

src
- components
  - Button.tsx
  - Card.tsx
- helpers
  - style.ts
- index.ts
package.json
tsconfig.json

Columns

Arrange content side by side using consecutive :::column directives. They are automatically grouped into a grid:

:::column
**Left column** with markdown content.
:::

:::column
**Right column** with more content.
:::

Renders as:

Left column with markdown content, including lists:

Item one
Item two

Right column with more content:

A blockquote works here too.

Search