mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 19:51:07 +02:00
272 lines
6.8 KiB
Markdown
272 lines
6.8 KiB
Markdown
---
|
||
title: Markdown 样式指南
|
||
published: 2025-03-08
|
||
updated: 2025-03-23
|
||
tags: ["指南"]
|
||
pin: 1
|
||
toc: false
|
||
lang: zh
|
||
abbrlink: markdown-style-guide
|
||
---
|
||
|
||
以下是一些基本的 Markdown 语法示例，及其在 Retypeset 主题中的样式效果。
|
||
|
||
## 标题
|
||
|
||
在文本前添加井号 `#` 与空格，即可创建标题。井号数量对应标题等级。
|
||
|
||
### 语法
|
||
|
||
```
|
||
# 一级标题
|
||
## 二级标题
|
||
### 三级标题
|
||
#### 四级标题
|
||
##### 五级标题
|
||
###### 六级标题
|
||
```
|
||
|
||
### 效果
|
||
|
||
# 一级标题
|
||
## 二级标题
|
||
### 三级标题
|
||
#### 四级标题
|
||
##### 五级标题
|
||
###### 六级标题
|
||
|
||
## 段落
|
||
|
||
使用空行分隔文本，即可创建段落。
|
||
|
||
### 语法
|
||
|
||
```
|
||
孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道：“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说：“温两碗酒，要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道：“你一定又偷了人家的东西了！”孔乙己睁大眼睛说：“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道：“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。
|
||
|
||
听人家背地里谈论，孔乙己原来也读过书，但终于没有进学，又不会营生；于是愈过愈穷，弄到将要讨饭了。
|
||
```
|
||
|
||
### 效果
|
||
|
||
孔乙己一到店，所有喝酒的人便都看着他笑，有的叫道：“孔乙己，你脸上又添上新伤疤了！”他不回答，对柜里说：“温两碗酒，要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道：“你一定又偷了人家的东西了！”孔乙己睁大眼睛说：“你怎么这样凭空污人清白……”“什么清白？我前天亲眼见你偷了何家的书，吊着打。”孔乙己便涨红了脸，额上的青筋条条绽出，争辩道：“窃书不能算偷……窃书！……读书人的事，能算偷么？”接连便是难懂的话，什么“君子固穷”，什么“者乎”之类，引得众人都哄笑起来：店内外充满了快活的空气。
|
||
|
||
听人家背地里谈论，孔乙己原来也读过书，但终于没有进学，又不会营生；于是愈过愈穷，弄到将要讨饭了。
|
||
|
||
## 图片
|
||
|
||
使用感叹号 `!` 方括号 `[]` 与圆括号 `()`，即可添加图片。这些符号都是英文半角符号，而非中文全角符号。
|
||
|
||
### 语法
|
||
|
||
```markdown
|
||
|
||
```
|
||
|
||
### 效果
|
||
|
||
|
||
|
||
## 块引用
|
||
|
||
在段落前添加 `>` 符号和空格，即可创建块引用。在段落间的空行添加 `>` 符号，即可包含多个段落。若需标注引用来源，可使用 `<cite>` 或 `<footer>` 标签添加文献来源，同时可通过 `[^1]` 或 `[^note]` 格式插入脚注。
|
||
|
||
### 多个段落
|
||
|
||
#### 语法
|
||
|
||
```markdown
|
||
> 天地不仁，以万物为刍狗。
|
||
>
|
||
> **提示**：引用块内可使用 _Markdown 语法_。
|
||
```
|
||
|
||
#### 效果
|
||
|
||
> 天地不仁，以万物为刍狗。
|
||
>
|
||
> **提示**：引用块内可使用 _Markdown 语法_。
|
||
|
||
### 标注引用来源
|
||
|
||
#### 语法
|
||
|
||
```markdown
|
||
> 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
|
||
>
|
||
> —— <cite>《秋夜》[^1]</cite>
|
||
|
||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||
```
|
||
|
||
#### 效果
|
||
|
||
> 在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
|
||
>
|
||
> —— <cite>《秋夜》[^1]</cite>
|
||
|
||
[^1]: [《秋夜》](https://zh.wikisource.org/wiki/%E7%A7%8B%E5%A4%9C_(%E9%AD%AF%E8%BF%85)) 是鲁迅散文诗集《野草》中的第一首散文诗，创作于1924年。
|
||
|
||
## 表格
|
||
|
||
使用三个或多个连字符 `---` 分隔标题，并使用管道符 `|` 分隔每列，即可创建表格。
|
||
|
||
### 语法
|
||
|
||
```markdown
|
||
| 斜体 | 粗体 | 代码 |
|
||
| ----- | ------- | ------ |
|
||
| _斜体_ | **粗体** | `代码` |
|
||
| _斜体_ | **粗体** | `代码` |
|
||
```
|
||
|
||
### 效果
|
||
|
||
| 斜体 | 粗体 | 代码 |
|
||
| ----- | -------- | ----- |
|
||
| _斜体_ | **粗体** | `代码` |
|
||
| _斜体_ | **粗体** | `代码` |
|
||
|
||
## 代码块
|
||
|
||
在代码的顶部与底部添加三个反引号 ```` ``` ````，即可创建代码块。在顶部的反引号后标注语言类型，例如 html、javascript、css、markdown 等，即可实现语法高亮。
|
||
|
||
### 语法
|
||
|
||
````markdown
|
||
```html
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>HTML5 示例文档</title>
|
||
</head>
|
||
<body>
|
||
<p>测试</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
````
|
||
|
||
### 效果
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>HTML5 示例文档</title>
|
||
</head>
|
||
<body>
|
||
<p>测试</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## 列表
|
||
|
||
### 有序列表
|
||
|
||
#### 语法
|
||
|
||
```markdown
|
||
1. 第一项
|
||
2. 第二项
|
||
3. 第三项
|
||
```
|
||
|
||
#### 效果
|
||
|
||
1. 第一项
|
||
2. 第二项
|
||
3. 第三项
|
||
|
||
### 无序列表
|
||
|
||
#### 语法
|
||
|
||
```markdown
|
||
- 列表项
|
||
- 图表项
|
||
- 更多项
|
||
```
|
||
|
||
#### 效果
|
||
|
||
- 列表项
|
||
- 图表项
|
||
- 更多项
|
||
|
||
### 嵌套列表
|
||
|
||
#### 语法
|
||
|
||
```markdown
|
||
- 水果
|
||
- 苹果
|
||
- 橙子
|
||
- 香蕉
|
||
- 蔬菜
|
||
- 青菜
|
||
- 萝卜
|
||
```
|
||
|
||
#### 效果
|
||
|
||
- 水果
|
||
- 苹果
|
||
- 橙子
|
||
- 香蕉
|
||
- 蔬菜
|
||
- 青菜
|
||
- 萝卜
|
||
|
||
## 其他元素
|
||
|
||
包括 `<sup>` 上标，`<sub>` 下标，`<abbr>` 缩写，`<del>` 删除线，`<u>` 波浪线，`<kbd>` 键盘输入，`<mark>` 高亮。
|
||
|
||
### 语法
|
||
|
||
```markdown
|
||
H<sub>2</sub>O
|
||
|
||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||
|
||
<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。
|
||
|
||
书籍是人类进步的<del>楼梯</del>阶梯。
|
||
|
||
优秀的作者总是会仔细检查<u title="拼">拚</u>写错误。
|
||
|
||
按下 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> 以结束会话。
|
||
|
||
大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。
|
||
```
|
||
|
||
### 效果
|
||
|
||
H<sub>2</sub>O
|
||
|
||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||
|
||
<abbr title="Graphics Interchange Format">GIF</abbr> 是一种位图图像格式。
|
||
|
||
书籍是人类进步的<del>楼梯</del>阶梯。
|
||
|
||
优秀的作家总是会仔细检查<u title="拼写">拚写</u>问题。
|
||
|
||
按下 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> 以结束会话。
|
||
|
||
大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。
|
||
|
||
<!-- <details>
|
||
<summary>
|
||
我有钥匙却无门，有空间却无房间。你能进入却无法离开。我是什么？
|
||
</summary>
|
||
键盘。
|
||
</details>
|
||
|
||
<figure>
|
||
<img src="https://image.radishzz.cc/picsmaller/03.webp">
|
||
<figcaption text-center="">Node 模块检查器 - 概览</figcaption>
|
||
</figure> -->
|