中文閱讀時間
長文章目錄
H1～H4 標題完整展示
引用區塊
列表
連結與腳註
文章排版與文字效果
程式碼區塊
- 語言標籤
- 標題、行號與標記
折疊區塊
圖片圖說與載入預覽
表格對齊
公式區塊
腳註與懸停預覽
GitHub 倉庫卡片
嵌入影片 (Video)
聊天 / 對話（Chat Directive）
提示框（Admonitions）
詩詞卡片（Poem Card）
- 語法與範例

中文閱讀時間#

文章的字數與預估閱讀時間會在建置時自動產生，不必在 frontmatter 手動填寫。中文、日文、韓文會逐字計算，英文及其他西文則以連續單字計算；目前以每分鐘 550 字 估算，較符合中文文章的閱讀節奏。

1
---
2
title: 我的文章
3
# 不需要手動填寫 words 或 minutes
4
---

長文章目錄#

側欄與行動版浮動目錄會將三級標題預設收起。閱讀或點擊某個二級標題後，只會展開該章節底下的三級標題；切換到下一個章節時，前一章會自動收回，讓長文章的目錄保持精簡。展開與收合會以高度、淡入淡出與微位移過場呈現。目錄會沿閱讀線逐一切換目前項目，並以主題色與較粗文字加強高亮；從目錄跳到標題時，標題會停在閱讀線附近、保留上方空間，避免緊接著的下一章過早收起目前的小節。

1
## 第一章
2

3
### 第一章的小節
4

5
### 另一個小節
6

7
## 第二章
8

9
### 第二章的小節

H1 一級標題展示¹#

H2 二級標題展示#

H3 三級標題展示#

H4 四級標題展示#

這一段按照參考文章完整陳列標題、段落、引用、清單、連結、腳註、表格、公式與程式碼。每個效果後面都保留可直接複製的 Markdown 寫法。

English remains italic，而中文會顯示著重點，也能使用粗體主題色、行內程式碼與~~滑過後才看清楚的刪除線~~。

1
# H1 一級標題
2
## H2 二級標題
3
### H3 三級標題
4
#### H4 四級標題

引用區塊#

引用塊不只可以放一段文字，也能繼續放 HTML 對齊、巢狀清單與程式碼。

「這是一段置中的引用內容。」

——引用來源

陳述持續時間：約 4 秒

有效資訊字數：11 字

引用裡仍然能放一般段落。

也能放第二層清單；

每一層仍保有引用樣式。
1
<p style="text-align: center; font-family: MingxinKaishu, serif; font-size: clamp(24px, 3vw, 30px) !important; line-height: 1.7 !important; letter-spacing: 0.08em;">
2
  「這是一段置中的引用內容。」
3
</p>
4
<p style="text-align: right; font-family: MingxinKaishu, serif; font-size: clamp(19px, 2.3vw, 23px) !important; line-height: 1.7 !important; letter-spacing: 0.08em;">
5
  ——引用來源
6
</p>

1
> <p style="text-align: center; font-family: MingxinKaishu, serif; font-size: clamp(24px, 3vw, 30px) !important; line-height: 1.7 !important; letter-spacing: 0.08em;">「置中的引用內容」</p>
2
> <p style="text-align: right; font-family: MingxinKaishu, serif; font-size: clamp(19px, 2.3vw, 23px) !important; line-height: 1.7 !important; letter-spacing: 0.08em;">——引用來源</p>
3
>
4
> - 引用裡的清單
5
>   - 第二層清單
6
>
7
> ```html
8
> <p>引用裡的程式碼</p>
9
> ```

列表#

無序清單、編號清單、巢狀清單與縮排程式碼可以混合使用：

第一項物證
第二項物證
第三項物證
第四項物證

封存現場並收集初步資料：
- 第一層子項目
- 另一個子項目
- 更深入的步驟
  - 第三層也能正常顯示
整理所有紀錄並歸檔。

對資料進行技術分析：

1
這是以四個以上空格縮排的程式碼
2
每一行都會保留原始格式
3
不必另外加程式碼圍欄

縮排程式碼結束後，可以回到同一個編號項目繼續寫段落。

1
- 無序清單
2
  - 第二層
3
    - 第三層
4

5
1. 編號清單
6
2. 第二個步驟：
7

8
       這是縮排程式碼

連結與腳註#

1
關鍵腳註 [^evidence]
2
[^evidence]: 腳註的完整內容……

這裡同時展示網站首頁、外部網站、跳回「引用塊」章節的錨點，以及一處關鍵腳註²。

以下表格同時展示文字對齊、行內程式碼，以及表頭裡的腳註：

證據項目	說明³	可信指數
紀錄 A	靠左文字	`87.30%`
紀錄 B	置中文字	`62.14%`
紀錄 C	內容較長時也會維持本站圓角與換行	`11.40%`

1
[外部網站](https://www.astro.build/)
2
[站內連結](/about/)
3
[跳到文章章節](#引用塊--證詞筆錄)
4

5
這是一處腳註[^example]。
6

7
[^example]: 腳註內容。
8

9
| 靠左 | 置中 | 靠右 |
10
| :--- | :--: | ---: |
11
| A | B | `87.30%` |

文章排版與文字效果#

標題、粗體與底線#

文章標題會使用更明顯的主題色；一級標題另有手繪感色帶，二級標題左側則有主題色標記。將滑鼠移到標題上時，標題尾端只會顯示一個可複製段落連結的 #。本文中的標題就是實際效果。

粗體文字會使用主題色強調，文章連結則使用較低調的底線效果，滑過時會顯示背景色。

Markdown 本身沒有專用的底線語法；需要一般底線時，可直接使用 HTML：這是一段底線文字。

1
**粗體文字**
2

3
[帶底線的文章連結](https://illumi.love/)
4

5
<u>一般底線文字</u>

中文著重點與西文斜體#

使用 *文字* 或 _文字_ 時，中文會顯示逐字著重點，而 English text remains italic。同一段混合文字也會自動分開處理：中文 emphasis and English。

1
*中文會顯示逐字著重點*
2

3
*English text remains italic*

刪除線隱藏效果#

刪除線預設會模糊內容，將滑鼠移到文字上就能看清楚：~~這是一段暫時隱藏的補充內容~~。

1
~~這是一段暫時隱藏的補充內容~~

程式碼區塊#

語言標籤#

一般程式碼圍欄會顯示語言標籤與複製按鈕：

1
console.log("系統已啟動，開始讀取 Markdown");

標題、行號與標記#

加上 title 後會顯示檔名標題列：

1
console.log("首次異常記錄時間：2026-08-04T00:00:00");

終端語言也會使用對應的視窗樣式：

1
echo "正在建立文章預覽，請稍候..."

常用的程式碼圍欄屬性如下：

寫法	用途
`title="檔名.js"`	顯示檔名標題列
`showLineNumbers`	顯示行號
`startLineNumber=42`	從指定行號開始
`{1,4,7-8}`	反白整行或範圍
`"關鍵字"`	反白所有相同文字
`/正規表達式/`	依規則反白文字
`ins="新增" del="刪除"`	標示新增與刪除字串
`frame="none"`	隱藏程式碼視窗外框
`collapse={1-5}`	預設收合指定行

完整進階代碼展示：行標記、Diff、折疊、行號與系統日誌

刪除與插入行標記

1
function renderArticle(source) {
2
  return renderLegacy(source);
3
  const parsed = parseMarkdown(source);
4
  return renderEnhanced(parsed);
5
}

1
```js title="markdown-renderer.js" del={2} ins={3-4}
2
// 程式碼內容
3
```

帶標籤的多組行標記

1
<ArticlePreview
2
  title="Markdown 完整展示"
3
  theme="Illumi"
4
  rounded
5
  status="ready"
6
>
7
  <TableOfContents />
8
  <MarkdownContent />
9
</ArticlePreview>

1
```jsx {"1":5} del={"2":7-8} ins={"3":10-12}
2
// 程式碼內容
3
```

Diff 語法與 JavaScript 高亮組合

1
function renderMarkdown(source) {
2
  return renderLegacy(source);
3
  // 舊版只處理基本語法
4
  return renderEnhanced(source);
5
  // 新版支援完整展示元件
6
}

1
```diff lang="js"
2
// 使用 - 與 + 標示刪除、插入內容
3
```

可折疊程式碼段


5 collapsed lines
1
// 以下初始化內容預設折疊
2
import { parse } from "markdown-parser";
3
import { render } from "article-renderer";
4
import { enhance } from "./enhance.js";
5

6
const article = enhance(parse(source));
7

8
// 核心內容預設展開
9
render(article);
10
console.log("文章已完成渲染");
11

3 collapsed lines
12
function cleanup() {
13
  clearCache();
14
  closeWorkers();
15
  console.log("清理完成");
16
}
17

18
// 這一行保持可見
19
console.log("目前狀態：READY");
20

4 collapsed lines
21
// 以下收尾流程預設折疊
22
cleanup();
23
saveBuildInfo();
24
publishPreview();

1
```js collapse={1-5, 12-14, 21-24}
2
// 程式碼內容
3
```

指定起始行號

42
const preview = buildPreview("Markdown 完整展示");
43
console.log("預覽已建立");

1
```js showLineNumbers startLineNumber=42
2
// 程式碼內容
3
```

檔名註解

1
<div class="article-preview">Markdown 完整展示</div>

PowerShell 終端視窗

1
Write-Output "正在產生 Markdown 展示頁，請勿關閉視窗"

無外框模式

1
pnpm check

1
```sh frame="none"
2
pnpm check
3
```

整行與範圍反白

1
// 第 1 行會反白
2
const title = "Markdown 完整展示";
3
const category = "教學";
4
const renderer = "Astro"; // 第 4 行會反白
5
const theme = "Illumi";
6
const status = "ready";
7
const preview = true;     // 第 7 行開始
8
const published = true;   // 第 8 行結束

1
```js {1,4,7-8}
2
// 程式碼內容
3
```

關鍵字標記

1
// 所有「Markdown」都會反白
2
const title = "Markdown 完整展示";
3
return title.includes("Markdown");

1
```js "Markdown"
2
// 程式碼內容
3
```

正規表達式標記

1
// 符合 Markdown 或 Astro 的文字都會標記
2
const article = "Markdown";
3
const renderer = "Astro";
4
const theme = "Illumi";

1
```ts /Markdown|Astro/
2
// 程式碼內容
3
```

行內插入與刪除標記

1
function getArticleLabel() {
2
  const oldLabel = "Markdown 基本展示";
3
  const newLabel = "Markdown 完整展示";
4
  return newLabel;
5
}

1
```js "Markdown" ins="完整展示" del="基本展示"
2
// 程式碼內容
3
```

長文字自動換行

1
const description = "這是一段刻意寫得很長的文字，用來確認程式碼容器較窄時會自動換行，而不會撐破文章寬度或破壞圓角外框。";

折疊區塊#

使用 :::fold 可以收納補充說明、劇透或較長的程式碼。展開後除了再次點擊標題，也能點右下角的小三角收起並回到折疊框的位置。

點我查看折疊內容

折疊區塊內可以繼續使用 Markdown。

支援清單
支援圖片與連結
也支援程式碼區塊

1
console.log("折疊內容已展開");

1
:::fold{summary="點我查看折疊內容"}
2
折疊區塊內可以繼續使用 **Markdown**。
3
:::

圖片圖說與載入預覽#

使用標準圖片語法時，[] 裡的 Alt 文字會自動顯示成圖片下方的圖說。圖片同時會有細邊框，避免白色或透明圖片與文章背景混在一起。

1
![這段文字會顯示在圖片下方](./images/example.webp)

以相對路徑引用的本地圖片，建置時還會自動產生低畫質預覽（LQIP）；原圖載入完成後，模糊預覽會淡出。遠端圖片不會在建置時下載，因此不產生 LQIP。

若圖片只作裝飾、不想顯示圖說，請將 Alt 留空：

1
![](./images/decoration.webp)

表格對齊#

分隔列兩側的冒號可控制欄位靠左、置中或靠右；手機版會縮小間距並自動換行。

靠左	置中	靠右
標題	Markdown	2026
圖片	自動圖說	100%

1
| 靠左 | 置中 | 靠右 |
2
| :--- | :--: | ---: |
3
| 標題 | Markdown | 2026 |

公式區塊#

行內公式使用單個 $ 包住，例如圓周率 $\pi \approx 3.14159$ 。獨立公式使用 $$ 包住，適合較長的推導或計算結果：

\begin{aligned} P(A \mid B) &= \frac{P(B \mid A) \cdot P(A)}{P(B)} \\ E &= mc^2 \end{aligned}

也能連續放置另一組獨立公式：

\text{Score} = \sum_{i=1}^{n} w_i \cdot e_i \div K

1
行內公式：$\pi \approx 3.14159$
2

3
$$
4
\begin{aligned}
5
P(A \mid B) &= \frac{P(B \mid A) \cdot P(A)}{P(B)} \\
6
E &= mc^2
7
\end{aligned}
8
$$
9

10
$$
11
\text{Score} = \sum_{i=1}^{n} w_i \cdot e_i \div K
12
$$

腳註與懸停預覽#

腳註會集中顯示在文章底部；桌面版將滑鼠停在角標上，也能直接預覽內容，不必來回跳轉⁴。點擊角標或返回符號時，會用平滑捲動把目標帶到閱讀區中段，並亮起 3 秒。

1
這是一段帶有腳註的文字[^example]。
2

3
[^example]: 腳註內容寫在文章中的任何位置都可以。

GitHub 倉庫卡片#

你可以新增動態的卡片來連結至 GitHub 倉庫，頁面載入時會自動透過 GitHub API 抓取倉庫資訊。

IllumiLove

lockpass

Waiting for api.github.com...

00K

Waiting...

建立 GitHub 倉庫卡片的語法為：::github{repo="<擁有者>/<倉庫名稱>"}

1
::github{repo="IllumiLove/lockpass"}

嵌入影片 (Video)#

你可以新增指定的影片到Markdown，以豐富你的文章。

1
<figure>
2
  <video
3
    controls
4
    preload="metadata"
5
    playsinline
6
    width="50%"
7
    poster="示範影片封面.png">
8
    <source src="示範影片.mp4" type="video/mp4" />
9
    您的瀏覽器不支援影片播放，請改用下載或不同瀏覽器。
10
  </video>
11
  <figcaption>你可以新增指定的影片到Markdown，以豐富你的文章。</figcaption>
12
</figure>

YouTube 嵌入#

1
<iframe
2
  width="100%"
3
  height="468"
4
  src="https://www.youtube.com/embed/影片ID"
5
  title="YouTube video player"
6
  frameborder="0"
7
  allowfullscreen>
8
</iframe>

Bilibili 嵌入#

1
<iframe
2
  width="100%"
3
  height="468"
4
  src="//player.bilibili.com/player.html?bvid=影片BV號&p=1"
5
  scrolling="no"
6
  frameborder="no"
7
  allowfullscreen="true">
8
</iframe>

聊天 / 對話（Chat Directive）#

可以在文章中插入類似通訊軟體的對話紀錄，支援左側 / 右側氣泡與中間時間標記。若頭像圖片載入失敗，不會再顯示替代文字干擾版面。

請把整段對話包在同一個 ::::chat-log 父容器裡（用來統一間距）。
chat 目前支援 side、avatar。
side 可用 left 或 right（預設 left）。

09:20

我之前說過

我願意用我打英雄聯盟的天賦

換一名永不變心的戀人

我發現我打英雄聯盟明顯打不過了

是不是那個女孩要來了

09:23

輸的神智不清了

--:--

1
::::chat-log
2
::chat-time[09:20]
3
:::chat{side="right" avatar="https://img.heliar.top/file/1771866779799_喜洋洋.jpeg"}
4
我之前說過
5
:::
6

7
:::chat{side="right" avatar="https://img.heliar.top/file/1771866779799_喜洋洋.jpeg"}
8
我願意用我打英雄聯盟的天賦
9
:::
10

11
:::chat{side="right" avatar="https://img.heliar.top/file/1771866779799_喜洋洋.jpeg"}
12
換一名永不變心的戀人
13
:::
14

15
:::chat{side="right" avatar="https://img.heliar.top/file/1771866779799_喜洋洋.jpeg"}
16
我發現我打英雄聯盟明顯打不過了
17
:::
18

19
:::chat{side="right" avatar="https://img.heliar.top/file/1771866779799_喜洋洋.jpeg"}
20
是不是那個女孩要來了
21
:::
22

23
::chat-time[09:23]
24

25
:::chat{side="left" avatar="https://img.heliar.top/file/1771866782104_懶洋洋.jpeg"}
26
輸的神智不清了
27
:::
28

29
:::chat{side="left" avatar="https://img.heliar.top/file/1771866782104_懶洋洋.jpeg"}
30
::chat-audio{src="https://v5-hl-szyd-ov.zjcdn.com/69fbf7ed9b121013c280f33ca3af747a/699d73b9/video/tos/cn/tos-cn-ve-15/o8PLqIzaVAvu7LGBcwP4IWhxQNamkJgiQECAi/?a=6383&ch=4&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=569&bt=569&cs=2&ds=4&ft=CZcaELOtDDhNJFVQ9wWdNkShd.vRtwx03-ApQX&mime_type=video_mp4&qs=15&rc=aWloNzc0N2Y1OGYzZzk4aEBpamdob3U5cjRlNTMzNGkzM0BjXi8tMGAuXy8xMjQ2My9eYSNsaGIyMmQ0ZV9hLS1kLS9zcw%3D%3D&btag=c0000e00018000&cquery=101r_100B_100H_100K_100o&dy_q=1771915622&feature_id=757dd2cf707fffcef8d1ad2a3dd536ea&l=202602241447027EE4AA44678A5763E3E3&__vid=7536414297463819559"}
31
:::
32
::::

提示框（Admonitions）#

五種提示塊全部保留參考專案的功能，但外框繼續使用本站圓角。支援 note、tip、important、warning、caution。

基本語法#

1
:::note
2
筆記內容
3
:::
4

5
:::tip
6
提示內容
7
:::
8

9
:::important
10
重要內容
11
:::
12

13
:::warning
14
警告內容
15
:::
16

17
:::caution
18
注意內容
19
:::

NOTE
這是一般補充筆記，適合放即使快速瀏覽也應注意的資訊。

TIP
這是可選建議，用來幫助讀者更順利完成操作。

IMPORTANT
這是完成操作所需的關鍵資訊。

WARNING
這是需要立即注意的警告，繼續操作前應先閱讀。

CAUTION
這是可能帶來負面後果的注意事項。

自訂標題#

1
:::note[自訂標題範例]
2
這是一個自訂標題的提示塊。
3
:::

自訂標題範例
這是一個自訂標題的提示塊，內容仍然支援粗體、連結與 行內程式碼。

GitHub 語法支援#

除了 :::note，也能直接使用 GitHub 的提示語法：

1
> [!NOTE]
2
> 這是 GitHub NOTE 語法。

NOTE
這是 GitHub NOTE 語法。

Spoiler（劇透/隱藏內容）#

Spoiler 適合隱藏答案、劇透或讀者主動點開才需要看到的補充內容。

內容會隱藏起來，裡面仍支援 Markdown！

1
內容會 :spoiler[隱藏起來，裡面仍支援 **Markdown**]！

詩詞卡片（Poem Card）#

語法與範例#

詩詞卡片用來優雅呈現詩詞、語錄或台詞，只要用 :::poem 包住內容即可。字體使用 public/fonts/杨任东楷书.ttf。

基本語法

1
:::poem{title="《劍來》" author="齊靜春"}
2
遇事不決，可問春風。
3

4
春風不語，且隨本心。
5

6
吾若本心如磐，何來遇事不決？
7

8
春風亦有春風愁，
9
不勞春風為我憂。
10
:::

自訂背景：在內容裡寫 bg:圖片網址（外鏈或站內皆可），該行不會顯示，只會當成卡片背景。
亮／暗主題：背景太亮時寫 theme-light（深色字），背景太暗時寫 theme-dark（淺色字）；不寫則跟隨站點亮暗模式。

1
:::poem{title="《劍來》" author="齊靜春"}
2
bg:https://img.heliar.top/file/1773205145048_齐静春.jpg
3
theme-dark
4
遇事不決，可問春風
5

6
春風不語，且隨本心
7

8
吾若本心如磐，何來遇事不決？
9

10
春風亦有春風愁，不勞春風為我憂。
11
:::

實際效果

《劍來》/ 齊靜春

遇事不決，可問春風

春風不語，且隨本心

吾若本心如磐，何來遇事不決？

春風亦有春風愁，不勞春風為我憂。

建議：每一句獨立一行，段落之間保留空行，節奏會更清楚。背景用第一行 bg:URL 即可，不必在屬性裡寫 background。

一級標題同樣支援腳註；正文通常從二級標題開始，這裡是為了完整展示 H1。 ↩︎
這是關鍵腳註的完整內容。桌面版可以把滑鼠停在角標上直接預覽，點擊後則會跳到文章底部的腳註區。 ↩︎
表頭同樣能使用腳註；冒號位置控制靠左、置中與靠右。 ↩︎
這就是腳註的懸停預覽內容，裡面仍可使用 Markdown。 ↩︎

中文閱讀時間#

長文章目錄#

H1 一級標題展示1#

H2 二級標題展示#

H3 三級標題展示#

H4 四級標題展示#

引用區塊#

列表#

連結與腳註#

文章排版與文字效果#

標題、粗體與底線#

中文著重點與西文斜體#

刪除線隱藏效果#

程式碼區塊#

語言標籤#

標題、行號與標記#

折疊區塊#

圖片圖說與載入預覽#

表格對齊#

公式區塊#

腳註與懸停預覽#

GitHub 倉庫卡片#

嵌入影片 (Video)#

YouTube 嵌入#

Bilibili 嵌入#

聊天 / 對話（Chat Directive）#

提示框（Admonitions）#

基本語法#

自訂標題#

GitHub 語法支援#

Spoiler（劇透/隱藏內容）#

詩詞卡片（Poem Card）#

語法與範例#

Footnotes#

H1 一級標題展示¹#