Markdown Playground

编辑左侧源码，右侧会实时更新渲染结果。桌面端可以拖动分隔线并同步滚动，窄屏使用右上角图标切换源码和预览。接入方式见使用 Markdown 包。

标题与正文

H3 / 三级标题

H4 / 四级标题

H5 / 五级标题

H6 / 六级标题

h2-h6 会生成章节锚点。正文可以同时包含中文、English words、数字 2026 和 inline code。

行内语义

普通文本可以包含 加粗 strong、斜体 emphasis、删除线、高亮 mark、inline code、⌘ + K、H₂O、E=mc²、API、引用来源、行内短引用、次要补充、变量 config、输出 build complete、emoji ✨ 和 2026 年 7 月 14 日。

状态可以使用 默认、Beta、已发布、待确认 和 有风险。

普通链接 保留下划线和清晰的 hover 状态；自动链接也遵循相同规则：https://docfuse.dev 。

引用式链接 与普通链接使用同一视觉规则。反斜杠转义后的 *星号* 保持为文字，HTML 实体 © 解码为 ©。这一行末尾改用显式 <br />，
因此这里是一个明确的 br 硬换行。

列表与任务

• 无序列表用于并列信息。
  • 嵌套列表保持明确缩进。

1. 有序列表表达顺序。
2. 数字 marker 与正文对齐。
3. 多行内容仍保持可读缩进。

• 语义 HTML 在构建期生成
• 搜索、复制、排序和放大按需增强
• 宿主项目接入自己的品牌 token

默认行为

编译器生成语义 HTML，并补齐键盘操作、ARIA 和焦点状态。

可调整内容

颜色、字体、圆角、代码主题、功能开关和本地化文案。

引用与提示

好的文档界面不应抢走内容的注意力。结构来自排版、空间和克制的状态反馈，而不是密集边框。

代码与终端

行内代码适合短标识符，例如 DocfuseConfig。需要直接复制的短命令使用 pnpm add @docfuse/markdown。代码块使用 Shiki 高亮、语言标签、行号、复制按钮；长行自动换行，不出现横向滚动条。

export default {  title: 'Docfuse',  i18n: { defaultLocale: 'zh', locales: ['zh'] },  search: { enabled: true }}

指定行高亮

代码围栏可以同时声明文件名和一个或多个高亮行，适合把读者注意力落在本次讲解涉及的代码上：

export default {  title: 'Docfuse',  i18n: { defaultLocale: 'zh', locales: ['zh'] },  search: { enabled: true },  theme: { darkMode: true }}

行状态标注

删除和新增行会在行号区显示 − 和 +：

const oldName = 'docs'const newName = 'docfuse'

highlight、focus、word、error 和 warning 继续使用同一代码块结构，只改变需要强调的行：

const searchable = trueconst result = buildSite(config)const output = resolveOutput(config)throw new Error('Invalid config')console.warn('Missing description')

多语言高亮

内置语言会复用相同的文件栏、行号、复制反馈、亮暗主题和自动换行：

pnpm docs:buildpnpm docs:preview

{  "title": "Docfuse",  "search": { "enabled": true },  "theme": { "baseColor": "paper" }}

项目文件与源码

代码块标题决定文件名和文件图标；语言决定高亮器。下面几组覆盖常见项目文件、组件源码和交付配置。

{ "scripts": { "docs:dev": "docfuse dev" } }

import { defineConfig } from 'docfuse'export default defineConfig({ title: 'Docfuse' })

# DocfuseBuild and publish the documentation site.

steps:  - run: pnpm docs:build

export function SearchPanel() {  return <button type="button">Search</button>}

import { Status } from './Status'<Status value="stable" />

<template><span>{{ status }}</span></template>

print('build complete')

fn main() { println!("build complete"); }

DOCFUSE_ORIGIN=https://docs.example.com

$accent: #0071e3;.docs { color: $accent; }

create table documents (id integer primary key, slug text not null);

FROM nginx:alpineCOPY .docfuse/dist /usr/share/nginx/html

location / { try_files $uri $uri/ =404; }

- const locale = 'en'+ const locale = 'zh'

长代码行在块内自动换行，不会把正文画布撑宽：

const summary = 'Docfuse keeps Markdown, MDX, React components, search, localization, versioning, static output, and machine-readable artifacts in one build workflow.'

Code Group / 代码组选项卡

每个选项都由带 title 的代码块生成，因此保留 Shiki 高亮、复制反馈和语言图标：

pnpm add @docfuse/markdown

npm install @docfuse/markdown

yarn add @docfuse/markdown

Terminal / 终端输出

Terminal 使用 terminal fenced code，title 可配置顶部标签：

$ pnpm docs:build
[docfuse] Built .docfuse/dist

失败输出也必须保持完整上下文，便于读者直接定位命令、文件和退出状态：

$ pnpm exec docfuse check
✗ docs/guide/setup.md: broken internal link /guide/install/
Command failed with exit code 1

表格与数据

表格使用宽内容画布。工具栏提供 CSV 复制和放大预览，表头支持升序/降序切换；窄屏下表体横向滚动，不压缩单元格。

扩展内容组件

Tabs / 内容选项卡

Steps / 步骤

1. 安装渲染器

   添加 @docfuse/markdown 并保留默认 token。

2. 准备内容

   把 Markdown 放入文档目录并补全 frontmatter。

3. 检查构建

   执行 pnpm typecheck、站点构建和内容检查；只在全部通过后发布产物。

Card Grid / 链接卡片

Link Card / 外链卡片

独占一行的 HTTP(S) 链接在启用 linkCard() 后转换为链接卡片：

File Tree / 文件树

API 与侧注

文件、图片与可信媒体

PDF、Word、PowerPoint 与 Excel

独占一行且带受支持扩展名的链接会显示文件类型、文件名和下载入口。以下地址只用于展示文件块外观，接入站点时请换成真实文件地址：

图片与图注

图片画廊

视频、音频与嵌入页面

这些指令生成原生媒体元素，并统一处理可访问标签、默认加载策略和 iframe 权限边界。

媒体文件放在 docs/public/，页面使用站点绝对路径引用。

图表与数学

Mermaid、PlantUML、Kroki 和数学公式由官方插件启用。每个图表都支持复制源码、源码/预览切换、缩放和放大。

flowchart LR
  A["Markdown 源码"] --> B["静态 HTML"]
  B --> C["按需交互"]

缩小图表重置图表缩放放大图表

缩小图表重置图表缩放放大图表

缩小图表重置图表缩放放大图表

行内数学公式 $E = mc^2$ 跟随正文节奏。展示公式拥有独立的横向溢出边界：

折叠与脚注

脚注适合补充出处或简短说明，不会打断正文。¹

接入宿主或覆盖组件时，请查看使用 Markdown 包和 React API。