📝

Markdown 에디터

실시간 미리보기 및 Mermaid 다이어그램을 지원하는 Markdown 에디터.

마크다운 에디터 정보

이 마크다운 에디터는 실시간 미리보기 기능을 갖춘 문서 작성 보조 도구입니다. 간단한 문법으로 서식을 구성할 수 있으며, Mermaid 지원을 통해 순서도와 차트를 작성 도중 즉시 확인할 수 있습니다.

Benefits

작성 즉시 오른쪽 패널에 반영되는 실시간 결과 미리보기
순서도, 간트 차트 등 복잡한 알고리즘을 시각화하는 Mermaid 엔진 탑재
클라이언트에만 머무르는 로컬 저장 방식으로 보안 및 속도 극대화
다양한 확장 문법(GFM) 지원으로 GitHub 친화적인 문서 제작 가능

어떻게 사용하나요?

1. 왼쪽 편집 영역에서 마크다운 문법을 사용하여 내용을 작성합니다.
2. 순서도가 필요하면 ```mermaid 코드 블록을 사용하여 차트를 생성합니다.
3. 오른쪽 렌더링 영역에서 결과물을 실시간으로 모니터링합니다.
4. 작성이 완료되면 '내보내기'를 눌러 .md 파일로 저장하거나 전체를 복사합니다.

파일 가져오기

# 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

더 강력한 도구 탐색

🗄️

JSON 포맷터

개발자를 위한 JSON 포맷터 및 검증 도구.

🎨

HTML 색상 선택기

HSL/RGB/HEX를 지원하는 HTML 컬러 피커.

🧪

컬러 추출 도구

이미지, 카메라, URL에서 팔레트를 추출하는 지능형 컬러 도구.

🎡

행운의 바퀴

온라인 추첨 휠 및 룰렛 도구. 이벤트 추첨과 명단 관리에 적합합니다.

모든 데이터 처리는 브라우저에서 로컬로 수행됩니다. 콘텐츠가 서버로 전송되지 않습니다.