📝

Markdown-Editor

Professioneller Markdown-Editor mit Echtzeit-Vorschau und Unterstützung für Mermaid-Diagramme.

Was ist der Markdown-Editor?

Der Markdown-Editor ist ein Werkzeug zum Verfassen und Vorschauen von Dokumenten im Markdown-Format. Er unterstützt GitHub Flavored Markdown sowie Mermaid-Diagramme und bietet eine Echtzeit-Vorschau für eine effiziente Dokumentation.

Benefits

Echtzeit-Vorschau für sofortiges Feedback beim Schreiben
Unterstützung für GFM (GitHub Flavored Markdown) und Mermaid
Einfacher Import und Export von lokalen Markdown-Dateien
Lokale Datenverarbeitung garantiert vollständige Privatsphäre

Wie benutzt man es?

1. Geben Sie Ihren Text in das linke Bearbeitungsfenster ein.
2. Die formatierte Vorschau wird sofort auf der rechten Seite angezeigt.
3. Nutzen Sie die Werkzeugleiste für Formatierungen oder Diagramme.
4. Exportieren Sie Ihr fertiges Dokument als Datei oder kopieren Sie den Text.

Datei importieren

# 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

Mehr Tools entdecken

🗄️

JSON-Formatierer

Professionelles Entwickler-Tool zum Formatieren, Validieren und Minifizieren von JSON-Daten.

🎨

HTML-Farbwähler

Fortgeschrittene HTML-Farbauswahl mit Unterstützung für HSL, RGB und HEX.

🧪

Farbextraktor

Intelligenter Farbpaletten-Generator aus Bildern und URLs.

🎡

Lotterie-Rad

Professionelles Lotterie-Rad & Zufallsauswahl-Tool. Ideal für Gewinnspiele.

Die Datenverarbeitung erfolgt lokal in Ihrem Browser. Es werden keine Inhalte an einen Server gesendet.