Markdown 格式与功能全览

约 1681 字大约 6 分钟

教程 Markdown

2026-08-30

本文是一篇示例文章，把本站（VuePress + Plume 主题）当前支持的主要 Markdown 格式与功能逐一展示给你看，每一项都附上"如何调用"的源码，方便你照着写。

阅读建议

想快速了解并复现效果，直接看每一节的效果与 [调用] 代码块即可。

一、基础排版

标题与文本样式

效果：

二级标题

三级标题

四级标题

加粗、斜体、加粗斜体、~~删除线~~、行内代码，下面一行是水平分割线。

[调用] 源码：

## 二级标题
### 三级标题

**加粗**、*斜体*、***加粗斜体***、~~删除线~~、`行内代码`

---

标签提示

Markdown 的 6 级标题对应 # ~ ######，只有一级标题（#）会唯一出现在文章开头。

列表

效果：

无序列表项 A
无序列表项 B
- 嵌套项 B1
- 嵌套项 B2

有序列表项一
有序列表项二
1. 嵌套有序项

已完成的待办
未完成的待办

[调用] 源码：

- 无序列表项 A
- 无序列表项 B
  - 嵌套项 B1
  - 嵌套项 B2

1. 有序列表项一
2. 有序列表项二
   1. 嵌套有序项

- [x] 已完成的待办
- [ ] 未完成的待办

引用与链接

效果：

这是引用块，适合引用他人观点或标注来源。第二行引用文本。 调用： > 文本

本站首页链接：主页。请在 Markdown 中使用相对路径链接。

[调用] 源码：

> 这是引用块。
> 第二行引用文本。

[主页](/) 是相对路径链接。

表格

效果：

功能	是否默认开启	说明
提示框	✅	Plume 内置
数学公式	✅ 已在配置开启	`markdownMath`
折叠面板	❌ 需配置开启	`::: collapse`

[调用] 源码：

| 功能 | 是否默认开启 |
| :-- | :--: |
| 提示框 | ✅ |
| 数学公式 | ✅ |

二、提示框（默认可用）

Plume 内置多种彩色提示容器，直接使用，无需额外配置。

效果：

备注

用于补充说明。

小提示

用于给出建议或技巧。

注意

用于提醒可能的问题或风险。

重要

用于强调核心要点。

危险

用于警告会出错的危险操作。

点开查看详情

被折叠起来的内容，点击标题展开。

[调用] 源码：

::: note 备注
用于补充说明。
:::

::: tip 小提示
用于给出建议或技巧。
:::

::: warning 注意
用于提醒可能的问题或风险。
:::

::: important 重要
用于强调核心要点。
:::

::: danger 危险
用于警告会出错的危险操作。
:::

::: details 点开查看详情
被折叠起来的内容，点击标题展开。
:::

三、代码块与增强（已开启 Shiki 高亮）

语法高亮 .${lang title="标题"}，已支持 ts / js / python / bash / html / css 等。

基本代码块

效果：

function greet(name) {
  return `Hello, ${name}!`
}

[调用] 源码：

```js
function greet(name) {
  return `Hello, ${name}!`
}
```

代码块标题 + 行号

效果：

示例 toggle.ts
export function toggle(open: boolean): boolean {
  return !open
}

[调用] 源码（title="..." 添加标题；:line-numbers / :no-line-numbers 控制行号）：

```ts title="示例 toggle.ts" :no-line-numbers
export function toggle(open: boolean): boolean {
  return !open
}
```

行高亮

效果：

# 普通行
# 高亮行 {4}
def main():
    label = "highlight"
    return label

[调用] 源码（在语言名后跟 {行号区间}）：

```python {4}
def main():
    label = "highlight"
    return label["before", "after"]  # 第 4 行会被高亮
```

行内标记：高亮 / 聚焦 / 差异

效果：

const a = 'keep me'
const b = 'focus me'
const old = 'removed'
const fresh = 'added'

[调用] 源码：

```js
const a = 'keep me'   // [!code highlight]
const b = 'focus me'  // [!code focus]
const old = 'removed' // [!code --]
const fresh = 'added' // [!code ++]
```

关于 bash 语法

bash 代码块里请用 # [!code ++] 这种 # 注释形式。

四、数学公式（已开启 KaTeX）

效果（行内）： 质能方程 $E = m c^{2}$ 。

效果（块级）：

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

[调用] 源码：

行内公式：$E = mc^2$

块级公式：
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

五、图片（已开启大图预览）

点击图片可放大预览（Photo Swipe）。图片语法：![替代文本](图片地址 "可选的标题")。

效果：

[调用] 源码：

![示例图标](https://api.iconify.design/lucide:book-open.svg "一个外部图片示例")

建议图片放在本地

把图片放到 docs/.vuepress/public/ 下，然后用 /图片名.png 引用，避免依赖外部服务。

六、脚注

效果：

这是一段带脚注的文字^[1]，后面还引用了另一条脚注^[2]。

[调用] 源码：

这是一段带脚注的文字[^1]。

[^1]: 这是第一条脚注的内容。

七、进阶功能（需在配置中开启）

下面这些功能默认未开启，但你可以在 docs/.vuepress/config.ts 的 plumeTheme({ plugins: { markdownPower: { ... } } }) 里打开对应项后使用。这里给出语法与开关方法。

折叠面板（collapse）

在 markdownPower 中设置 collapse: true 后使用：

::: collapse
- 标题一

  内容一
- 标题二

  内容二
:::

文件树（file-tree）

在 markdownPower 中设置 fileTree: true 后使用：

::: file-tree
- docs
  - README.md
  - posts
    - hello.md
- package.json
:::

内联图标（icons）

在 markdownPower 中设置 icons: true 后使用（iconify 图标库）：

:[simple-icons:github]:  :[simple-icons:vue]:  :[lucide:book-open]:

嵌入 PDF / 视频 / 代码演示

在 markdownPower 中开启对应项后使用：

@[pdf](https://example.com/file.pdf)            <!-- pdf: true -->
@[bilibili](BV1GJ411x7h7)                        <!-- bilibili: true -->
@[youtube](dQw4w9WgXcQ)                          <!-- youtube: true -->
@[codepen](you/some-pen)                         <!-- codepen: true -->
@[replit](user/repl-name)                        <!-- replit: true -->
@[codesandbox](someid)                           <!-- codeSandbox: true -->

图表（chart / mermaid 等）

需要额外开启 markdownChart 插件后才可使用，当前配置未启用，暂不多写。

逐步开启

开启这些功能前请先阅读官方文档，避免一次全开影响构建时间或引入不必要依赖。

八、Frontmatter 说明

文章顶部用 --- 包裹的字段称为 Frontmatter，Post 集合已开启 autoFrontmatter，你只需写 title 即可；常用字段如下：

---
title: 文章标题      # 必填，页面标题
date: 2026-08-30     # 可选，发布日期
tags:                # 可选，标签（用于标签页/目录）
  - 教程
categories:          # 可选，分类
  - 博客
permalink: /custom/  # 可选，自定义链接（默认按文件路径自动生成）
draft: true          # 可选，草稿（不会发布）
---