富元素

更新于 2026年11月12日

表格

标准 GFM 表格，支持按列排序：点击任意表头即可排序：

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

渲染效果：

语言	年份	类型系统
TypeScript	2012	静态
Python	1991	动态
Rust	2010	静态
JavaScript	1995	动态

提示框

提示框用于突出显示重要信息。可用类型：note、tip、info、warning、danger。

GitHub 语法：

> [!TIP]
> GitHub syntax also works.

指令语法：

:::note
This is a note.
:::

自定义标题：

:::warning[Breaking Change]
This API has been removed in v2.
:::

渲染效果：

可展开内容

使用 :::details 指令创建可展开的内容：

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

渲染效果：

其中可以嵌套任意 Markdown，包括代码块、列表和提示框：

代码标签页

使用 tab="name" meta 将连续的代码块分组为标签页：

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

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

渲染效果：

console.log("hello")

添加 sync="key" 可让页面中的多个代码标签页组保持同步。在某一组中选择标签页时，所有使用相同 key 的其他组都会随之更新：

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

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

内容标签页

使用 :::tab 指令将任意内容分组为标签页。连续的标签页会自动归为一组。

添加 sync 属性可在同一页面的多个标签页组之间同步选中状态。当用户在某一组中选择一个标签页时，所有使用相同 sync key 的其他组都会切换到对应的标签页。选中状态会保存在 localStorage 中。

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

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

下面是一个不使用 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.
:::

渲染效果：

React 使用 JSX 编写模板，使用 hooks 管理状态。

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

步骤

在标题后添加 [step]，即可创建带编号的分步指南：

### 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.

渲染效果：

安装依赖

运行 npm install 安装所有必需的包。

配置项目

在项目根目录中创建配置文件。

部署

发布到生产环境。

卡片

使用 :::card 指令创建内容卡片。连续的卡片会自动排列成网格。

:::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.
:::

渲染效果：

快速上手

了解如何搭建你的第一个项目。

配置

配置你的 Livemark 项目。

GitHub

在 GitHub 上查看源代码。

Markdown

本页介绍了所有 Markdown 功能。

徽章

使用 :badge 指令添加行内状态徽章：

:badge[Beta] :badge[Stable]{variant="positive"} :badge[Experimental]{variant="warning"} :badge[Deprecated]{variant="destructive"} :badge[New]{variant="secondary"}

渲染效果：

Beta 稳定实验性已弃用新

可用的变体：default、secondary、positive、warning、destructive、outline、ghost、link。

按钮

使用 ::button 叶子指令创建行动号召链接按钮：

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

带变体和尺寸选项：

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

也可以使用 label 属性：

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

渲染效果：

开始使用配置查看源代码

可用的变体：default、outline、secondary、ghost、positive、warning、destructive、link。可用的尺寸：default、sm、lg。

图标

使用 :icon 指令插入来自 Lucide 图标库的行内图标：

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

渲染效果：

发布完成喜爱

使用 Tailwind 颜色：

:icon{name="check" className="text-positive"} Pass :icon{name="x" className="text-destructive"} Fail :icon{name="star" className="text-warning"} Star

渲染效果：

通过失败星标

文件树

使用 :::filetree 指令展示文件和目录结构。目录以末尾的 / 表示：

:::filetree

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

渲染效果：

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

分栏

使用连续的 :::column 指令将内容并排排列。它们会自动排列成网格：

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

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

渲染效果：

左栏包含 Markdown 内容，包括列表：

第一项
第二项

右栏包含更多内容：

这里同样可以使用引用块。