📝

Markdown 編輯器

支援即時預覽與 Mermaid 圖表的 Markdown 編輯工具。

Markdown 編輯器有什麼特色？

這是一個專為筆記和技術文件設計的 Markdown 編輯器。它支援 GitHub 風格的語法，並且可以即時渲染 Mermaid 流程圖，讓您在寫作時能一邊確認排版與圖表效果。

Benefits

完整支援 GitHub 常用語法，寫作流暢
可直接渲染 Mermaid 流程圖與圖表，視覺化更簡單
雙欄同步捲動同步，長文章校對更輕鬆
支援匯出為 .md 檔案或直接複製內容，使用彈性

如何開始編寫？

1. 在左側輸入 Markdown 語法或貼上文字。
2. 在右側預覽區即時查看排版、列表和圖表效果。
3. 開啟「同步捲動」，讓兩邊視窗在捲動時保持同步。
4. 完成後點擊「匯出檔案」或「複製全部」即可。

匯入檔案

# Welcome to Markdown Editor

This is a professional-grade Markdown editor with **real-time preview**, **GitHub-style rendering**, and **Mermaid support**.

## 🚀 Getting Started

- **Real-time Preview**: Edit on the left, see results on the right.
- **Emoji Search**: Type `@` followed by a name (e.g., `@happy`) to quickly insert emojis.
- **Syntax Highlighting**: Beautiful highlighting for various programming languages.

---

## 📝 Markdown Syntax Examples

### 1. Typography
You can use **bold**, *italic*, or ~~strikethrough~~.
Even support custom tags: [+This is an insertion+], [-This is a deletion-], and [color:orange]{Important Text}.

### 2. Lists
#### Unordered List
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
  - [color:orange]{Important Text}

#### Ordered List
1. First item
2. Second item
3. Third item

#### Task List
- [x] Finished task
- [ ] Unfinished task

### 3. Blockquotes & Tables

> Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

| Feature | Support | Performance |
| :--- | :---: | ---: |
| GFM | ✅ Yes | 🚀 High |
| Mermaid | ✅ Yes | ⚡ Fast |
| Tables | ✅ Yes | 📈 Stable |

---

## 🎨 Advanced Features

### 4. Code Blocks
```typescript
function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}
```

### 5. Mermaid Flowcharts
```mermaid
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;
```

### 6. Links & Images
[Learn more about AttendionFlow](https://github.com/yaohsienhuang/attentionflow)

---
*Happy writing!* ✍️

Welcome to Markdown Editor

This is a professional-grade Markdown editor with real-time preview, GitHub-style rendering, and Mermaid support.

🚀 Getting Started

Real-time Preview: Edit on the left, see results on the right.
Emoji Search: Type @ followed by a name (e.g., @happy) to quickly insert emojis.
Syntax Highlighting: Beautiful highlighting for various programming languages.

📝 Markdown Syntax Examples

1. Typography

You can use bold, italic, or ~~strikethrough~~. Even support custom tags: This is an insertion, ~~This is a deletion~~, and Important Text.

2. Lists

Unordered List

Item 1
Item 2
- Sub-item 2.1
- Sub-item 2.2
- Important Text

Ordered List

First item
Second item
Third item

Task List

Finished task
Unfinished task

3. Blockquotes & Tables

Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

Feature	Support	Performance
GFM	✅ Yes	🚀 High
Mermaid	✅ Yes	⚡ Fast
Tables	✅ Yes	📈 Stable

🎨 Advanced Features

4. Code Blocks

function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}

5. Mermaid Flowcharts

graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;

6. Links & Images

Learn more about AttendionFlow

Happy writing! ✍️

#基礎語法

# Heading 1H1
**Bold**Bold
*Italic*Italic
~~Strike~~Strike

list列表與任務

- List ItemBullet
1. ItemNumber
- [x] TaskDone
- [ ] TaskTodo

&進階語法

[Text](URL)Link
> QuoteQuote
| Table |Table
`Code`Inline

!自定義標籤

[+Add+]Ins
[-Del-]Del
[color:orange]{Important Text}Color
```mermaidGraph

探索更多強大工具

🗄️

JSON 格式化工具

開發者必備的 JSON 格式化、驗證與壓縮工具。

🎨

HTML 顏色選擇器

支援 HSL、RGB 與 HEX 的進階 HTML 顏色選擇器。

🧪

顏色提取工具

可從圖片、相機或網頁中提取色板的智能提取工具。

🎡

幸運轉盤

線上抽獎與隨機挑選工具。適合活動抽籤與清單篩選。

所有數據處理都在您的瀏覽器中本地完成。內容不會上傳到任何伺服器。