Markdown语法对照表

标题

源代码 渲染效果
# 一级标题

一级标题

## 二级标题

二级标题

### 三级标题

三级标题

#### 四级标题

四级标题

##### 五级标题
五级标题
###### 六级标题
六级标题

字体&行内格式

源代码 渲染效果
**粗体** 粗体
*斜体* 斜体
***粗斜体*** 粗斜体
~~删除线~~ 删除线
<u>下划线</u> 下划线
<mark>高亮</mark> 高亮
<span style=“color:red;”>红色文本</span> 红色文本
<span style=“font-size:24px;”>大号文本</span> 大号文本
<code>行内代码</code> 行内代码
文本 文本

无序列表&有序列表&任务列表

源代码 渲染效果
- 项目 A
- 项目 B
  - 子项 B1
  - 子项 B2
- 项目 C
  - 子项 C1
    - 子项 C11
- 项目 D
  • 项目 A
  • 项目 B
    • 子项 B1
    • 子项 B2
  • 项目 C
    • 子项 C1
      • 子项 C11
  • 项目 D
1. 第一
2. 第二
   1. 第二-1
   2. 第二-2
3. 第三
   1. 第三-1
      1. 第三-11
4. 第四
  1. 第一
  2. 第二
    1. 第二-1
    2. 第二-2
  3. 第三
    1. 第三-1
      1. 第三-11
  4. 第四
- [ ] 前端开发
  - [x] 页面布局
  - [ ] 交互功能
  - [ ] 响应式适配
- [ ] 后端开发
  - [ ] 数据库设计
  - [x] API 开发
  - [ ] 性能优化

Latex数学公式

注:以下数学公式语法适配MathJax渲染引擎和hexo-renderer-pandoc渲染插件

行内公式$公式$,块级公式$$公式$$

源代码 渲染效果
+, - , \times, \div \(+, - , \times, \div\)
\frac{分子}{分母} \(\frac{分子}{分母}\)
下标x_i, 上标x^2, 上下标x_i^2 下标\(x_i\), 上标\(x^2\), 上下标\(x_i^2\)
=, \neq, \equiv, <, >, \leq, \geq, \approx, \sim \(=, \neq, \equiv, <, >, \leq, \geq, \approx, \sim\)
\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu \(\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu\)
\log(x), \ln(x), \sin(x), \cos(x), \tan(x) \(\log(x), \ln(x), \sin(x), \cos(x), \tan(x)\)
\sum_{i=1}^n, \prod_{i=1}^n, \int_{0}^{\infty} \(\sum_{i=1}^n, \prod_{i=1}^n, \int_{0}^{\infty}\)
\sqrt{平方根}, \sqrt[n]{n次根} \(\sqrt{平方根}, \sqrt[n]{n次根}\)
\in, \notin, \subset, \supset \(\in, \notin, \subset, \supset\)
\cap, \cup, \emptyset \(\cap, \cup, \emptyset\)
\begin{pmatrix} a & b \\ c & d \end{pmatrix},
\begin{bmatrix} a & b \\ c & d \end{bmatrix},
\begin{vmatrix} a & b \\ c & d \end{vmatrix}
\(\begin{pmatrix} a & b \\ c & d \end{pmatrix}, \begin{bmatrix} a & b \\ c & d \end{bmatrix}, \begin{vmatrix} a & b \\ c & d \end{vmatrix}\)

代码块

使用三个反引号```前后包裹代码,并指定一种语言(也可以不指定),支持语法高亮和多行代码展示。

常用语言标识符列表:

  • javascript / js - JavaScript
1
2
3
4
5
6
7
const users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
  • python / py - Python
1
2
3
4
5
6
7
8
def calculate_area(radius):
"""计算圆的面积"""
import math
return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {area:.2f}")
  • sql - SQL
1
2
3
4
5
6
7
SELECT u.name, u.email, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name, u.email
ORDER BY order_count DESC
LIMIT 10;
  • cpp / c++ - C++
  • csharp / c# - C#
  • html - HTML
  • css - CSS
  • json - JSON
  • xml - XML
  • yaml / yml - YAML
  • bash / shell - Shell脚本
  • php - PHP
  • go - Go语言
  • rust - Rust

表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 --- 来分隔表头和其他行。

语法要点:

  • 表头和数据行之间必须有分隔线
  • 分隔线至少需要三个连字符 ---
  • 两端的竖线 | 是可选的,但建议保留以提高可读性
  • 严格对齐(可选),但对齐后更美观

表格对齐方式: - :---设置内容和标题栏居左对齐 - ---:设置内容和标题栏居右对齐 - :---:设置内容和标题栏居中对齐

例子:

1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :---- | ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

图片

Markdown 图片语法格式:

1
2
3
4
![替代文字](图片相对路径/绝对路径)
![替代文字](图片路径 "图片标题")

例:![本地图片](./images/demo.png "本地文件示例")

图片尺寸控制(使用 HTML img 标签):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 等比例放缩 -->
<img src="image.jpg" alt="描述文字" width="50%">
<img src="image.jpg" alt="描述文字" style="width: 300px; height: auto;">
<img src="image.jpg" alt="描述文字" style="max-width: 100%; height: auto;">
<!-- 推荐 -->
<img src="image.jpg" alt="描述文字" style="zoom:80%;" />

<!-- 居中对齐 -->
<div align="center">
<img src="image.jpg" alt="居中图片" width="400">
</div>

<!-- 左对齐(默认) -->
<img src="image.jpg" alt="左对齐图片" style="float: left; margin-right: 20px;">

<!-- 右对齐 -->
<img src="image.jpg" alt="右对齐图片" style="float: right; margin-left: 20px;">

参考链接

  1. Markdown 教程 | 菜鸟教程