Markdown 语法大全详解

前端 0

Markdown 语法大全详解

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。

1. 样式标题

Markdown 支持使用 # 符号来创建不同级别的标题。# 符号的数量代表了标题的级别。

# 这是 H1 标题## 这是 H2 标题### 这是 H3 标题#### 这是 H4 标题##### 这是 H5 标题###### 这是 H6 标题

这是 H1 标题

这是 H2 标题

这是 H3 标题

这是 H4 标题
这是 H5 标题
这是 H6 标题

不同的 Markdown 应用程序处理 # 和标题之间的空格方式并不一致。为了兼容考虑，请用一个空格在 # 和标题之间进行分隔。

2. 段落

段落由一行或多行文本组成，每段之间需要有一个空行隔开。

这是一个段落。它可以包含多个句子。这是另一个段落。

这是一个段落。它可以包含多个句子。

这是另一个段落。

3. 强调

用于突出显示文本。

斜体

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

斜体文本 或 斜体文本

粗体

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

粗体文本 或 粗体文本

斜体和粗体

***斜体加粗文本*** 或 ___斜体加粗文本___

斜体加粗文本 或 斜体加粗文本

4. 列表

列表分为有序列表和无序列表。

无序列表

- 项目 1- 项目 2- 项目 3
  • 项目 1
  • 项目 2
  • 项目 3

有序列表

1. 项目 12. 项目 23. 项目 3
  1. 项目 1
  2. 项目 2
  3. 项目 3

嵌套列表

- 项目 1- 项目 2  - 子项目 1  - 子项目 2- 项目 3
  • 项目 1
  • 项目 2
    • 子项目 1
    • 子项目 2
  • 项目 3

5. 链接

链接可以指向网页或者文件。

[链接文本](https://example.com)

链接文本

6. 图像

插入图像也很简单 这张图片好像没法加载…

![替代文字](https://imagepphcloud.thepaper.cn/pph/image/126/870/199.jpg)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0zSBx1M-1722265538317)(https://imagepphcloud.thepaper.cn/pph/image/126/870/199.jpg)]

7. 代码

内联代码

`内联代码`

内联代码

代码块

/```/n代码块/n````/n
代码块

8. 表格

表格可以帮助组织数据。

| 列 1 | 列 2 | 列 3 || ---- | ---- | ---- || 数据 1 | 数据 2 | 数据 3 || 数据 4 | 数据 5 | 数据 6 |
列 1列 2列 3
数据 1数据 2数据 3
数据 4数据 5数据 6

9. 水平线

水平线用于分隔不同的部分。

---

10. 引用

引用通常用于展示原文。

> 这是一个引用。

这是一个引用。

11. 删除线

~~被删除的文字~~

被删除的文字

12. 任务列表

- [ ] 未完成的任务- [x] 已完成的任务
  • 未完成的任务
  • 已完成的任务

13. 数学公式

Markdown 本身不支持数学公式，但许多Markdown编辑器支持使用 LaTeX 格式来插入数学公式。

行内公式

$E = mc^2$

E = m c 2 E = mc^2 E=mc2

独立公式

$$ E = mc^2 $$

E = m c 2 E = mc^2 E=mc2

14. 脚注

脚注可以用来添加额外的信息或引用。

这里有一个脚注[^1]。[^1]: 这是脚注的内容。

这里有一个脚注1。

15. 定义列表

定义列表用于定义术语或概念。

名词:: 定义: 更多解释
名词:
定义
更多解释

16. 代码高亮

对于代码块，可以通过指定语言来实现语法高亮。

/```/n```pythondef hello_world():    print("Hello, world!")````/n
def hello_world():    print("Hello, world!")

17. 表格对齐

有些Markdown编辑器支持表格中的单元格对齐方式。

| 左对齐 | 居中对齐 | 右对齐 || :---- | :-----: | ----: || 文本  |   文本  |  文本 || 文本  |   文本  |  文本 |
左对齐居中对齐右对齐
文本文本文本
文本文本文本

18. YAML 前置元数据

Markdown 文件有时会包含YAML格式的前置元数据，用于存储文件的相关信息。

---title: 我的文章标题author: John Doedate: 2024-07-29---# 开始正文

title: 我的文章标题
author: John Doe
date: 2024-07-29

开始正文

18. 高级数学公式

一些Markdown编辑器支持使用LaTeX语法来编写更复杂的数学公式。

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

∫ − ∞ + ∞ e − x 2 d x = π /int_{-/infty}^{+/infty} e^{-x^2} dx = /sqrt{/pi} ∫−∞+∞​e−x2dx=π ​

19.嵌套引用

将两个引用嵌套起来

> 这是一个引用。> > 这是一个嵌套引用。

这是一个引用。

这是一个嵌套引用。

20. 转义字符

在Markdown中，如果想要显示某些特殊字符而不是让它们被解析为Markdown语法的一部分，可以使用反斜杠 / 来转义这些字符。

转义字符示例

  • 反斜杠 (/)：

    //

    /

  • 星号 (*)：

    /*

    *

  • 下划线 (_)：

    /_

    _

  • 大括号 ({}) 和方括号 ([])：

    /{ /} /[ /]

    { } [ ]

  • 尖括号 (<>)：

    /< />

    < >

  • 竖线 (|)：

    /|

    |

  • 反引号 (``)：

    /`

    `

  • 井号 (#)：

    /#

    #

  • 减号 (-)：

    /-

    -

  • 点 (.) 和感叹号 (!)：

    /. /!

    . !

  • 其他特殊字符：例如美元符号 $、百分号 % 等，通常不需要转义，除非在某些特定情况下（如数学公式）需要使用。

示例

假设你想在一个段落中显示星号 * 和下划线 _ 而不是让它们被解析为斜体，你可以这样写：

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

显示结果：

这不是 * 斜体文本 *，也不是 _ 下划线文本 _。

注意

  • 在某些情况下，如使用星号或下划线时，只有当它们位于单词边界时才需要转义。例如，在单词中间的下划线或星号通常不需要转义。
  • 当使用代码块时，通常不需要转义内部的特殊字符。
  • 对于某些Markdown编辑器，你可能需要转义两次才能正确显示转义字符，例如 // 显示为 /。

21. 内嵌 HTML 标签

在 Markdown 中，任何有效的 HTML 标签都可以直接使用，而不会被 Markdown 解析器特别处理。这意味着你可以使用 HTML 来添加额外的样式或功能，例如 CSS 类、id、表格样式等。

示例

基本 HTML 标签
<b>加粗文本</b><i>斜体文本</i><em>强调文本</em><strong>强烈强调文本</strong><small>小字体文本</small>

加粗文本
斜体文本
强调文本
强烈强调文本
小字体文本

使用 CSS 类
<p class="highlight">这是一个带有 CSS 类的段落。</p>

这是一个带有 CSS 类的段落。

使用 CSS id
<p id="my-id">这是一个带有 CSS id 的段落。</p>

这是一个带有 CSS id 的段落。

使用 CSS 样式
<p style="color: red;">这是一个带有内联样式的段落。</p>

这是一个带有内联样式的段落。

使用表格
<table>  <tr>    <th>标题 1</th>    <th>标题 2</th>  </tr>  <tr>    <td>数据 1</td>    <td>数据 2</td>  </tr></table>
标题 1标题 2
数据 1数据 2
使用 div
<div class="container">  <p>这是 div 内部的段落。</p></div>

这是 div 内部的段落。

使用 span
<span class="important">这是重要的文本。</span>

这是重要的文本。

使用图像
<img src="https://img-home.csdnimg.cn/images/20230724024159.png?be=1&origin_url=https://example.com/image.jpg" alt="示例图像" title="这是示例图像">
示例图像
使用锚点
<a href="https://example.com" target="_blank">访问示例网站</a>

访问示例网站

使用列表
<ul>  <li>列表项 1</li>  <li>列表项 2</li></ul>
  • 列表项 1
  • 列表项 2
使用注释
<!-- 这是一个 HTML 注释 -->

22. 甘特图

Markdown 本身不支持直接绘制甘特图，但你可以使用Mermaid这样的工具来在Markdown文档中生成甘特图。Mermaid 是一种基于Markdown的图表生成工具，支持甘特图等多种图表。

甘特图示例
gantt        dateFormat  YYYY-MM-DD        title Adding GANTT diagram functionality to mermaid        section 现有任务        已完成               :done,    des1, 2014-01-06,2014-01-08        进行中               :active,  des2, 2014-01-09, 3d        计划中               :         des3, after des2, 5d

这段代码将生成一个简单的甘特图。

2014-01-06 2014-01-07 2014-01-08 2014-01-09 2014-01-10 2014-01-11 2014-01-12 2014-01-13 2014-01-14 2014-01-15 2014-01-16 2014-01-17 已完成 进行中 计划中 现有任务 Adding GANTT diagram functionality to mermaid

23. UML 图

Mermaid 同样支持多种UML图，包括类图、序列图、活动图等。

类图示例

sequenceDiagram张三 ->> 李四: 你好！李四, 最近怎么样?李四-->>王五: 你最近怎么样，王五？李四--x 张三: 我很好，谢谢!李四-x 王五: 我很好，谢谢!Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.李四-->>张三: 打量着王五...张三->>王五: 很好... 王五, 你怎么样?

这段代码将生成一个简单的类图。

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

24. flow 流程图

Mermaid 支持多种图表类型，其中流程图是非常常用的一种。

lowchatst=>start: 开始e=>end: 结束op=>operation: 我的操作cond=>condition: 确认？st->op->condcond(yes)->econd(no)->op
流程图示例

这段代码将生成一个简单的流程图。

Created with Raphaël 2.3.0 开始 我的操作 确认？ 结束 yes no

25. Mermaid 类图

Mermaid 支持绘制类图，可以用来表示类之间的关系。

graph LRA[长方形] -- 链接 --> B((圆))A --> C(圆角长方形)B --> D{菱形}C --> D
链接
长方形
圆
圆角长方形
菱形
Class Diagram类图示例
classDiagramClass01 <|-- AveryLongClass : CoolClass03 <|-- Class04Class05 <|-- Class06Class07 : equals(Class07 other){}Class07 : String getName(){}Class08 <|-- Class07Class07 .. Class06 : CoolClass06 .. Class02 : Super coolClass04 : implements Interface01Class05 : implements Interface00Class06 : implements Interface00Class07 : implements Interface00Class08 : implements Interface02Class09 : implements Interface01Class04 <|-- Class05Class04 <|-- Class06Interface00 <|-- Interface01Interface00 <|-- Interface02[Class10] <|-- Class07Class09 <|-- Class07Class04 .. Class07 : "Cool"Class06 .. Class07 : "Super cool"

这段代码将生成一个类图。

Cool
Where am i?
«interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
Class10
>>service>>
int id
size()

  1. 这是脚注的内容。 ↩︎

也许您对下面的内容还感兴趣：