Markdown 使用指南

本文档介绍 ShuFeiCat 主题支持的所有 Markdown 语法，包括标准语法和主题扩展语法。

一、基础语法

1.1 标题

写法：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

1.2 文本样式

写法：

**粗体文本**
*斜体文本*
~~删除线文本~~

效果：

粗体文本 / 斜体文本 / 删除线文本

1.3 引用

写法：

> 这是一段引用文本
> 可以多行

效果：

这是一段引用文本
可以多行

1.4 列表

无序列表：

- 项目一
- 项目二
  - 子项目
- 项目三

效果：

• 项目一

• 项目二

  • 子项目
• 项目三

有序列表：

1. 第一步
2. 第二步
3. 第三步

效果：

1. 第一步
2. 第二步
3. 第三步

1.5 链接与图片

写法：

[链接文本](https://lwcat.cn)

![图片描述](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)

效果：

链接文本

1.6 行内代码与代码块

行内代码：

使用 `console.log()` 输出日志

效果：使用 console.log() 输出日志

代码块（带语法高亮）：

```javascript
function hello() {
    console.log('Hello, World!');
}
```

效果：

function hello() {
    console.log('Hello, World!');
}

支持的语言标识：javascript、python、php、css、html、bash、json、sql、java、go、rust 等。

1.7 分割线

写法：

---

效果：

1.8 表格

写法：

| 姓名 | 年龄 | 城市 |
|------|------|------|
| 张三 | 25   | 北京 |
| 李四 | 30   | 上海 |
| 王五 | 28   | 广州 |

效果：

表格中的行内代码可以正常使用 | 符号，不会与列分隔符冲突：

| 命令 | 说明 |
|------|------|
| `a | b` | 管道符不会破坏表格 |

二、扩展语法

以下扩展语法需要在主题后台设置中开启「Markdown 扩展」选项。

2.1 高亮文本

使用 == 包裹文本实现高亮标记。

写法：

这是一段==高亮文本==，可以突出显示关键内容。

效果：

这是一段高亮文本，可以突出显示关键内容。

2.2 任务列表

使用 - [x] 和 - [ ] 创建任务列表。

写法：

- [x] 已完成的任务
- [x] 另一个已完成的任务
- [ ] 未完成的任务
- [ ] 另一个未完成的任务

效果：

• 已完成的任务
• 另一个已完成的任务
• 未完成的任务
• 另一个未完成的任务

2.3 图片扩展语法

2.3.1 图片大小

在 alt 文本后使用 |宽x高 指定尺寸：

![图片描述|300x200](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)
![图片描述|50%](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)
![图片描述|300](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)
![图片描述|x200](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)

• |300x200 — 指定宽 300px、高 200px
• |50% — 指定宽度为 50%
• |300 — 仅指定宽度
• |x200 — 仅指定高度

效果：

2.3.2 图片对齐

在 alt 文本后使用 #对齐方式：

![图片描述#center](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)
![图片描述#left](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)
![图片描述#right](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)

• #center — 居中对齐
• #left — 左对齐
• #right — 右对齐

效果：

2.3.3 组合使用

尺寸和对齐可以组合使用：

![图片描述|300x200#center](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)

效果：

2.3.4 图片标题

alt 文本会自动作为图片标题（figcaption）显示：

![这是一张照片](https://img-cf.czzu.cn/1778489459353_b3u2f8a6.png)

效果：

所有图片会自动添加 loading="lazy" 懒加载属性。

2.4 提示框（Admonition）

使用引用语法 + 特殊标记创建彩色提示框。支持 5 种类型：

写法：

> [!tip] 这是一个提示
> 这里是提示的详细内容

> [!note]
> 没有自定义标题时使用默认标题

> [!warning] 注意事项
> 第一行警告内容
> 第二行警告内容

效果：

其他类型示例：

2.5 折叠区块（Details）

使用引用语法 + [details:标题] 创建可折叠的内容区域。

写法：

> [details:点击展开查看详情]
> 这里是折叠的详细内容
> 可以包含多行文本

效果：

2.5 评论可见（reply）

评论后会显示被隐藏的内容

【reply】
这是需要评论后才能看到的内容！
可以包含图片、链接等任何HTML内容。
【/reply】

（注意：把【】改成[])

效果：

三、数学公式（KaTeX）

需要在主题后台设置中开启「KaTeX 数学公式」选项。

3.1 行内公式

使用 $...$ 或 \(...\) 包裹：

质能方程 $E=mc^2$ 是物理学最著名的公式之一。

欧拉公式 \(e^{i\pi}+1=0\) 被称为最美的数学公式。

效果：

质能方程 是物理学最著名的公式之一。

欧拉公式 被称为最美的数学公式。

3.2 块级公式

使用 $$...$$ 或 \[...\] 包裹：

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

或：

\[
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
\]

效果：

3.3 常用公式示例

矩阵：$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$

分数：$\frac{1}{1+x^2}$

极限：$\lim_{x \to 0} \frac{\sin x}{x} = 1$

求和：$\sum_{k=1}^{n} k^2 = \frac{n(n+1)(2n+1)}{6}$

效果：

矩阵：

分数：

极限：

求和：

四、图表

4.1 Mermaid 流程图

需要在主题后台设置中开启「Mermaid 图表」选项。

使用 ```mermaid 代码块：

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E
```

效果：

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E

更多 Mermaid 图表类型：

```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 服务器
    A->>B: 发送请求
    B-->>A: 返回响应
```

```mermaid
pie title 技术栈占比
    "JavaScript" : 40
    "Python" : 25
    "Go" : 20
    "Rust" : 15
```

4.2 ECharts 数据图表

需要在主题后台设置中开启「ECharts 图表」选项。

使用 ```echarts 代码块，内容为 ECharts option 的 JSON 配置：

```echarts
{
    "xAxis": {"type": "category", "data": ["一月", "二月", "三月", "四月", "五月"]},
    "yAxis": {"type": "value"},
    "series": [{"data": [150, 230, 224, 218, 135], "type": "line"}],
    "title": {"text": "月度数据趋势"}
}
```

柱状图示例：

```echarts
{
    "xAxis": {"type": "category", "data": ["A", "B", "C", "D"]},
    "yAxis": {"type": "value"},
    "series": [{"data": [120, 200, 150, 80], "type": "bar"}]
}
```

饼图示例：

```echarts
{
    "series": [{"type": "pie", "radius": "50%", "data": [{"value": 1048, "name": "搜索引擎"}, {"value": 735, "name": "直接访问"}, {"value": 580, "name": "邮件营销"}, {"value": 484, "name": "联盟广告"}]}]
}
```

五、其他功能

5.1 图片灯箱

文章中的图片点击后自动弹出灯箱查看大图，支持键盘导航和左右切换。无需额外语法。

5.2 代码块复制按钮

代码块右上角自动显示复制按钮，点击即可复制代码内容。无需额外语法。

5.3 代码块语言标签

代码块左上角自动显示语言标识（如 JavaScript、Python 等）。无需额外语法。

六、语法速查表