Da ich es leid war das die meisten Markdown Editoren, MarkdownMonster ausgenommen, keine großartige Toolbar hatten und ich zu diesen Menschen gehöre die gerne eine volle Toolbar haben, habe ich mir meinen eigenen Editor gebaut.

Falls er euch gefällt, installiert ihn und lasst mir zum Dank ein Stern bei Github da.😁

GitHub

⚡ DualForge Editor

The Ultimate Hybrid: A powerful split-screen editor combining Markdown simplicity with HTML precision.

Der ultimative Hybrid: Ein leistungsstarker Split-Screen-Editor, der die Einfachheit von Markdown mit der Präzision von HTML vereint.

🌐 Choose Language / Sprache wählen

• 🇺🇸 English Documentation
• 🇩🇪 Deutsche Dokumentation

🇺🇸 English Documentation

📖 About

DualForge Editor is a modern, React-based text editor designed for developers and content creators who need more than just standard Markdown. It features a dual-pane interface (Editor & Live Preview), a rich toolbar for both Markdown and HTML helper tools, and advanced extensions like Math formulas, Diagrams, and Admonitions.

✨ Key Features

• ⚡ Real-time Split Screen: Write on the left, see the result instantly on the right.
• 📝 Hybrid Syntax: Supports standard Markdown (**bold**, # H1) AND raw HTML (<div style="...">).
• 🛠️ Dual Toolbar:
  • Markdown Tab (Blue): Standard formatting, Lists, Tables, Math, TOC.
  • HTML Tab (Green): Text alignment, Colors, Iframe generator, Grid layouts, Spoilers.
• 🎨 Rich Media Tools:
  • Icon Picker: Integrated FontAwesome gallery (Searchable).
  • Emoji Picker: Insert emojis with a click.
  • Color Picker: Hex-code generator for text/backgrounds.
• 📐 Advanced Rendering:
  • Math: LaTeX support via KaTeX ($$E = mc^2$$).
  • Diagrams: Mermaid support flowcharts & graphs.
  • Admonitions: Beautiful alert boxes (:::tip, :::warning).
  • TOC: Auto-generated Table of Contents ([[toc]]).
• 🌍 Internationalization (i18n): One-click switch between English and German.
• 🧹 Smart Formatter: Cleans up code, removes trailing spaces, and fixes HTML indentation.

🚀 Installation & Setup

1. Clone the repository:

   git clone [https://github.com/your-username/dualforge-editor.git](https://github.com/your-username/dualforge-editor.git)
   cd dualforge-editor

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open in Browser: Go to http://localhost:5173

💡 Syntax Guide

🛠️ Tech Stack

• Core: React 18, Vite
• Parser: Marked, DOMPurify
• Syntax Highlighting: Highlight.js
• Math: KaTeX
• Icons: Lucide React, FontAwesome
• I18n: i18next

🇩🇪 Deutsche Dokumentation

📖 Über das Projekt

DualForge Editor ist ein moderner, React-basierter Texteditor für Entwickler und Content Creator, die mehr als nur Standard-Markdown benötigen. Er bietet eine zweigeteilte Oberfläche (Editor & Live-Vorschau), eine umfangreiche Toolbar für Markdown- und HTML-Tools sowie erweiterte Funktionen wie mathematische Formeln, Diagramme und Hinweisboxen.

✨ Hauptfunktionen

• ⚡ Echtzeit-Split-Screen: Links schreiben, rechts sofort das Ergebnis sehen.
• 📝 Hybrid-Syntax: Unterstützt Standard-Markdown (**fett**, # H1) UND rohes HTML (<div style="...">).
• 🛠️ Doppelte Werkzeugleiste:
  • Markdown-Tab (Blau): Formatierung, Listen, Tabellen, Mathe, Inhaltsverzeichnis.
  • HTML-Tab (Grün): Textausrichtung, Farben, Iframe-Generator, Grid-Layouts, Spoiler.
• 🎨 Medien-Tools:
  • Icon-Galerie: Integrierte FontAwesome-Suche.
  • Emoji-Picker: Emojis per Klick einfügen.
  • Farbwähler: Hex-Code-Generator für Text und Hintergründe.
• 📐 Erweitertes Rendering:
  • Mathe: LaTeX-Support via KaTeX ($$ E = mc^2 $$).
  • Diagramme: Mermaid-Support für Flussdiagramme.
  • Hinweisboxen: Schicke Alert-Boxen (:::tip, :::warning).
  • TOC: Automatisch generiertes Inhaltsverzeichnis ([[toc]]).
• 🌍 Mehrsprachigkeit (i18n): Umschalten zwischen Deutsch und Englisch mit einem Klick.
• 🧹 Smart Formatter: Bereinigt den Code, entfernt unnötige Leerzeichen und repariert Abstände.

🚀 Installation & Einrichtung

1. Repository klonen:

   git clone [https://github.com/dein-username/dualforge-editor.git](https://github.com/dein-username/dualforge-editor.git)
   cd dualforge-editor

2. Abhängigkeiten installieren:

   npm install

3. Entwicklungsserver starten:

   npm run dev

4. Im Browser öffnen: Gehe zu http://localhost:5173

💡 Syntax Kurzanleitung

🛠️ Verwendete Technologien

• Core: React 18, Vite
• Parser: Marked, DOMPurify
• Highlighting: Highlight.js
• Mathe: KaTeX
• Icons: Lucide React, FontAwesome
• I18n: i18next

Made with ❤️ by [Your Name]