這一頁把 MDViewer 能算繪的東西全部示範一遍。你可以把它當作算繪能力自我檢查表——每個區塊都應該顯示為排版後的效果，而不是原始符號。
提示
把這個檔案下載到本機，用首頁的閱讀器開啟，會得到完全一致的算繪結果。
一、文字與行內格式#
一般段落文字。粗體、斜體、粗斜體、刪除線、底線插入、標示、行內程式碼。
數學下標與上標：H2O、E = mc2、第 42nd 項。
行內連結 CommonMark 規範
、自動連結 https://developer.mozilla.org/
、站內連結
。
縮寫會在停留時顯示全稱：HTML 與 CSS 都是前端基礎。
*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets
表情符號：🚀 ✨ 📚 ✅ ⚠️
強制換行在行尾加兩個空白：
這一行與上一行同屬一個段落。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
一般段落文字。**粗體**、*斜體*、***粗斜體***、~~刪除線~~、++底線插入++、==標示==、`行內程式碼`。
數學下標與上標：H~2~O、E = mc^2^、第 42^nd^ 項。
行內連結 [CommonMark 規範](https://commonmark.org/)、自動連結 <https://developer.mozilla.org/>、[站內連結](../quick-start/)。
縮寫會在停留時顯示全稱：HTML 與 CSS 都是前端基礎。
*[HTML]: HyperText Markup Language
*[CSS]: Cascading Style Sheets
表情符號：:rocket: :sparkles: :books: :white_check_mark: :warning:
強制換行在行尾加兩個空白：
這一行與上一行同屬一個段落。
|
二、標題層級#
標題會自動產生錨點，右側目錄可跳轉，滑鼠停留時標題末尾會出現 # 連結。
三級標題#
四級標題#
五級標題#
六級標題#
三、清單#
項目符號清單#
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
|
- 第一項
- 第二項
- 巢狀第二層
- 巢狀第三層
- 第三項
|
編號清單#
- 準備內容
- 用 Markdown 寫作
- 起草內文
- 邊寫邊預覽
- 發布出去
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
|
1. 準備內容
2. 用 Markdown 寫作
1. 起草內文
2. 邊寫邊預覽
3. 發布出去
|
待辦清單#
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
|
- [x] 支援 GFM 待辦清單
- [x] 已完成項顯示刪除線
- [ ] 未完成項
- [ ] 支援巢狀
- [x] 子項也可勾選
- [ ] 子項未完成
|
定義清單#
- Mermaid
- 用純文字描述圖表的語法，可算繪成流程圖、時序圖等。
- Markdown
- 一種輕量級標記語言，用純文字表達排版結構。
- KaTeX
- 在瀏覽器裡算繪 TeX 公式的排版函式庫，以速度見長。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
7
8
|
Mermaid
: 用純文字描述圖表的語法，可算繪成流程圖、時序圖等。
Markdown
: 一種輕量級標記語言，用純文字表達排版結構。
KaTeX
: 在瀏覽器裡算繪 TeX 公式的排版函式庫，以速度見長。
|
四、引用與警示區塊#
一般引用區塊。引用可以包含行內格式、程式碼，以及多個段落。
這是引用中的第二段。
巢狀引用。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
|
> 一般引用區塊。引用可以包含**行內格式**、`程式碼`，以及多個段落。
>
> 這是引用中的第二段。
>
> > 巢狀引用。
|
GitHub 風格的警示區塊會算繪成帶圖示的彩色卡片：
提示
一條能讓你更省事的建議。例如：按 ? 可以查看全部快速鍵。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
> [!NOTE]
> 用於補充說明的一般性資訊，不影響主流程。
> [!TIP]
> 一條能讓你更省事的建議。例如：按 <kbd>?</kbd> 可以查看全部快速鍵。
> [!IMPORTANT]
> 完成任務所必需的關鍵資訊，略過會導致失敗。
> [!WARNING]
> 需要立即注意的內容，忽略可能帶來負面後果。
> [!CAUTION]
> 有風險的操作，執行前請確認你清楚後果。
|
五、程式碼#
行內與圍籬程式碼#
安裝指令是 npm install，設定檔是 package.json。
1
2
3
4
5
|
# 找出目錄下所有 Markdown 檔案
find . -name "*.md" -not -path "./node_modules/*"
# 彙總總字數
wc -w $(find . -name "*.md") | tail -1
|
多語言標示#
1
2
3
4
5
6
7
8
|
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({ html: true, linkify: true });
export function render(source) {
const { data, content } = parseFrontMatter(source);
return { meta: data, html: md.render(content) };
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
from dataclasses import dataclass
@dataclass
class Document:
path: str
words: int
@property
def minutes(self) -> int:
"""按每分鐘 450 字估算中文閱讀時間。"""
return max(1, round(self.words / 450))
docs = [Document("readme.md", 1280), Document("guide.md", 3400)]
print(sum(d.minutes for d in docs), "分鐘")
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
package main
import (
"fmt"
"strings"
)
func Slugify(title string) string {
return strings.ToLower(strings.ReplaceAll(title, " ", "-"))
}
func main() {
fmt.Println(Slugify("Hello Markdown World"))
}
|
1
2
3
4
5
6
7
8
9
10
11
|
#[derive(Debug, Clone)]
pub struct Heading {
pub level: u8,
pub text: String,
}
impl Heading {
pub fn anchor(&self) -> String {
self.text.to_lowercase().replace(' ', "-")
}
}
|
1
2
3
4
5
6
7
8
9
10
|
SELECT d.path,
COUNT(h.id) AS heading_count,
SUM(d.words) AS total_words
FROM documents AS d
LEFT JOIN headings AS h ON h.doc_id = d.id
WHERE d.updated_at >= '2026-01-01'
GROUP BY d.path
HAVING COUNT(h.id) > 3
ORDER BY total_words DESC
LIMIT 20;
|
1
2
3
4
5
6
7
8
|
markup:
goldmark:
extensions:
passthrough:
enable: true
delimiters:
block: [["\\[", "\\]"], ["$$", "$$"]]
inline: [["\\(", "\\)"], ["$", "$"]]
|
1
2
3
4
5
|
function render(source) {
- return marked(source);
+ const { data, content } = parseFrontMatter(source);
+ return md.render(content);
}
|
程式碼區塊右上角提供複製、行號開關、自動換行按鈕；超過 24 行會自動摺疊。
六、表格#
支援對齊語法，標題列可點擊排序，超寬時橫向捲動。
| 功能 |
引擎 |
體積 |
載入方式 |
| Markdown 解析 |
markdown-it |
505 KB |
首屏載入 |
| 語法標示 |
highlight.js |
含在主套件 |
首屏載入 |
| 數學公式 |
KaTeX |
261 KB |
按需載入 |
| 圖表 |
Mermaid |
3.3 MB |
按需載入 |
| 全文搜尋 |
Fuse.js |
含在主套件 |
首屏載入 |
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
7
|
| 功能 | 引擎 | 體積 | 載入方式 |
|:-----|:----:|-----:|:---------|
| Markdown 解析 | markdown-it | 505 KB | 首屏載入 |
| 語法標示 | highlight.js | 含在主套件 | 首屏載入 |
| 數學公式 | KaTeX | 261 KB | 按需載入 |
| 圖表 | Mermaid | 3.3 MB | 按需載入 |
| 全文搜尋 | Fuse.js | 含在主套件 | 首屏載入 |
|
靠左 / 置中 / 靠右分別由 :---、:---:、---: 控制。
含複雜內容的表格#
| 語法 |
寫法 |
效果 |
| 粗體 |
**文字** |
文字 |
| 程式碼 |
`code` |
code |
| 公式 |
$a^2+b^2$ |
$a^2+b^2$ |
| 連結 |
[名稱](url) |
名稱
|
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
|
| 語法 | 寫法 | 效果 |
|------|------|------|
| 粗體 | `**文字**` | **文字** |
| 程式碼 | `` `code` `` | `code` |
| 公式 | `$a^2+b^2$` | $a^2+b^2$ |
| 連結 | `[名稱](url)` | [名稱](https://example.com) |
|
七、數學公式#
行內公式#
質能方程式 $E = mc^2$ 與尤拉恆等式 $e^{i\pi} + 1 = 0$ 都可以直接寫在句子裡。當 $n \to \infty$ 時，$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
|
質能方程式 $E = mc^2$ 與尤拉恆等式 $e^{i\pi} + 1 = 0$ 都可以直接寫在句子裡。當 $n \to \infty$ 時，$\sum_{k=1}^{n} \frac{1}{k^2} \to \frac{\pi^2}{6}$。
|
區塊公式#
$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$
$$
A = \begin{pmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \cdots & a_{mn}
\end{pmatrix}
$$多行對齊#
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$分段函數與積分#
$$
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \\
-x^2 & \text{if } x < 0
\end{cases}
\qquad
\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi}\, dx
$$八、圖表（Mermaid）#
圖表會跟著明暗主題自動換色，停留時右上角可複製原始碼或下載 SVG。
流程圖#
時序圖#
類別圖#
狀態圖#
實體關聯圖#
甘特圖#
圓餅圖#
使用者旅程圖#
心智圖#
Git 分支圖#
九、摺疊區塊#
點擊展開：為什麼圖表引擎要按需載入？
Mermaid 打包後約 3.3 MB，是整個專案裡最大的相依套件。如果放進首屏主套件，即使一篇文件裡沒有任何圖表，使用者也得先下載它。
因此 MDViewer 把 Mermaid 和 KaTeX 拆成獨立的 ES 模組，只有當頁面中真的出現 mermaid 程式碼區塊或數學公式時，才透過動態 import() 取得。對於純文字文件，首屏只需載入約 505 KB 的主套件。
點擊展開：支援哪些 Front Matter 格式？
三種都支援，閱讀器會自動辨識並在文件標題下方以摺疊卡片顯示：
- YAML：以
--- 包住，最常用
- TOML：以
+++ 包住
- JSON：以
{ } 包住
title、description、date、author、tags 等欄位會被擷取到文件頂部單獨呈現。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<details>
<summary>點擊展開：為什麼圖表引擎要按需載入？</summary>
Mermaid 打包後約 3.3 MB，是整個專案裡最大的相依套件。如果放進首屏主套件，即使一篇文件裡沒有任何圖表，使用者也得先下載它。
因此 MDViewer 把 Mermaid 和 KaTeX 拆成獨立的 ES 模組，只有當頁面中真的出現 `mermaid` 程式碼區塊或數學公式時，才透過動態 `import()` 取得。對於純文字文件，首屏只需載入約 505 KB 的主套件。
</details>
<details>
<summary>點擊展開：支援哪些 Front Matter 格式？</summary>
三種都支援，閱讀器會自動辨識並在文件標題下方以摺疊卡片顯示：
- **YAML**：以 `---` 包住，最常用
- **TOML**：以 `+++` 包住
- **JSON**：以 `{ }` 包住
`title`、`description`、`date`、`author`、`tags` 等欄位會被擷取到文件頂部單獨呈現。
</details>
|
十、註腳#
Markdown 誕生於 2004 年，用來在純文字檔案裡寫帶格式的內容。如今大多數工具遵循 CommonMark 規範，並在其上疊加 GitHub 風格擴充。
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
|
Markdown 誕生於 2004 年[^origin]，用來在純文字檔案裡寫帶格式的內容。如今大多數工具遵循 CommonMark 規範[^spec]，並在其上疊加 GitHub 風格擴充[^gfm]。
[^origin]: 由 John Gruber 與 Aaron Swartz 共同設計，目標是讓文字在算繪之前就已經好讀。
[^spec]: 2014 年發布的精確規範，消除了原始描述裡大量的歧義。
[^gfm]: 增加了表格、任務清單、刪除線與自動連結，也就是今天大多數人預設的那套語法。
|
十一、圖片#
圖片支援點擊放大、滾輪縮放與拖曳平移。帶標題的圖片會算繪為置中的圖說。
三欄配置：左側檔案樹、中間內文、右側大綱
十二、原始 HTML#
Markdown 中可以直接寫 HTML，會原樣算繪：
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
6
|
<div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
<span class="badge">徽章元件</span>
<span class="badge">直接寫 HTML</span>
<kbd>Ctrl</kbd> + <kbd>K</kbd>
<progress value="72" max="100" style="width:8rem"></progress>
</div>
|
十三、逸出與特殊字元#
反斜線逸出：*不是斜體*、`不是程式碼`、# 不是標題。
HTML 實體：© — … → ≤ ≠
中文標點與西文混排：「引號」、《書名號》、破折號——以及刪節號……
顯示 Markdown 原始碼
隱藏 Markdown 原始碼
1
2
3
4
5
|
反斜線逸出：\*不是斜體\*、\`不是程式碼\`、\# 不是標題。
HTML 實體：© — … → ≤ ≠
中文標點與西文混排：「引號」、《書名號》、破折號——以及刪節號……
|
算繪自我檢查清單#
如果下面每一項都符合預期，表示算繪流程完全正常：