📝
Markdown-Editor – kostenlos
Schreiben und Vorschau von Markdown in Echtzeit. Unterstützt Überschriften, Fett, Kursiv, Codeblöcke, Tabellen und Listen.
Funktioniert nach dem Laden offline
86 Wörter · 587 Zeichen
Markdown
Vorschau
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Willkommen beim Markdown-Editor</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Schreiben Sie <strong>Markdown</strong> links, sehen Sie die Livevorschau rechts.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funktionen</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Fett</strong>, <em>kursiv</em> und <del>durchgestrichen</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Inline-Code</code> und umzäunte Codeblöcke</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Links</a></li><li class="my-0.5">Listen, Blockzitate, Tabellen und mehr</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Codebeispiel</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown wurde 2004 von John Gruber entwickelt, um das Schreiben für das Web zu vereinfachen.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Funktion</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Unterstützt</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Überschriften</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Listen</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tabellen</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Code</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-Kurzreferenz
# Heading 1H1
**bold**Fett
*italic*Kursiv
`code`Inline-Code
- itemAufzählungsliste
1. itemNummerierte Liste
> quoteBlockzitat
[text](url)Link
Bild
---Trennlinie
Häufige Anwendungen
- Schreiben Sie API-Dokumentation in MarkdownEntwerfen Sie Endpunktbeschreibungen, Anfrage-/Antwortbeispiele und Parametertabellen in Markdown.
- Erstellen Sie Markdown-NotizenSchreiben Sie strukturierte Notizen in Markdown, die in Notion, Obsidian, Bear oder einer beliebigen Markdown-App eingefügt werden können.
- GitHub README in Markdown schreibenErstellen und zeigen Sie eine Vorschau Ihrer GitHub-Repository-README mit Live-Markdown-Rendering an.
- Technische Dokumentation schreibenSchreiben und zeigen Sie API-Dokumente, Wikis und technische Anleitungen in Markdown vor der Veröffentlichung vor.
- Blogbeiträge in Markdown schreibenVerfassen Sie Blogbeiträge in Markdown für Ghost, Jekyll, Hugo, Hashnode und andere Markdown-basierte Veröffentlichungsplattformen.
So funktioniert es
Die Vorschau wird von einem selbst geschriebenen Markdown-Parser direkt im Tool gerendert – kein marked, kein remark, keine externe Bibliothek. Er zerlegt den Quelltext zeilenweise im Browser und wandelt die Syntax in HTML um, das vor der Anzeige einen Sanitizer durchläuft.
- 1Zeilenweise TokenisierungDie eigene Funktion renderMarkdown teilt Ihren Quelltext an Zeilenumbrüchen und durchläuft ihn in einem einzigen Durchgang, wobei sie umzäunte Codeblöcke, Überschriften (H1–H6), Zitate, nummerierte und unnummerierte Listen, GFM-Tabellen (mit Spaltenausrichtung), horizontale Linien und Absätze in Prioritätsreihenfolge erkennt.
- 2Erweiterung der Inline-SyntaxJede gesammelte Zeile oder Zelle wird dann von inlineMarkdown verarbeitet, einer Kette von Regex-Ersetzungen für Fett (** und __), Kursiv (* und _), Fett-Kursiv (***), Durchgestrichen (~~), Inline-Code (), Bilder () und Links ([text](url)) – Bilder werden vor Links aufgelöst, damit das Präfix ! nicht falsch verbraucht wird.
- 3Bereinigung und Blockieren externer RessourcenDas vom Renderer erzeugte rohe HTML durchläuft einen Sanitizer (sanitize-html), der unsichere Tags und Attribute wie <script>, onerror-Handler und javascript:-hrefs entfernt. Ein zweiter Durchlauf (neutralizeRemote) ersetzt externe Bild-src-Werte standardmäßig durch Platzhalter, damit die Vorschau nicht unbemerkt externe Server kontaktiert, bevor Sie zustimmen.
- 4Export als .md oder eigenständiges .htmlBeim Kopieren oder Herunterladen von Markdown wird der rohe Quelltext geschrieben. Beim HTML-Download wird die bereinigte Ausgabe in ein eigenständiges Dokument mit eigenem Inline-Stylesheet verpackt – Tailwind-Klassen funktionieren nur innerhalb der Website, daher enthält der Export einfache CSS-Regeln, sodass die Datei überall lesbar ist.
Ähnliche Tools
HTML zu Markdown Konverter
Konvertieren Sie HTML in sauberes Markdown. Verarbeitet Überschriften, Listen, Links, Bilder, Codeblöcke, Tabellen und Blockzitate. Ideal zum Migrieren von Inhalten aus CMS-Systemen.
Ausprobieren
Markdown zu HTML Konverter
Konvertieren Sie Markdown in sauberes HTML mit Live-Vorschau. Quellansicht zum Kopieren von einfügefertigem HTML für Blogs, CMS-Systeme oder E-Mail-Vorlagen nutzen.
Ausprobieren
Mermaid-Diagramm-Editor
Schreiben Sie Flussdiagramme, Sequenzdiagramme, Gantt-Diagramme und mehr in Mermaid-Syntax mit einer Live-Vorschau. Als SVG oder PNG exportieren. Läuft vollständig in Ihrem Browser.
Ausprobieren