Zum Inhalt springen

Markdown-Editor

Markdown Editor

Bearbeitet Markdown mit Live-Vorschau und exportiert das gerenderte HTML, mit GFM-Tabellen und Aufgabenlisten.

Ein Markdown-Editor mit dem gerenderten Ergebnis daneben, dem HTML dahinter und einer Gliederung der Überschriften. Der Parser ist die eigene CommonMark-Implementierung dieses Repositories, die im 652 Beispiele umfassenden Testkorpus der Spezifikation 99,8 % erreicht.

🔒 Läuft vollständig in Ihrem Browsermarkdownprevieweditorhtml

Markdown

Vorschau

Ansicht

Über das Projekt

Ein Markdown-Editor mit Live-Vorschau. Fett, kursiv, Code und Links.

Einrichtung

  1. Repository klonen
  2. Installer ausführen
  3. Anwendung öffnen
Posten Menge Betrag
Notebook 2 2.400.000
Monitor 3 900.000

Ein Zitat, zur Betonung.

const total = items.reduce((sum, item) => sum + item.price, 0);
  • [x] Aufgabenlisten funktionieren
  • [ ] Auch die nicht abgehakten

Optionen

Dokument

Wörter

52

Zeichen

478

Links

1

Bilder

0

Codeblöcke

1

Tabellen

1

Gliederung

  • Über das Projekt #uber-das-projekt
  • Einrichtung #einrichtung

Anker werden umgeschrieben statt prozentkodiert: Aus „Einführung“ wird einfuhrung – ein Link, der das Einfügen in einen Chat übersteht.

Der Parser hier ist die eigene CommonMark-Implementierung dieses Repositorys – dieselbe, die der DOCX-Konverter benutzt – und erreicht 99,8 % der 652 Beispiele aus der Spezifikation. GFM-Pipe-Tabellen sind eine Ergänzung darüber.

So funktioniert es

  1. Schreiben Sie das Markdown oder fügen Sie es ein

    Die Vorschau aktualisiert sich beim Tippen. Ein YAML-Front-Matter-Block oben wird erkannt und aus der Vorschau herausgelassen, statt als horizontale Linie gerendert zu werden.

  2. Wechseln Sie zu HTML, wenn Sie die Ausgabe brauchen

    Dasselbe Dokument als HTML, bereit zum Kopieren in ein CMS oder eine Mail-Vorlage. Der Download liefert eine vollständige Datei.

  3. Prüfen Sie mit der Gliederung die Überschriftenstruktur

    Jede Überschrift mit dem Anker, den sie bekommen wird. Ein Sprung von h2 zu h4 fällt hier sofort auf, ein doppelter Anker ebenso.

Häufige Fragen

Warum wird rohes HTML standardmäßig verworfen?

CommonMark sagt, es durchzureichen, was für ein Dokument, das Sie geschrieben haben, richtig ist und für eines, das Sie eingefügt haben, ein Cross-Site-Scripting-Loch. Der Schalter ist da, mit Warnung, für Ihre eigenen Dokumente.

Meine Tabellen werden nicht gerendert

Pipe-Tabellen sind eine GitHub-Erweiterung, kein Teil von CommonMark. Der Schalter ist standardmäßig an; ist er aus, sehen Sie das strikte Spezifikationsverhalten, das die Pipes als Text rendert.

Warum sind die Anker romanisiert?

Damit ein Link auf eine koreanische Überschrift das Einfügen in ein Chatfenster überlebt. Ein prozentkodierter Anker ist korrekt und unlesbar, und mehrere Systeme machen ihn unterwegs kaputt.

Eingabe aus

Danach

Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.