1 / 22

🌐

Part 05 Unit 01

HTML 轉換與樣式

將 Markdown 轉成美觀的網頁

加入 CSS 樣式讓文件更專業

2 / 22

學習目標

完成本單元後，你將學會：

使用 Pandoc 轉換 HTML
加入自訂 CSS 樣式
嵌入樣式與外連樣式
建立專業的網頁文件

3 / 22

基本 HTML 轉換

最簡單的轉換指令

pandoc input.md -o output.html

⚠️ 這只會產生 HTML 片段，不是完整網頁！

產生完整 HTML 文件

pandoc input.md -o output.html --standalone

💡 --standalone 會加入 <html>、<head>、<body> 標籤

4 / 22

片段 vs 完整文件

片段（無 --standalone）

<h1>標題</h1>
<p>內容...</p>
                    

完整（有 --standalone）

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <h1>標題</h1>
  <p>內容...</p>
</body>
</html>
                    

5 / 22

加入文件標題

使用 --metadata 設定標題

pandoc input.md -o output.html --standalone --metadata title="我的文件"

或在 Markdown 開頭使用 YAML

---
title: 我的文件
author: 作者名稱
date: 2025-01-01
---

# 正文開始

6 / 22

為什麼需要 CSS？

無樣式

標題

這是段落文字，看起來很普通...

有樣式

標題

這是段落文字，看起來專業多了！

7 / 22

步驟 1：建立 CSS 檔案

在 Antigravity 中新增 style.css

/* style.css - 自訂樣式 */

body {
    font-family: 'Microsoft JhengHei', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    line-height: 1.8;
    color: #333;
}

h1, h2, h3 {
    color: #11998e;
}

h1 {
    border-bottom: 3px solid #11998e;
    padding-bottom: 10px;
}

code {
    background: #f4f4f4;
    padding: 2px 8px;
    border-radius: 4px;
}

8 / 22

步驟 2：套用 CSS 檔案

使用 --css 參數

pandoc input.md -o output.html --standalone --css=style.css

💡 這會在 HTML 中加入：

⚠️ CSS 檔案需要和 HTML 放在同一個資料夾！

9 / 22

嵌入 CSS（單一檔案）

使用 --embed-resources 將 CSS 嵌入 HTML

pandoc input.md -o output.html --standalone --css=style.css --embed-resources

優點：

只需要一個 HTML 檔案
方便分享和攜帶
不用擔心檔案路徑

10 / 22

使用網路 CSS 框架

套用 GitHub 風格樣式

pandoc input.md -o output.html --standalone --css=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css

其他熱門 CSS 框架

框架	風格
github-markdown-css	GitHub 風格
water.css	極簡風格
pico.css	現代簡潔

11 / 22

進階 CSS 樣式

/* 進階樣式範例 */

/* 程式碼區塊 */
pre {
    background: #1a202c;
    color: #68d391;
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto;
}

/* 表格美化 */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: #11998e;
    color: white;
    padding: 12px;
}

td {
    border: 1px solid #ddd;
    padding: 12px;
}

/* 引用區塊 */
blockquote {
    border-left: 4px solid #11998e;
    padding-left: 20px;
    color: #666;
    font-style: italic;
}

12 / 22

加入目錄（TOC）

自動產生目錄

pandoc input.md -o output.html --standalone --toc --css=style.css

設定目錄深度

# 只顯示到 h2
pandoc input.md -o output.html --standalone --toc --toc-depth=2

💡 TOC = Table of Contents（目錄）

13 / 22

目錄樣式

/* 美化目錄 */

#TOC {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

#TOC ul {
    list-style: none;
    padding-left: 20px;
}

#TOC a {
    color: #11998e;
    text-decoration: none;
}

#TOC a:hover {
    text-decoration: underline;
}

14 / 22

語法高亮

Pandoc 內建程式碼高亮

# 使用預設高亮樣式
pandoc input.md -o output.html --standalone --highlight-style=pygments

# 其他可用樣式
--highlight-style=kate
--highlight-style=monochrome
--highlight-style=breezeDark
--highlight-style=tango

💡 在 Markdown 中使用 ```python 等標記指定語言

15 / 22

完整指令範例

專業 HTML 文件轉換

pandoc input.md -o output.html `
    --standalone `
    --css=style.css `
    --toc `
    --toc-depth=3 `
    --highlight-style=pygments `
    --metadata title="我的技術文件" `
    --embed-resources

💡 這會產生一個完整、美觀、獨立的 HTML 文件

16 / 22

數學公式支援

使用 MathJax 渲染數學公式

pandoc input.md -o output.html --standalone --mathjax

在 Markdown 中寫公式

# 行內公式
這是行內公式 $E = mc^2$

# 區塊公式
$$
\int_{a}^{b} f(x) dx = F(b) - F(a)
$$

17 / 22

批次轉換 HTML

PowerShell 腳本

# 批次轉換為美觀的 HTML
$css = "style.css"

Get-ChildItem *.md | ForEach-Object {
    $output = $_.BaseName + ".html"
    pandoc $_.Name -o $output `
        --standalone `
        --css=$css `
        --toc `
        --embed-resources
    Write-Host "✅ $($_.Name) → $output"
}

18 / 22

常見問題

問題	解決方法
中文亂碼	確保檔案為 UTF-8 編碼
CSS 沒套用	檢查檔案路徑是否正確
圖片沒顯示	使用 --embed-resources 嵌入
樣式很醜	確認使用了 --standalone

19 / 22

動手練習

練習任務

建立一個 Markdown 檔案，包含標題、段落、程式碼
建立 style.css 自訂樣式
轉換成 HTML 並套用樣式
加入目錄功能

20 / 22

練習答案

🔒 輸入密碼查看答案

# 1. 建立 test.md
# 2. 建立 style.css（參考前面範例）
# 3. 執行轉換

pandoc test.md -o test.html `
    --standalone `
    --css=style.css `
    --toc `
    --embed-resources

# 4. 開啟 test.html 確認結果

21 / 22

HTML 轉換參數速查

參數	說明
`--standalone`	產生完整 HTML 文件
`--css=file.css`	套用 CSS 樣式
`--toc`	加入目錄
`--embed-resources`	嵌入所有資源
`--highlight-style`	程式碼高亮樣式
`--mathjax`	數學公式支援

22 / 22

本單元總結

                你學會了：
                使用 --standalone 產生完整 HTML
建立和套用 CSS 樣式
加入目錄和程式碼高亮
嵌入資源產生單一檔案

            

下一單元：PDF 輸出設定 📄