mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
263 lines
6.5 KiB
Markdown
263 lines
6.5 KiB
Markdown
---
|
||
title: Markdown 樣式指南
|
||
published: 2025-03-08
|
||
updated: 2025-03-23
|
||
tags:
|
||
- 指南
|
||
pin: 98
|
||
toc: false
|
||
lang: zh-tw
|
||
abbrlink: markdown-style-guide
|
||
---
|
||
|
||
以下是一些基本的 Markdown 語法示例，及其在 Retypeset 主題中的樣式效果。
|
||
|
||
## 標題
|
||
|
||
在文字前添加井號 `#` 與空格，即可創建標題。井號數量對應標題等級。
|
||
|
||
### 語法
|
||
|
||
```
|
||
# 一級標題
|
||
## 二級標題
|
||
### 三級標題
|
||
#### 四級標題
|
||
##### 五級標題
|
||
###### 六級標題
|
||
```
|
||
|
||
### 效果
|
||
|
||
# 一級標題
|
||
## 二級標題
|
||
### 三級標題
|
||
#### 四級標題
|
||
##### 五級標題
|
||
###### 六級標題
|
||
|
||
## 段落
|
||
|
||
使用空行分隔文字，即可創建段落。
|
||
|
||
### 語法
|
||
|
||
```
|
||
孔乙己一到店，所有喝酒的人便都看著他笑，有的叫道："孔乙己，你臉上又添上新傷疤了！"他不回答，對櫃裡說："溫兩碗酒，要一碟茴香豆。"便排出九文大錢。他們又故意的高聲嚷道："你一定又偷了人家的東西了！"孔乙己睜大眼睛說："你怎麼這樣憑空污人清白……""什麼清白？我前天親眼見你偷了何家的書，吊著打。"孔乙己便漲紅了臉，額上的青筋條條綻出，爭辯道："竊書不能算偷……竊書！……讀書人的事，能算偷麼？"接連便是難懂的話，什麼"君子固窮"，什麼"者乎"之類，引得眾人都哄笑起來：店內外充滿了快活的空氣。
|
||
|
||
聽人家背地裡談論，孔乙己原來也讀過書，但終於沒有進學，又不會營生；於是愈過愈窮，弄到將要討飯了。
|
||
```
|
||
|
||
### 效果
|
||
|
||
孔乙己一到店，所有喝酒的人便都看著他笑，有的叫道："孔乙己，你臉上又添上新傷疤了！"他不回答，對櫃裡說："溫兩碗酒，要一碟茴香豆。"便排出九文大錢。他們又故意的高聲嚷道："你一定又偷了人家的東西了！"孔乙己睜大眼睛說："你怎麼這樣憑空污人清白……""什麼清白？我前天親眼見你偷了何家的書，吊著打。"孔乙己便漲紅了臉，額上的青筋條條綻出，爭辯道："竊書不能算偷……竊書！……讀書人的事，能算偷麼？"接連便是難懂的話，什麼"君子固窮"，什麼"者乎"之類，引得眾人都哄笑起來：店內外充滿了快活的空氣。
|
||
|
||
聽人家背地裡談論，孔乙己原來也讀過書，但終於沒有進學，又不會營生；於是愈過愈窮，弄到將要討飯了。
|
||
|
||
## 圖片
|
||
|
||
使用感嘆號 `!` 方括號 `[]` 與圓括號 `()`，即可添加圖片。這些符號都是英文半形符號，而非中文全形符號。
|
||
|
||
### 語法
|
||
|
||
```
|
||
|
||
|
||
|
||
```
|
||
|
||
### 效果
|
||
|
||
|
||
|
||
## 區塊引用
|
||
|
||
在段落前添加 `>` 符號和空格，即可創建區塊引用。在段落間的空行添加 `>` 符號，即可包含多個段落。若需標註引用來源，可使用 `<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-TW">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>HTML5 示例文檔</title>
|
||
</head>
|
||
<body>
|
||
<p>測試</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
````
|
||
|
||
### 效果
|
||
|
||
```html
|
||
<!doctype html>
|
||
<html lang="zh-TW">
|
||
<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>` 高亮。
|
||
|
||
### 語法
|
||
|
||
```html
|
||
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>晝伏夜出，以昆蟲、蠕蟲等小生物為食。
|