Mobile wallpaper 1Mobile wallpaper 2Mobile wallpaper 3Mobile wallpaper 4Mobile wallpaper 5Mobile wallpaper 6
3274 字
16 分钟
markdown语法测试
2025-12-23

Markdown 是一种轻量级标记语言,通过简单标记语法,让普通文本具备格式化效果,核心目标是「易读易写」—— 纯文本编写,无复杂标签,直接阅读也清晰易懂。

一、概述#

核心特性#

  • 可读性优先:纯文本格式,无冗余标签,直接阅读也自然流畅
  • 语法简洁:基于标点符号设计,标记与语义高度一致(如 *强调* 直观易懂)
  • 兼容性强:衍生版本丰富(Markdown Extra、MultiMarkdown 等),支持扩展表格、脚注等功能,可转换为 HTML、LaTeX、Docbook 等格式
  • 灵感来源:源自纯文本电子邮件格式,兼顾写作效率与展示效果

主要用途#

  • 撰写博客(支持 WordPress 等主流平台)
  • 编写项目说明文档(如 README.md)
  • 快速生成演讲 PPT、Word 文档、LaTeX 论文
  • 数据科学领域:支持动态可重复性研究文档

二、块元素#

1. 段落和换行#

  • 段落:由连续行组成,空行(含仅空格/tab的行)分隔不同段落,无需缩进

  • 强制换行:行尾加 2 个以上空格 + 回车,或用反斜线 \ + 回车

    这是第一段,行尾加两个空格
    强制换行显示
    这是第二段(与上一段空行分隔)
    这是第三段\
    反斜线换行示例

2. 标题#

支持两种语法,推荐使用 Atx 形式(更灵活):

Atx 形式(推荐)#

# H1 一级标题
## H2 二级标题
### H3 三级标题
#### H4 四级标题
##### H5 五级标题
###### H6 六级标题

Setext 形式(仅支持 H1-H2)#

H1 一级标题
===
H2 二级标题
---

3. 块引言#

  • 行首加 > ,支持嵌套(多层 >)和内部嵌套其他语法
  • 可仅在段落第一行加 >,后续行自动继承
> 一级引言段落1
> 一级引言段落2
>
> > 嵌套二级引言
>
> 回到一级引言,支持嵌套列表:
> 1. 引言内有序列表
> 2. 列表项2
>
> > ## 引言内标题
> > `引言内代码`

4. 列表#

无序列表#

支持 -*+ 作为标记(推荐 -),标记后需加空格

- 无序列表项1
- 无序列表项2
- 嵌套子项(缩进 3 空格或 1 tab)
- 嵌套子项
* 星号标记项(不推荐混合使用)
+ 加号标记项(不推荐混合使用)

有序列表#

数字 + 英文句点 + 空格,数字不影响最终排序(可统一用 1.

1. 有序列表项1
2. 有序列表项2
3. 嵌套子项(缩进)
4. 嵌套子项
5. 有序列表项3

列表高级用法#

  • 列表项含多段落:子段落需缩进 3 空格
  • 列表项间空行:自动为内容添加 <p> 标签(更美观)
  • 避免误触发:行首数字+句点前加反斜线 \(如 1986\. 年份说明
- 列表项1(含多段落)
子段落内容(缩进 3 空格)
子段落2
- 列表项2(空行分隔,自动加<p>标签)

5. 代码块#

基础用法(缩进式)#

行首缩进 4 空格或 1 tab,适用于短代码块

普通段落:
const a = 1; // 缩进 4 空格的代码块
console.log(a);

进阶用法(围栏式,推荐)#

用 ``` 或 ````` 包裹,支持指定语言高亮(推荐)

```js
// 指定 JavaScript 语法高亮
function demo() {
return "代码块";
}

// 嵌套代码块(外层用更多反引号)

```html
<div>嵌套代码块示例</div>
```
### 6. 分隔线
一行内用 3 个以上 `*`、`-`、`_`,行内无其他内容
```markdown
内容1
---
内容2
***
内容3
___

三、行内元素#

1. 链接#

行内链接(推荐,直观)#

[链接文本](https://example.com "可选标题,hover显示")
[相对路径链接](/about/ "内部页面")
[无标题链接](https://example.com)

参考式链接(适合多次引用同一链接)#

// 正文引用
这是[示例链接][id1],这是[重复引用链接][id1]
// 链接定义(可放文末)
[id1]: https://example.com "可选标题"
[google]: https://google.com/ "Google"
// 简化写法(链接文本=标识ID)
[Google][]
[google]: https://google.com/

2. 强调#

  • 单 * 或 _:斜体(<em>
  • 双 * 或 _:粗体(<strong>
  • 符号需成对使用,不可混合
*斜体文本*(推荐)
_斜体文本_
**粗体文本**(推荐)
__粗体文本__
***粗斜体文本***

3. 行内代码#

用反引号 ` 包裹,含反引号时用多组反引号

行内代码:`console.log("hello")`
含反引号的代码:`` `code` 中的反引号 ``
HTML 标签示例:`<div class="demo">`

4. 图片#

语法与链接类似,前缀加 !,无宽高控制语法(需宽高时用 <img> 标签)

行内图片#

![替代文本(图片加载失败显示)](/path/to/img.webp "可选标题")
![网络图片](https://example.com/img.jpg)

参考式图片#

![替代文本][imgId]
[imgId]: /path/to/img.webp "可选标题"

自定义宽高(HTML 标签)#

<img src="/path/to/img.webp" alt="替代文本" width="300" height="200">

5. 其他行内样式#

效果Markdown 语法说明
删除线~~删除文本~~双波浪线包裹
换行行尾加 2 空格 + 回车强制换行
表情符号:emoji名称:例::smile: → 😄

四、扩展功能#

1. 表格#

  • 表头与内容用 - 分隔,: 控制对齐(无 : 则默认左对齐)
  • - 数量至少 1 个,可灵活调整
| 左对齐 | 居中对齐 | 右对齐 |
| :----- | :------: | -----: |
| 内容1 | 内容2 | 内容3 |
| 长文本内容 | 居中示例 | 数值100 |

2. 自动链接#

无需标记文本,直接用 <> 包裹网址或邮箱

<https://example.com>
<contact@example.com>

3. 转义字符#

用反斜线 \ 转义 Markdown 特殊符号,支持转义的符号:

\ 反斜线
` 反引号
* 星号
_ 底线
{} 大括号
[] 方括号
() 括号
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号

示例:\*这不是斜体\* → 这不是斜体

4. 行内 HTML#

支持直接插入 HTML 标签,块级标签需前后空行,且不缩进

普通段落
<div style="color: red;">HTML 块级标签,前后空行</div>
<span style="color: blue;">行内 HTML 标签</span>

注意:HTML 块内不解析 Markdown 语法

5. 快捷键#

效果Markdown 语法快捷键(Windows/Linux)快捷键(Mac)
粗体**文本**Ctrl + B⌘ + B
斜体*文本*Ctrl + I⌘ + I
行内代码`代码`选中内容 + `选中内容 + `
链接[文本](链接)Ctrl + K⌘ + K
图片![文本](路径)Ctrl + Shift + I⌘ + Shift + I

五、注意事项#

  1. 语法兼容性:不同平台(GitHub、掘金等)对扩展语法(如表格、脚注)支持有差异,需按需调整
  2. 图片路径:遵循前端资源路径规则(/ 开头对应 public 目录,无 / 对应相对目录)
  3. 性能优化:图片推荐用 WebP 格式,文档中避免冗余标记,保持可读性

、GitHub 仓库卡片(GitHub Repository Cards)#

支持添加动态 GitHub 仓库卡片,页面加载时会通过 GitHub API 拉取仓库实时信息(如星标数、分支数等)。

使用示例#

语法格式#

::github{repo="用户名/仓库名"}
  • repo 参数:必填,格式为「GitHub 用户名/仓库名称」(如 matsuzaka-yuki/Mizuki

二、提示框(Admonitions)#

支持 5 种预设类型的提示框,用于突出显示不同重要程度的信息,适配多种使用场景。

支持类型及示例#

类型语法标识效果示例
说明note::
技巧tip::
重要important::
警告warning::
注意(谨慎)caution::

基础语法#

:::类型标识
提示框内容(支持换行)
:::

:::类型标识

提示框内容(支持换行)

:::

自定义标题#

可修改提示框默认标题,语法如下:

:::note[我的自定义标题]
这是一个带有自定义标题的说明提示框。
:::

效果:

我的自定义标题

这是一个带有自定义标题的说明提示框。

GitHub 兼容语法#

同时支持 GitHub 官方提示框语法(无缝适配 GitHub 文档风格):

> [!NOTE]
> GitHub 语法的说明提示框。
> 支持多行内容。
> [!TIP]
> GitHub 语法的技巧提示框。

效果:

NOTE

GitHub 语法的说明提示框。 支持多行内容。

TIP

GitHub 语法的技巧提示框。

GitHub 语法的说明提示框。 支持多行内容。

提示

GitHub 语法的技巧提示框。

三、折叠剧透(Spoiler)#

支持添加折叠式剧透内容,默认隐藏,hover 或点击时显示,内容支持 Markdown 格式。

使用示例#

这是普通文本,剧透内容::spoiler[被隐藏的**剧透内容**(支持粗体等 Markdown 语法)]!

效果: 这是普通文本,剧透内容:被隐藏的剧透内容(支持粗体等 Markdown 语法)

语法格式#

:spoiler[剧透内容(可包含 Markdown 语法)]

Mizuki 主题内置了 Mermaid 支持,让你可以在 Markdown 文档中轻松创建各种类型的图表和流程图。

基本语法#

Mermaid 使用 ```mermaid 代码块来定义图表:

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

支持的图表类型#

1. 流程图 (Flowchart)#

流程图是最常用的图表类型,用于表示工作流程、决策过程等。

基本流程图#

graph TD A[开始] --> B[数据输入] B --> C{数据验证} C -->|有效| D[处理数据] C -->|无效| E[错误提示] D --> F[输出结果] E --> G[记录错误] F --> H[结束] G --> H

子流程图#

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤1] B -->|否| D[处理步骤2] C --> E[子流程] D --> E subgraph E [子流程详情] E1[子步骤1] --> E2[子步骤2] E2 --> E3[子步骤3] end E --> F{另一个决策} F -->|选项1| G[结果1] F -->|选项2| H[结果2] F -->|选项3| I[结果3] G --> J[结束] H --> J I --> J

2. 序列图 (Sequence Diagram)#

序列图用于展示对象之间的交互顺序。

sequenceDiagram participant 用户 participant 前端 participant 后端 participant 数据库 用户->>前端: 发起请求 前端->>后端: API调用 后端->>数据库: 查询数据 数据库-->>后端: 返回数据 后端-->>前端: 响应结果 前端-->>用户: 显示结果

3. 类图 (Class Diagram)#

类图用于展示类的结构和关系。

classDiagram class Animal { +String name +int age +eat() +sleep() } class Dog { +String breed +bark() } class Cat { +String color +meow() } Animal <|-- Dog Animal <|-- Cat

4. 状态图 (State Diagram)#

状态图用于展示对象的不同状态和状态转换。

stateDiagram-v2 [*] --> 待处理 待处理 --> 处理中: 开始处理 处理中 --> 已完成: 处理完成 处理中 --> 已取消: 取消处理 已完成 --> [*] 已取消 --> [*]

5. 饼图 (Pie Chart)#

饼图用于展示数据的占比关系。

pie title 浏览器使用统计 "Chrome" : 45 "Firefox" : 25 "Safari" : 15 "Edge" : 10 "其他" : 5

6. 甘特图 (Gantt Chart)#

甘特图用于项目管理和时间规划。

gantt title 项目开发计划 dateFormat YYYY-MM-DD section 需求分析 需求调研 :done, des1, 2023-01-01, 2023-01-10 需求文档编写 :done, des2, 2023-01-11, 2023-01-20 section 设计阶段 系统设计 :active, des3, 2023-01-21, 2023-01-30 数据库设计 : des4, 2023-01-25, 2023-02-05 section 开发阶段 前端开发 : des5, 2023-02-01, 2023-02-20 后端开发 : des6, 2023-02-01, 2023-02-25 section 测试部署 系统测试 : des7, 2023-02-21, 2023-02-28 部署上线 : des8, 2023-03-01, 2023-03-05

高级技巧#

自定义样式#

你可以为节点和连接线添加自定义样式:

graph TD A[开始] --> B[处理] B --> C{判断} C -->|是| D[成功] C -->|否| E[失败] style A fill:#f9f,stroke:#333,stroke-width:2px style D fill:#9f9,stroke:#333,stroke-width:2px style E fill:#f99,stroke:#333,stroke-width:2px

使用注释#

在复杂的图表中添加注释可以提高可读性:

graph LR A[开始] --> B[数据验证] B --> C{验证通过?} C -->|是| D[数据处理] C -->|否| E[错误处理] D --> F[结果输出] E --> F %% 这是注释,不会在图表中显示 %% 主要流程线 linkStyle 0 stroke:blue,stroke-width:2px; linkStyle 4 stroke:green,stroke-width:2px;

子图和分组#

使用子图可以组织复杂的图表结构:

graph TB subgraph 输入模块 A[数据采集] --> B[数据清洗] end subgraph 处理模块 C[数据分析] --> D[数据建模] E[模型训练] --> F[模型验证] end subgraph 输出模块 G[结果展示] --> H[报告生成] end B --> C D --> E F --> G

最佳实践#

  1. 保持简洁:避免在单个图表中展示过多信息,可以拆分为多个相关图表
  2. 使用清晰的方向:TB(从上到下)和 LR(从左到右)是最常用的方向
  3. 添加说明文字:为重要的节点和连接添加说明
  4. 保持一致性:在整个文档中保持图表样式的一致性
  5. 测试图表:在预览中检查图表是否按预期显示

常见问题#

Q: 图表不显示怎么办?#

A: 确保:

  • 使用了正确的 ```mermaid 代码块语法
  • 语法没有错误(可以通过 Mermaid 在线编辑器验证)
  • VuePress 配置中启用了 Mermaid 插件

Q: 如何调整图表大小?#

A: 可以通过添加 CSS 来调整图表大小,或者在图表周围添加容器。

Q: 图表中的中文显示不正常?#

A: 确保网页编码设置为 UTF-8,并且 Mermaid 配置中设置了正确的字体。

参考资源#

markdown语法测试
https://blog.evebreeze.top/posts/markdown语法测试/
作者
晚风
发布于
2025-12-23
许可协议
CC BY 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00