Markdown Editor

Markdown schreiben mit Live-Vorschau — formatieren, exportieren und herunterladen, direkt im Browser.

413
Zeichen
58
Wörter
34
Zeilen
5
Überschriften
1
Links

Markdown Vorschau

Formatierung

Fett, kursiv, fett & kursiv, durchgestrichen.

Listen

  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt
  • Nummeriert
  • Noch einer
  • Code

    Inline code und Block:

    function hallo() {
      console.log("Hallo Welt!");
    }
    

    Links & Zitate

    graphi.cx — kostenlose Online-Tools.

    Dies ist ein Zitat.

    Viel Spaß! 🎉

    📝 Info: Unterstützt: Überschriften (#-######), **fett**, *kursiv*, ~~durchgestrichen~~, Links, Bilder, Listen, Code-Blöcke, Blockquotes, horizontale Linien. Kein Dependency — eigener Parser. Kopiere Markdown oder gerendertes HTML.

    Markdown — Einfach formatierter Text

    Der Markdown-Editor ermöglicht das Schreiben und Vorschauen von Markdown-Dokumenten direkt im Browser mit Live-Vorschau. Markdown ist eine leichtgewichtige Auszeichnungssprache, die 2004 von John Gruber und Aaron Swartz entwickelt wurde. Die Philosophie dahinter: Text soll auch im Quellformat gut lesbar sein, ohne dass komplexe HTML-Tags oder WYSIWYG-Editoren nötig sind. Mittlerweile ist Markdown der De-facto-Standard für technische Dokumentation und wird von Millionen Entwicklern, Autoren und Studenten täglich genutzt.

    Die wichtigsten Markdown-Elemente

    Die Syntax ist bewusst minimalistisch gehalten und innerhalb weniger Minuten erlernbar:

    • Überschriften: # für H1, ## für H2, ### für H3 (bis zu 6 Ebenen mit ######). Die Anzahl der Rauten bestimmt die Hierarchieebene.
    • Hervorhebungen: *kursiv* oder _kursiv_, **fett** oder __fett__, ~~durchgestrichen~~. Kombinierbar: ***fett und kursiv***
    • Listen: - oder * für ungeordnete Listen, 1. für nummerierte Listen. Verschachtelte Listen durch Einrückung mit 2-4 Leerzeichen.
    • Links: [Angezeigter Text](URL "Optionaler Titel") — auch Bilder: ![Alternativtext](Bild-URL)
    • Code: `inline code` mit einfachen Backticks oder dreifache Backticks (```) für mehrzeilige Code-Blöcke mit optionaler Sprachangabe für Syntaxhervorhebung
    • Tabellen: Pipes (|) und Bindestriche (-) für einfache Tabellen, Ausrichtung mit Doppelpunkten (:---, :---:, ---:)
    • Blockzitate: > am Zeilenanfang für Zitate, verschachtelbar mit >> für Zitate in Zitaten
    • Horizontale Linie: --- oder *** oder ___ für eine Trennlinie

    Wo wird Markdown verwendet?

    Markdown hat sich weit über die technische Dokumentation hinaus verbreitet: GitHub und GitLab (README-Dateien, Issues, Pull Requests), Confluence und Notion (Wikis und Teamdokumentation), Slack und Discord (Nachrichten-Formatierung), Stack Overflow und Reddit (Beiträge und Kommentare), Blog-Plattformen (Ghost, Hugo, Jekyll, Gatsby) und Notiz-Apps (Obsidian, Bear, Joplin, Typora) unterstützen alle Markdown. Wissenschaftliche Arbeiten können mit Pandoc von Markdown in PDF, Word oder LaTeX konvertiert werden. Einmal gelernt, setzen Sie Ihre Formatierungskenntnisse überall ein.

    Markdown-Dialekte

    Im Laufe der Zeit haben sich verschiedene Markdown-Erweiterungen entwickelt: CommonMark standardisiert die Kernspezifikation, GitHub Flavored Markdown (GFM) ergänzt Aufgabenlisten (- [x] erledigt), automatische URL-Erkennung und Tabellen. MultiMarkdown fügt Fußnoten, Metadaten und erweiterte Tabellen hinzu. Unser Editor unterstützt GFM als den gebräuchlichsten Dialekt und rendert die Vorschau in Echtzeit, während Sie tippen.

    Markdown vs. HTML

    Markdown wird vor der Anzeige in HTML umgewandelt — jedes Markdown-Element hat ein HTML-Äquivalent (# wird zu <h1>, **fett** zu <strong>). Der entscheidende Vorteil: Markdown-Quelldateien sind auch ohne Rendering gut lesbar und können mit jedem Texteditor bearbeitet werden, während HTML-Tags den Lesefluss stören. Für komplexere Layouts — etwa farbige Boxen, mehrspaltige Anordnungen oder eingebettete Videos — kann Markdown mit inline HTML erweitert werden.

    Häufig gestellte Fragen

    Was ist Markdown?

    Markdown ist eine einfache Auszeichnungssprache, die 2004 von John Gruber entwickelt wurde. Mit wenigen Zeichen wie #, *, ** oder [] lassen sich Texte strukturieren und formatieren — ganz ohne HTML-Kenntnisse. Markdown wird von GitHub, Reddit, Stack Overflow und vielen anderen Plattformen unterstützt.

    Wie mache ich Text fett oder kursiv in Markdown?

    Fetten Text erzeugen Sie mit zwei Sternchen: **fetter Text**. Kursiven Text mit einem Sternchen: *kursiver Text*. Für fett und kursiv gleichzeitig verwenden Sie drei Sternchen: ***fett und kursiv***. Alternativ funktioniert auch der Unterstrich: __fett__ und _kursiv_.

    Wie erstelle ich Überschriften in Markdown?

    Überschriften werden mit dem Rautezeichen (#) erstellt. Ein # ergibt eine H1-Überschrift, ## eine H2, ### eine H3 und so weiter bis ###### für H6. Zwischen dem # und dem Text muss ein Leerzeichen stehen.

    Wie füge ich Links und Bilder in Markdown ein?

    Links werden mit [Linktext](URL) erstellt, z.B. [Google](https://google.com). Bilder funktionieren ähnlich mit einem Ausrufezeichen davor: ![Alternativtext](Bild-URL). URLs werden automatisch erkannt und verlinkt.

    Wie erstelle ich Tabellen in Markdown?

    Tabellen verwenden Pipe-Zeichen (|) als Spaltentrenner. Die erste Zeile ist der Header, die zweite definiert die Ausrichtung mit Bindestrichen und Doppelpunkten. Beispiel: | Links | Mitte | Rechts | gefolgt von | :--- | :---: | ---: | für die Ausrichtung.

    Wie füge ich Codeblöcke in Markdown ein?

    Inline-Code wird mit einfachen Backticks umschlossen: `code`. Für mehrzeilige Codeblöcke verwenden Sie drei Backticks (```) vor und nach dem Code. Optional können Sie nach den ersten drei Backticks die Programmiersprache angeben, z.B. ```javascript für Syntaxhervorhebung.

    Werden meine Daten gespeichert?

    Nein — der gesamte Editor läuft vollständig in Ihrem Browser. Kein Text wird an einen Server gesendet. Ihr Markdown wird lokal im Browser-Speicher (localStorage) gesichert, sodass es beim nächsten Besuch noch verfügbar ist.

    Kann ich Markdown in HTML umwandeln?

    Ja! Der Editor zeigt Ihnen die Live-Vorschau des gerenderten HTML. Mit dem Button "Kopieren (HTML)" können Sie den generierten HTML-Code direkt in die Zwischenablage kopieren. Außerdem können Sie Ihr Dokument als .md-Datei herunterladen.