Markdown 預覽

Q: 能預覽 GitHub 風格的 Markdown 嗎？

可以：表格、任務列表和圍欄代碼都支持。

Q: 手機上能查看 Markdown 嗎？

可以，佈局自適應各種屏幕。

粘貼 Markdown 或拖入 .md 文件，即時預覽 GitHub 風格的渲染效果。

# 把 Markdown 讀對、讀美：在線 Markdown Viewer 與 Styles

把 `.md` 文件**粘貼、輸入或拖進**這個免費的在線 Markdown Viewer（Markdown 閱讀器），選擇喜歡的 Markdown Style（預覽樣式），再慢慢閱讀。你可以調整字體與顏色，讓 Markdown Preview（Markdown 預覽）更符合自己的閱讀習慣，也可以將預覽結果導出爲 HTML 或 PDF。

Markdown Tools 不只是一個基礎的 Markdown Viewer。它提供 **11 種 Markdown Preview Styles**，支持樣式微調、實時預覽和 Markdown Embed（嵌入式預覽）。預覽與 HTML、PDF 導出採用一致的渲染流程，幫助保持屏幕預覽與導出文件的視覺一致性，讓標題、表格、任務列表、代碼和數學公式得到清晰呈現。

本文是一場 Markdown Rendering（Markdown 渲染）巡覽。下面的示例均使用普通 Markdown 編寫，並在 Markdown Viewer 中實時渲染。你可以切換不同的 Markdown Styles，觀察同一份內容在不同主題下的表現。

## Markdown Viewer 能渲染什麼？

下面沒有預先製作的截圖。標題、引用、表格、鏈接、圖片、腳註和數學公式都由 Markdown 渲染器生成。你可以用這些示例檢查 Markdown Viewer 的實際渲染效果，也可以在編輯器中修改內容，實時查看結果。

### 標題

章節標題使用 ATX 語法（`#` 井號）。四到六級標題如下：

#### 四級標題

##### 五級標題

###### 六級標題

Setext 標題不使用井號，而是通過下劃線標記。下面就是一個示例：

用短橫線做下劃線的標題
-------------------------------

### 引用

引用使用行首的 `&gt;` 標記。Markdown Viewer 支持普通引用與嵌套引用：

&gt; 引用是行首加上 `&gt;` 的一行或一段。
&gt;
&gt; 引用中還可以包含其他 Markdown 塊，包括列表和更多引用：
&gt;
&gt; &gt; 嵌套引用裏的列表：
&gt; &gt;
&gt; &gt; - 一
&gt; &gt; - 二

### 表格

GitHub Flavored Markdown（GFM）支持表格列對齊，單元格中還可以包含行內格式。這也是測試 Markdown Viewer 表格渲染效果的簡單方法。

| 語法 | 是否支持 | 對齊演示 |
| :--------- | :------: | ---------: |
| **加粗** | 支持 | 右對齊 |
| `行內代碼` | 支持 | 右對齊 |
| ~~刪除線~~ | 支持 | 右對齊 |
| $E = mc^2$ | 支持 | 單元格內公式 |
| `a \| b` | 支持 | 轉義的豎線 |

### 鏈接

Markdown 支持多種鏈接寫法，在線 Markdown Viewer 可以將它們渲染爲可點擊的鏈接。

- 帶標題的行內鏈接：[John Gruber 的 Markdown](https://daringfireball.net/projects/markdown/ "Markdown 首頁")
- 引用式鏈接：[CommonMark 規範][cm]
- 尖括號自動鏈接：
- 裸 URL（GFM 自動鏈接）：https://example.com
- 跳到本文後面的章節：[從預覽到文件](#從預覽到文件)

[cm]: https://spec.commonmark.org/ "CommonMark"

### 圖片

Markdown 支持行內式圖片與引用式圖片。使用 Markdown Viewer 檢查圖片佈局時，也可以進一步確認圖片在 HTML 與 PDF 導出中的表現。

![黃色花朵特寫，引用式圖片演示][demo-img]

![黃色花朵特寫，行內式圖片演示](https://images.pexels.com/photos/18853925/pexels-photo-18853925.jpeg "行內式圖片")

[demo-img]: https://images.pexels.com/photos/20791127/pexels-photo-20791127.jpeg "引用式圖片"

### 分割線

三種常見寫法都可以生成分割線：

---

`---`、`***`、`___` 都可以生成分割線，具體顯示效果由當前 Markdown Style 決定。

### 腳註

Markdown 腳註可以將補充說明放在文末，並在正文中通過編號引用。多處引用可以指向同一條腳註[^1]。

### LaTeX 數學公式

Markdown Viewer 支持行內數學公式，例如 $E = mc^2$ 與 $e^{i\pi} + 1 = 0$。獨立公式則使用 `$$ ... $$` 包裹：

$$
\int_{0}^{\infty} e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}
$$

求和、分式和矩陣也可以使用 LaTeX 表達：

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
\qquad
A = \begin{pmatrix} a &amp; b \\ c &amp; d \end{pmatrix}
$$

公式排版是 Markdown Rendering 的重要組成部分。良好的數學公式支持能讓技術文檔、學習筆記和數學內容更易閱讀。公式的導出效果取決於當前公式渲染與導出實現。

## 11 種 Markdown Styles：讓同一份文檔呈現不同風格

普通 Markdown Viewer 通常更關注語法是否正確，而 Markdown Tools 更進一步，讓你可以爲文檔選擇合適的視覺風格。

目前提供 11 種 Markdown Preview Styles：

- **雜誌風格：** 適合注重排版層次與閱讀體驗的文章。
- **終端風格：** 適合技術文檔與開發者內容。
- **賽博朋克風格：** 爲文檔增添鮮明的科技視覺效果。
- **香港風格：** 提供具有獨特視覺氣質的排版選擇。
- **報刊風格：** 適合文章、資訊和長篇閱讀。
- **溫和風格：** 適合日常筆記與舒適閱讀。
- **玻璃風格：** 採用輕盈、通透的視覺設計。
- **Kindle 風格：** 適合偏向電子書閱讀體驗的內容。
- **演講風格：** 適合展示重點和演講材料。
- **Claude 風格：** 提供另一種簡潔、清晰的文檔呈現方式。
- **HTML 風格：** 適合偏向傳統網頁文檔的展示。

除了選擇預設的 Markdown Templates，你還可以微調字體與顏色，讓預覽更符合自己的審美和使用場景。無需修改原始 Markdown 內容，就能讓同一份文檔呈現不同的視覺效果。

無論是閱讀技術文檔、整理學習筆記、準備演講材料，還是展示項目說明，你都可以選擇適合的 Markdown Style。預覽風格不再只是固定的模板，而是可以根據內容和個人偏好調整的閱讀體驗。

## Markdown Embed：將自定義預覽嵌入其他網站

喜歡某種 Markdown Style？你還可以通過 Markdown Embed 功能，將配置好的 Markdown 預覽嵌入博客、個人網站、知識庫或其他支持 iframe 的網頁。

選擇喜歡的預覽風格，調整字體與顏色，然後使用生成的 iframe 代碼。這樣，你不僅可以在線使用 Markdown Viewer，還可以將經過樣式定製的 Markdown Preview 複用到自己的網站中。

Markdown Embed 適合多種使用場景：

- **博客與個人網站：** 將 Markdown 內容以更符合頁面風格的方式展示。
- **技術文檔與教程：** 讓代碼、表格、引用和標題擁有清晰的視覺層次。
- **學習筆記與知識庫：** 在支持嵌入內容的頁面中展示格式化後的 Markdown。
- **項目演示與文檔分享：** 使用統一的預覽樣式呈現說明文檔或示例內容。

Embed 與下載 HTML 的用途不同：HTML 下載適合獲取獨立文件，Markdown Embed 則適合將預覽放入其他網頁。實際嵌入效果還取決於目標網站的 iframe 策略和瀏覽器安全限制。

## 從 Markdown Preview 到 HTML 與 PDF

完成 Markdown 預覽後，你可以繼續使用不同的導出方式，讓同一份內容適應不同場景。

- **導出 PDF。** 將預覽內容轉換爲適合閱讀、打印和分享的文檔。
- **下載 HTML。** 獲取 HTML 文件，在支持 HTML 的環境中展示內容。
- **複製爲 HTML。** 複製 HTML 片段，粘貼到支持 HTML 的網站或內容管理系統中。
- **複製或下載 Markdown。** 保留原始 Markdown 源碼，繼續在自己喜歡的編輯器中編寫。

Markdown Preview、HTML Export 與 PDF Export 服務於不同的使用場景。統一的渲染流程有助於保持輸出效果的一致性，但分頁、瀏覽器打印設置及外部資源仍可能影響最終結果。

## 常見問題

### 什麼是 Markdown Viewer？

Markdown Viewer 是一種在線或本地工具，用於將 Markdown 源

輸入 Markdown 後在此預覽

使用步驟

把 Markdown 粘貼進左側面板，或把 .md 文件拖入以替換內容。
從十一種預覽風格中挑一種，需要時調整配色與字體。
用左側大綱跳到任意標題，文檔讀起來沒問題後導出 PDF 或下載 HTML。

限制說明

預覽展示的是當前渲染管線（GitHub 風格 Markdown）的效果，並不復刻某個具體網站的排版。
遠程圖片從原始主機加載，引用了失效或私有圖片地址的文檔會出現空缺。
不在服務端保存任何內容，刷新頁面後面板會回到示例文檔。

常見問題

如何查看 Markdown 文件？

把 .md 文件上傳或拖入查看器，也可以直接粘貼內容。

能預覽 GitHub 風格的 Markdown 嗎？

可以：表格、任務列表和圍欄代碼都支持。

手機上能查看 Markdown 嗎？

可以，佈局自適應各種屏幕。

我的文件會被上傳嗎？

不會。一切都在瀏覽器中完成，你的 Markdown 不會離開設備。

使用步驟

限制說明

相關工具

常見問題