跳到主要内容

Markdown 语法指南

本文档通过左右对比的方式展示 Markdown 语法和实际效果。

基础语法​

标题​

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

强调​

*斜体文本*
_斜体文本_

**粗体文本**
__粗体文本__

***粗斜体文本***
___粗斜体文本___

~~删除线文本~~

列表​

- 项目 1
- 项目 2
  - 子项目 2.1
  - 子项目 2.2
- 项目 3

1. 第一步
2. 第二步
   1. 子步骤 2.1
   2. 子步骤 2.2
3. 第三步

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

链接和图片​

[链接文本](https://www.example.com)
[带标题的链接](https://www.example.com "链接标题")

![替代文本](https://via.placeholder.com/150)
![带标题的图片](https://via.placeholder.com/150 "图片标题")

引用​

> 这是一段引用文本
> 
> 这是引用的第二段
> > 这是嵌套引用

代码​

  • 使用 ``` 标记行内代码
  • 使用三个反引号创建代码块
  • 使用showLineNumbers显示行号
  • 使用highlight-next-line高亮单行
  • 使用highlight-start和highlight-end高亮多行
  • 使用title指定代码块标题
```javascript showLineNumbers title="示例代码"
const greeting = "Hello, World!";
console.log(greeting);

// 单行高亮
// highlight-next-line
console.log("This line is highlighted.");

// 多行高亮
// highlight-start
console.log("This line is highlighted.");
console.log("This line is also highlighted.");
// highlight-end
```

表格​

| 表头 1   | 表头 2   | 表头 3   |
| -------- | -------- | -------- |
| 单元格 1 | 单元格 2 | 单元格 3 |
| 单元格 4 | 单元格 5 | 单元格 6 |

Mermaid​

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

文章摘要​

这是文章摘要
<!--truncate-->
这是文章正文

提示框​

:::note[备注]
这是一个备注框
:::

:::tip[提示]
这是一个提示框
:::

:::info[信息]
这是一个信息框
:::

:::caution[警告]
这是一个警告框
:::

:::danger[危险]
这是一个危险框
:::

最佳实践​

  1. 使用适当的标题层级
  2. 保持列表格式一致
  3. 为图片添加有意义的替代文本
  4. 使用代码块时指定语言
  5. 合理使用提示框和标签页
  6. 保持文档结构清晰

注意事项​

  • Markdown 文件需要以 .md 或 .mdx 结尾
  • 文件开头需要包含 frontmatter（使用 --- 包裹）
  • 图片建议使用相对路径
  • 代码块建议指定语言以获得语法高亮
  • 表格建议使用对齐语法

更多内容请参考Markdown Features