📝

Trình soạn thảo Markdown

Viết và xem trước Markdown với giao diện chuyên nghiệp và hỗ trợ xuất GFM.

Thông tin về trình soạn thảo Markdown

Công cụ hỗ trợ viết và xem trước nội dung theo định dạng Markdown với giao diện trực quan. Bạn có thể dễ dàng soạn thảo các tài liệu kỹ thuật, bài viết blog và xem kết quả hiển thị ngay lập tức trong quá trình làm việc.

Benefits

Hỗ trợ xem trước song song thời gian thực giúp bạn theo dõi nội dung một cách trực quan
Tích hợp đầy đủ các cú pháp GitHub Flavored Markdown (GFM) và biểu đồ Mermaid
Tính năng cuộn đồng bộ giữa trình soạn thảo và bảng xem trước giúp làm việc hiệu quả
Dễ dàng nhập hoặc xuất các tệp tin Markdown phục vụ cho việc lưu trữ và chia sẻ

Cách sử dụng

1. Bắt đầu nhập nội dung Markdown của bạn vào khu vực soạn thảo bên trái màn hình.
2. Quan sát kết quả hiển thị tương ứng tại khu vực xem trước ở bên phải.
3. Sử dụng các thẻ hướng dẫn cú pháp để tham khảo cách định dạng văn bản nâng cao.
4. Nhấn nút 'Export File' để lưu nội dung dưới dạng tệp .md về thiết bị của bạn.

Import File

# 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! ✍️

#Basic Syntax

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

listLists & Tasks

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

&Advanced Syntax

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

!Custom Tags

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

Khám phá thêm các công cụ mạnh mẽ

🗄️

Định dạng JSON

Làm sạch, định dạng và xác thực mã JSON của bạn ngay lập tức.

🎨

Chọn màu HTML

Bộ chọn màu HTML nâng cao hỗ trợ HSL, RGB và HEX.

🧪

Trích xuất màu

Bộ tạo bảng màu thông minh từ hình ảnh và địa chỉ web.

🎡

Vòng quay xổ số

Bộ tạo người chiến thắng ngẫu nhiên chuyên nghiệp và chọn tên cho quà tặng, rút thăm trúng thưởng. Tính năng hoạt ảnh vòng quay mượt mà và quản lý người tham gia.

All data processing is done locally in your browser. No content is ever sent to any server.