📝

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 颜色选择器。

🧪

颜色提取工具

可从图片、相机或网页中提取色板的智能提取工具。

🎡

幸运转盘

在线抽奖与随机挑选工具。适合活动抽签与名单筛选。

所有数据处理都在您的浏览器中本地完成。内容不会上传到任何服务器。