Markdown 语法示例

本文包含本站支持的全部书写语法：标准 Markdown、VitePress 扩展、Obsidian 专属语法，可作为写作速查（本文自身的 frontmatter 也演示了上方的属性面板）。

标题

正文从二级标题开始 —— 一级标题由文件名承担（Obsidian「文件名即标题」约定）。

三级标题

四级标题

五级标题

强调

粗体、斜体、粗斜体、~~删除线~~、高亮（Obsidian 语法）、行内代码、H~2~O 不支持下标（原样输出），转义演示：*星号不斜体*。

列表

无序列表与嵌套：

第一项
第二项
- 嵌套项
- 嵌套项
第三项

有序列表：

第一步
第二步
第三步

任务清单（Obsidian / GFM）：

已完成任务
未完成任务

引用

一级引用：文字是思想的面包屑。
嵌套引用：链接是面包屑，不是承诺。

链接

外部链接：VitePress 官网
站内 Markdown 链接：Minimal Theme
Wikilink：Minimal Theme
Wikilink 别名：最小主题
Wikilink 锚点：Minimal Theme
未发布笔记的灰链（悬停有提示、不可点击）：Buy wisely
自动链接：https://stephango.com

图片

Obsidian 嵌入语法，构建期进 Vite 资产管线（指纹化文件名），点击可放大：

表格

左对齐	居中对齐	右对齐
内容	内容	内容
`代码`	粗体	链接

代码块

带语言标注与行号：

interface Note {
  title: string
  date?: string
  tags: string[]
}

带文件名标题栏（[文件名] 按后缀自动配图标）：

VP.ts

export default { name: 'vault-blog' }

package.json

json

{ "type": "module" }

行高亮（{2}）：

const a = 1
const b = 2 // 本行高亮
const c = 3

diff 与聚焦标记：

console.log('保持') 
console.log('删除') 
console.log('新增') 
console.log('警告') 
console.log('错误')

代码组（Tab 切换，标签按文件名/关键词自动配图标）：

app.jsapp.tspnpm

export default { hello: 'world' }

export default { hello: 'world' } satisfies Record<string, string>

pnpm add vitepress

折叠代码块（长代码默认收起 200px，按钮展开/收起；文案可用 {name="…" open-text="…" close-text="…"} 定制）：

app/assets/css/main.css

css

@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-primary: var(--vp-c-brand-1);
  --ui-secondary: var(--vp-c-brand-2);
  --ui-text-dimmed: var(--vp-c-text-3);
  --ui-text-muted: var(--vp-c-text-2);
  --ui-text-toned: var(--vp-c-text-2);
  --ui-text: var(--vp-c-text-1);
  --ui-text-highlighted: var(--vp-c-text-1);
  --ui-bg: var(--vp-c-bg);
  --ui-bg-muted: var(--vp-c-bg-soft);
  --ui-bg-elevated: var(--vp-c-bg-soft);
  --ui-bg-accented: var(--vp-c-default-soft);
  --ui-border: var(--vp-c-divider);
  --ui-border-muted: var(--vp-c-divider);
  --ui-border-accented: var(--vp-c-gutter);
}

Callouts

GitHub Alerts 的五种写法照常可用，由 Obsidian Callouts 统一渲染（IMPORTANT/CAUTION 按 Obsidian 语义归入 tip/warning 别名）。全部 13 种类型、折叠与嵌套见 Callout 语法测试。

Note

补充说明性的信息。

Tip

有用的小建议。

Important

达成目标所必须知道的关键信息。

Warning

需要立即注意的紧急信息。

Caution

某个操作的潜在负面后果。

自定义容器

信息

自定义标题的 info 容器。

TIP

默认标题的 tip 容器。

WARNING

warning 容器。

DANGER

danger 容器。

点击展开

折叠容器，适合放长内容。

console.log('容器里也能放代码块')

卡片

单张卡片（标题直接跟在 card 后，与其他容器同轨；属性包在花括号里，均可省略；http(s) 外链自动新开页并带右上角角标）：

Dashboard

A dashboard with multi-column layout，正文支持 Markdown 与双链。

卡片组（两列网格；嵌套时外层容器要多一个冒号）：

VitePress

本站的静态站点引擎。

Obsidian

本站的写作端与内容源。

纯文本卡片

不带链接的卡片，也可以只有标题和正文。

Carbon 图标

经 icons 选项注册的扩展图标集（IBM Carbon），冒号式与 i-carbon-idea 连字符式均可。

连标题都可以省略，只放一段说明文字。

单块提示 callout（无标题槽；color 支持 neutral / primary / secondary / info / success / warning / error，带 to 时整块可点、虚线边框）：

了解如何在 Obsidian 中使用 Minimal Theme。

primary 色系，行内加粗与外部链接照常可用。

success 色系 + 外链：右上角出现新开页角标。

warning 色系。与 Obsidian callout（> [!warning]）是两种语义：这里是 Nuxt 风格单块提示，那边是带标题的引述块。

步骤列表

steps 容器给对应级别的标题挂序号圆点与左侧连接线（level 支持 2 / 3 / 4，缺省 3；级别应顺承上文标题层级，跳级会破坏文档大纲的无障碍语义）：

在 `nuxt.config.ts` 中添加 Nuxt UI 模块

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
})

在 CSS 中导入 Tailwind CSS

css

@import "tailwindcss";

启动开发服务器

bash

npm run dev

网页嵌入

web-frame 容器把网页嵌进浏览器窗口视觉里（iframe 懒加载；showWindow=false 可去掉窗口栏；无 src 时正文即窗口内容）：

没有 src 时，容器正文作为窗口内容渲染 —— 适合手绘示意或富文本演示。

哔哩哔哩视频

bilibili 容器嵌入官方外链播放器（bvid / aid 二选一；缺省关自动播放，danmaku=false 可关弹幕，t 起播秒）：

官方文档示例视频 —— 容器正文渲染为视频下方的说明文字。

在线代码演练场

codepen 容器嵌入 CodePen（url 或 user+slug；preview=true 为点击运行模式）：

stackblitz 容器嵌入 StackBlitz（id 或 github；ctl=true 点击才加载，重嵌入建议开）：

仓库卡片

repo-card 容器构建期抓取仓库元数据渲染卡片（sm 行内徽章 / md 钉选卡 / lg 作品陈列卡）。主参数写在容器名之后：owner/repo 简写或仓库 URL（平台自动识别，简写缺省 GitHub、platform="cnb" 切换），单行即闭合：

vuejs/vitepress18k

kepano/obsidian-minimalA distraction-free and highly customizable theme for Obsidian.CSS5.2k261

vuejs/corecore🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.TypeScript54k9.2k

CNB 平台的仓库卡（图标为 CNB 官方品牌色）：

examples/showcaseCNB完整示例4661.1k

GitHub 文件嵌入

remote-file 容器在构建期抓取远程文件直接嵌入（GitHub/CNB 平台从 URL 自动识别；免复制粘贴，随部署自动同步；#L10-L20 片段即行区间）：

vuejs/vitepress/src/shared/shared.tsL1-L16main

shared.ts

import type {
  AdditionalConfig,
  HeadConfig,
  PageData,
  SiteData
} from '../../types/shared'

export type {
  AdditionalConfig,
  AdditionalConfigDict,
  AdditionalConfigLoader,
  Awaitable,
  DefaultTheme,
  HeadConfig,
  Header,
  LocaleConfig,

CNB（cnb.cool）文件同理（构建需要 CNB_TOKEN 环境变量；也可用 {repo= ref= path=} 显式坐标）：

examples/showcase/README.mdL1-L10main

README.md

# CNB完整示例

![badge](/-/badge/git/latest/ci/pipeline-as-code)
![badge](/-/badge/git/latest/ci/status/auto_merge)

## NPC

1. [Claude Code](https://cnb.cool/npc/claude-code)
2. [Open Code](https://cnb.cool/npc/open-code)
3. [HOK - 王者荣耀英雄氛围编程助手](https://cnb.cool/npc/hok)

数学公式

行内公式：质能方程 $E = m c^{2}$ 与欧拉恒等式 $e^{i π} + 1 = 0$ 均在构建期渲染为内联 SVG（客户端零 JS/零字体）。

块级公式：

\int_{- \infty}^{+ \infty} e^{- x^{2}} d x = \sqrt{π}

矩阵与多行推导：

(\begin{matrix} a & b \\ c & d \end{matrix}) (\begin{matrix} x \\ y \end{matrix}) = (\begin{matrix} a x + b y \\ c x + d y \end{matrix})

笔记嵌入

章节嵌入 ![[笔记#标题]]（含标题、至下一同级标题为止）：

Minimal Theme · To-do

To-do

Color schemes
E-ink mode
Mobile support

章节嵌入 + 别名标题 ![[笔记#标题|别名]]：

Minimal 的待办清单

To-do

Color schemes
E-ink mode
Mobile support

块嵌入 ![[笔记#^块id]]（目标块行尾以 ^块id 标记）：

未在《Evergreen notes turn ideas into objects that you can manipulate》中找到片段：^evergreen-objects

块引用链接 [[笔记#^块id]]（跳转到目标块并高亮落点）：长青笔记的核心论点

未发布/不存在目标（灰框提示，不产生死链）：

嵌入的笔记尚未发布或不存在：一篇不存在的笔记

Canvas 白板

![[白板.canvas]] 构建期渲染为静态画布（文本/文件/链接/群组节点 + 贝塞尔连线，客户端零运行时）：

发布流水线

想法

在 Obsidian 里随手记 #灵感

Minimal Theme

构建发布

slug 化
OG 图

https://vitepress.dev

Excalidraw 画稿

![[画稿.excalidraw]] 嵌入 Obsidian Excalidraw 插件 Auto-export 的同名 SVG（暗色自动反色适配）：

行内标签

正文中的 #行内标签与 #嵌套/标签渲染为可点击徽章并计入标签页；纯数字 #123 不是标签，代码里的 #not-a-tag 也不受影响。

Twoslash 类型悬浮

在 ```ts twoslash 围栏里写 TypeScript，鼠标悬停标识符即可查看类型（构建期由编译器求值，显式标注的代码块才付编译成本）：

const site
 = { title
: '数字花园', notes
: 42 }
const double
 = (n
: number) => n
 * 2
double
(site
.notes
)

脚注

正文里的补充说明可以放进脚注^[1]，长解释也没问题^[2]。

Mermaid 图表

流程图：

时序图：

Emoji 与 Badge

Emoji 短码：🎉 💯 🚀 🌱

Badge 组件：info ^2.0.0 beta deprecated

分隔线

上文

下文

Obsidian 专属语法

注释：这句话的后面藏着一条注释，页面上完全不可见（注释语法见下方围栏示例；注意行内代码里写注释定界符会与真注释配对，属已知边界）。

Bases 嵌入（Web 端渲染为提示容器）：

此处为 Obsidian Bases 动态视图 Products.base#Cost per use，仅在 Obsidian 中可用。

代码围栏保护：围栏内的 Obsidian 语法一律原样保留，讲解语法不会被误处理：

%%围栏内的注释原样保留%%
==围栏内的高亮不转换==
[[围栏内的链接不解析]]
![[围栏内的嵌入不处理.base]]

未启用的能力

以下可选能力因当前 vault 无使用场景而未启用（按需原则），需要时随时可加：

Twoslash 代码悬浮类型（@shikijs/vitepress-twoslash）
PDF / Canvas / Excalidraw 嵌入（![[文件.pdf]] 等渲染为提示框）

这是一条简短脚注。 ↩︎
脚注支持多行内容与 Markdown 语法，点击 ↩︎ 可跳回正文引用处。 ↩︎

标题 ​

三级标题 ​

四级标题 ​

五级标题 ​

强调 ​

列表 ​

引用 ​

链接 ​

图片 ​

表格 ​

代码块 ​

Callouts ​

自定义容器 ​

卡片 ​

步骤列表 ​

在 nuxt.config.ts 中添加 Nuxt UI 模块 ​

在 CSS 中导入 Tailwind CSS ​

启动开发服务器 ​

网页嵌入 ​

哔哩哔哩视频 ​

在线代码演练场 ​

仓库卡片 ​

GitHub 文件嵌入 ​

数学公式 ​

笔记嵌入 ​

To-do

To-do

Canvas 白板 ​

Excalidraw 画稿 ​

行内标签 ​

Twoslash 类型悬浮 ​

脚注 ​

Mermaid 图表 ​

Emoji 与 Badge ​

分隔线 ​

Obsidian 专属语法 ​

未启用的能力 ​

标题

三级标题

四级标题

五级标题

强调

列表

引用

链接

图片

表格

代码块

Callouts

自定义容器

卡片

步骤列表

在 `nuxt.config.ts` 中添加 Nuxt UI 模块

在 CSS 中导入 Tailwind CSS

启动开发服务器

网页嵌入

哔哩哔哩视频

在线代码演练场

仓库卡片

GitHub 文件嵌入

数学公式

笔记嵌入

Canvas 白板

Excalidraw 画稿

行内标签

Twoslash 类型悬浮

脚注

Mermaid 图表

Emoji 与 Badge

分隔线

Obsidian 专属语法

未启用的能力