跳至正文

Markdown to HTML 轉換器

即時將Markdown語法轉換為HTML的工具。立即預覽您的Markdown並生成HTML代碼。

Markdown Input

Preview

HTML Output

主要功能

  • 即時Markdown預覽
  • 自動生成HTML代碼
  • 支援各種Markdown語法
  • 一鍵複製HTML
  • 提供5個範例模板

支援的Markdown語法

1. 標題

# H1 標題
## H2 標題
### H3 標題
#### H4 標題
##### H5 標題
###### H6 標題

2. 文字樣式

**粗體文字**__粗體文字__
*斜體文字*_斜體文字_
~~刪除線~~
`內聯代碼`

3. 列表

## 無序列表
- 項目1
- 項目2
- 巢狀項目
- 另一個巢狀項目

## 有序列表
1. 第一項
2. 第二項
3. 第三項

4. 連結和圖片

[連結文字](https://example.com)
![替代文字](圖片URL)

5. 代碼區塊

```javascript
function hello() {
console.log("Hello World");
}
```

6. 引用

> 這是一個引用。
> 可以跨越多行。

7. 表格

| 標題1 | 標題2 | 標題3 |
|------|------|------|
| 內容1 | 內容2 | 內容3 |
| 內容4 | 內容5 | 內容6 |

8. 水平線

---
***
___

使用案例

部落格文章撰寫

# 我的第一篇部落格文章

你好!今天我們來學習**Markdown**

## 什麼是Markdown?

Markdown是一種輕量級標記語言,允許您使用
*簡單的語法*編寫文件。

### 優點
1. 易於學習
2. 易於閱讀
3. 廣泛的平台支援

文件編寫

# API文件

## 端點

### GET /api/users

獲取使用者列表。

**回應範例:**
```json
{
"users": [
{"id": 1, "name": "John"}
]
}

### README創建
```markdown
# 專案名稱

專案的簡要說明

## 安裝

```bash
npm install

使用

  1. 複製儲存庫
  2. 安裝相依套件
  3. 執行伺服器

## 使用技巧

1. **即時查看**: 在左側編寫Markdown,中間立即查看預覽。

2. **複製HTML**: 使用右側面板的「Copy HTML」按鈕複製生成的HTML。

3. **使用範例**: 點擊頂部的範例按鈕學習各種Markdown語法。

4. **部落格寫作**: 用Markdown編寫內容並轉換為HTML以直接發布到部落格。

5. **文件編寫**: 在預覽技術文件或README檔案時非常有用。

## 相關工具

- [Base64 Encoder](/docs/playground/base64-encoder)
- [URL Encoder](/docs/playground/url-encoder)
- [HTML Formatter](/docs/playground/html-formatter)
- [Text Diff Checker](/docs/playground/text-diff-checker)