📝

Éditeur Markdown

Éditeur Markdown professionnel avec prévisualisation en temps réel et support des graphiques Mermaid.

Qu'est-ce que l'Éditeur Markdown ?

L'Éditeur Markdown vous permet d'écrire et de prévisualiser des documents en utilisant la syntaxe Markdown. Il prend en charge le GitHub Flavored Markdown et comprend un visionneur pour les diagrammes Mermaid afin d'aider à visualiser les processus.

Benefits

Aperçu en temps réel pour une édition plus fluide
Prise en charge complète de la syntaxe GFM (GitHub Flavored Markdown)
Rendu de diagrammes de flux et de séquences avec Mermaid
Fonctions d'importation et d'exportation de fichiers locaux

Comment l'utiliser ?

1. Rédigez votre contenu dans le panneau de gauche en utilisant la syntaxe Markdown.
2. Observez les changements instantanément dans le panneau d'aperçu à droite.
3. Utilisez des blocs de code pour insérer des diagrammes Mermaid si nécessaire.
4. Exportez votre travail final sous forme de fichier pour le sauvegarder sur votre appareil.

Importer un fichier

# 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

Explorer plus d'outils

🗄️

Formateur JSON

Outil développeur professionnel pour formater, valider et minifier vos données JSON.

🎨

Sélecteur de Couleur HTML

Sélecteur de couleurs HTML avancé avec support HSL, RGB et HEX.

🧪

Extracteur de Couleur

Générateur intelligent de palettes de couleurs à partir d'images et d'URLs.

🎡

Roue de la loterie

Générateur de loterie et sélecteur de noms aléatoires professionnel. Idéal pour les tirages au sort.

Tout le traitement des données se fait localement dans votre navigateur. Aucun contenu n'est envoyé à un serveur.