markdown-to-html
熱門使用類似 `marked.js`、`pandoc`、`gomarkdown/markdown` 等工具將 Markdown 檔案轉換為 HTML；或是撰寫自訂指令碼將 Markdown 轉為 HTML，以及處理使用 Markdown 文件並將其轉換為 HTML 輸出的網頁範本系統（如 `jekyll/jekyll`、`gohugoio/hugo` 等）。當收到「將 markdown 轉為 html」、「轉換 md 為 html」、「渲染 markdown」、「從 markdown 產生 html」等要求，或是處理 .md 檔案及 Markdown 轉 HTML 的網頁範本系統時使用。支援 GFM、CommonMark 與標準 Markdown 語法，並相容 CLI 和 Node.js 工作流程。
3.6萬星標
0分支
更新於 2026/7/11
SKILL.md
唯讀
名稱
markdown-to-html
描述
使用類似 `marked.js`、`pandoc`、`gomarkdown/markdown` 等工具將 Markdown 檔案轉換為 HTML；或是撰寫自訂指令碼將 Markdown 轉為 HTML，以及處理使用 Markdown 文件並將其轉換為 HTML 輸出的網頁範本系統（如 `jekyll/jekyll`、`gohugoio/hugo` 等）。當收到「將 markdown 轉為 html」、「轉換 md 為 html」、「渲染 markdown」、「從 markdown 產生 html」等要求，或是處理 .md 檔案及 Markdown 轉 HTML 的網頁範本系統時使用。支援 GFM、CommonMark 與標準 Markdown 語法，並相容 CLI 和 Node.js 工作流程。
Markdown 轉 HTML 轉換
使用 marked.js 程式庫將 Markdown 文件轉換為 HTML，或撰寫資料轉換指令碼的專業 Skill；在此情況下，指令碼類似 markedJS/marked 儲存庫。對於自訂指令碼，專業知識不僅限於 marked.js，還包含運用來自 pandoc 與 gomarkdown/markdown 等工具的資料轉換方法，以及 jekyll/jekyll 與 gohugoio/hugo 等範本系統。
轉換指令碼或工具應能處理單一檔案、批次轉換與進階設定。
何時使用此 Skill
- 使用者要求「將 markdown 轉為 html」或「轉換 md 檔案」
- 使用者希望將「markdown 渲染」為 HTML 輸出
- 使用者需要從 .md 檔案產生 HTML 文件
- 使用者正在從 Markdown 內容建立靜態網站
- 使用者正在建立將 markdown 轉為 html 的範本系統
- 使用者正在開發現有範本系統的工具、小工具或自訂範本
- 使用者想要預覽 Markdown 渲染後的 HTML 效果
將 Markdown 轉換為 HTML
基礎核心轉換
更多資訊請參閱 basic-markdown-to-html.md
```markdown
# Level 1
## Level 2
One sentence with a [link](https://example.com), and a HTML snippet like `<p>paragraph tag</p>`.
- `ul` list item 1
- `ul` list item 2
1. `ol` list item 1
2. `ol` list item 1
| Table Item | Description |
| One | One is the spelling of the number `1`. |
| Two | Two is the spelling of the number `2`. |
```js
var one = 1;
var two = 2;
function simpleMath(x, y) {
return x + y;
}
console.log(simpleMath(one, two));
```
```
```html
<h1>Level 1</h1>
<h2>Level 2</h2>
<p>One sentence with a <a href="https://example.com">link</a>, and a HTML snippet like <code><p>paragraph tag</p></code>.</p>
<ul>
<li>`ul` list item 1</li>
<li>`ul` list item 2</li>
</ul>
<ol>
<li>`ol` list item 1</li>
<li>`ol` list item 2</li>
</ol>
<table>
<thead>
<tr>
<th>Table Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>One is the spelling of the number `1`.</td>
</tr>
<tr>
<td>Two</td>
<td>Two is the spelling of the number `2`.</td>
</tr>
</tbody>
</table>
<pre>
<code>var one = 1;
var two = 2;
function simpleMath(x, y) {
return x + y;
}
console.log(simpleMath(one, two));</code>
</pre>
```
程式碼區塊轉換
更多資訊請參閱 code-blocks-to-html.md
```markdown
your code here
```
```html
<pre><code class="language-md">
your code here
</code></pre>
```
```js
console.log("Hello world");
```
```html
<pre><code class="language-js">
console.log("Hello world");
</code></pre>
```
```markdown
```
```
visible backticks
```
```
```
```html
<pre><code>
```
visible backticks
```
</code></pre>
```
折疊區塊轉換
更多資訊請參閱 collapsed-sections-to-html.md
```markdown
<details>
<summary>More info</summary>
### Header inside
- Lists
- **Formatting**
- Code blocks
```js
console.log("Hello");
```
</details>
```
```html
<details>
<summary>More info</summary>
<h3>Header inside</h3>
<ul>
<li>Lists</li>
<li><strong>Formatting</strong></li>
<li>Code blocks</li>
</ul>
<pre>
<code class="language-js">console.log("Hello");</code>
</pre>
</details>
```
數學公式轉換
更多資訊請參閱 writing-mathematical-expressions-to-html.md
```markdown
This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$
```
```html
<p>This sentence uses <code>$</code> delimiters to show math inline:
<math-renderer><math xmlns="http://www.w3.org/1998/Math/MathML">
<msqrt><mn>3</mn><mi>x</mi><mo>−</mo><mn>1</mn></msqrt>
<mo>+</mo><mo>(</mo><mn>1</mn><mo>+</mo><mi>x</mi>
<msup><mo>)</mo><mn>2</mn></msup>
</math>
</math-renderer>
</p>
```
```markdown
**The Cauchy-Schwarz Inequality**\
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
```
```html
<p><strong>The Cauchy-Schwarz Inequality</strong><br>
<math-renderer>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mrow><mo>(</mo>
<munderover><mo data-mjx-texclass="OP">∑</mo>
<mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi>
</munderover>
<msub><mi>a</mi><mi>k</mi></msub>
<msub><mi>b</mi><mi>k</mi></msub>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
<mo>≤</mo>
<mrow><mo>(</mo>
<munderover><mo>∑</mo>
<mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
<n>
</munderover>
<msubsup><mi>a</mi><mi>k</mi><2</msubsup>
<mo>)</mo>
</mrow>
<mrow><mo>(</mo>
<munderover><mo>∑</mo>
<mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
<n>
</munderover>
<msubsup><mi>b</mi><mi>k</mi><2</msubsup>
<mo>)</mo>
</mrow>
</math>
</math-renderer></p>
```
表格轉換
更多資訊請參閱 tables-to-html.md
```markdown
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
```
```html
<table>
<thead><tr><th>First Header</th><th>Second Header</th></tr></thead>
<tbody>
<tr><td>Content Cell</td><td>Content Cell</td></tr>
<tr><td>Content Cell</td><td>Content Cell</td></tr>
</tbody>
</table>
```
```markdown
| Left-aligned | Center-aligned | Right-aligned |
| :--- | :---: | ---: |
| git status | git status | git status |
| git diff | git diff | git diff |
```
```html
<table>
<thead>
<tr>
<th align="left">Left-aligned</th>
<th align="center">Center-aligned</th>
<th align="right">Right-aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">git status</td>
<td align="center">git status</td>
<td align="right">git status</td>
</tr>
<tr>
<td align="left">git diff</td>
<td align="center">git diff</td>
<td align="right">git diff</td>
</tr>
</tbody>
</table>
```
使用 markedJS/marked
前提條件
- 已安裝 Node.js（用於 CLI 或程式化呼叫）
- 全域安裝 marked 以供 CLI 使用：
npm install -g marked - 或於專案區域安裝：
npm install marked
快速轉換方法
請參閱 marked.md 的 Quick Conversion Methods
逐步工作流程
請參閱 marked.md 的 Step-by-Step Workflows
CLI 設定
使用設定檔
建立 ~/.marked.json 以套用持久化選項：
{
"gfm": true,
"breaks": true
}
或使用自訂設定：
marked -i input.md -o output.html -c config.json
CLI 選項參考
| 選項 | 說明 |
|---|---|
-i, --input <file> |
輸入 Markdown 檔案 |
-o, --output <file> |
輸出 HTML 檔案 |
-s, --string <string> |
解析字串而非檔案 |
-c, --config <file> |
使用自訂設定檔 |
--gfm |
啟用 GitHub Flavored Markdown |
--breaks |
將換行符號轉換為 <br> |
--help |
顯示所有選項 |
安全性警告
⚠️ Marked 不會主動對輸出的 HTML 進行淨化（Sanitize）。 若處理未受信任的輸入，請搭配淨化工具使用：
import { marked } from 'marked';
import DOMPurify from 'dompurify';
const unsafeHtml = marked.parse(untrustedMarkdown);
const safeHtml = DOMPurify.sanitize(unsafeHtml);
推薦的淨化工具：
支援的 Markdown 語法規範
| 語法規範 | 支援度 |
|---|---|
| 原生 Markdown | 100% |
| CommonMark 0.31 | 98% |
| GitHub Flavored Markdown | 97% |
疑難排解
| 問題 | 解決方案 |
|---|---|
| 檔案開頭包含特殊字元 | 移除檔案開頭的零寬字元：content.replace(/^[\u200B\u200C\u200D\uFEFF]/,"") |
| 程式碼區塊未進行語法高亮 | 加入語法高亮工具（如 highlight.js） |
| 表格未正常渲染 | 確認已設定 gfm: true 選項 |
| 換行符號被忽略 | 在選項中設定 breaks: true |
| 擔心 XSS 安全漏洞 | 使用 DOMPurify 對輸出內容進行淨化處理 |
使用 pandoc
前提條件
- 已安裝 Pandoc（可至 https://pandoc.org/installing.html 下載）
- 若需 PDF 輸出：需要安裝 LaTeX（macOS 建議安裝 MacTeX，Windows 建議 MiKTeX，Linux 建議 texlive）
- 具有終端機／命令提示字元存取權限
快速轉換方法
方法 1：CLI 基本轉換
# 將 markdown 轉換為 HTML
pandoc input.md -o output.html
# 產生包含頁首/頁尾的獨立文件（standalone document）
pandoc input.md -s -o output.html
# 明確指定格式
pandoc input.md -f markdown -t html -s -o output.html
方法 2：過濾器模式（互動式）
# 將 pandoc 作為過濾器啟動
pandoc
# 輸入 markdown，然後按下 Ctrl-D (Linux/macOS) 或 Ctrl-Z+Enter (Windows)
Hello *pandoc*!
# 輸出：<p>Hello <em>pandoc</em>!</p>
方法 3：格式轉換
# HTML 轉 Markdown
pandoc -f html -t markdown input.html -o output.md
# Markdown 轉 LaTeX
pandoc input.md -s -o output.tex
# Markdown 轉 PDF（需要安裝 LaTeX）
pandoc input.md -s -o output.pdf
# Markdown 轉 Word
pandoc input.md -s -o output.docx
CLI 設定
| 選項 | 說明 |
|---|---|
-f, --from <format> |
輸入格式（markdown、html、latex 等） |
-t, --to <format> |
輸出格式（html、latex、pdf、docx 等） |
-s, --standalone |
產生包含頁首/頁尾的獨立文件 |
-o, --output <file> |
輸出檔案（依副檔名自動判斷） |
--mathml |
將 TeX 數學公式轉換為 MathML |
--metadata title="Title" |
設定文件中資料（metadata） |
--toc |
包含目錄（Table of Contents） |
--template <file> |
使用自訂範本 |
--help |
顯示所有選項 |
安全性警告
⚠️ Pandoc 會忠實處理輸入內容。 轉換未受信任的 Markdown 時：
- 使用
--sandbox模式以停用外部檔案存取權限 - 處理前先驗證輸入內容
- 若要顯示於網頁，請對 HTML 輸出進行淨化處理
