GFM + XSS-Sanitization, alles im Browser
Markdown ist eine schlanke Auszeichnungssprache von John Gruber (2004), die Klartext in HTML konvertiert. Sie wird genutzt in README-Dateien auf GitHub, Slack-Nachrichten, Discord, Notion, Reddit, Stack Overflow. Dieser Konverter unterstützt GitHub-Flavored Markdown (GFM) — also Tabellen, Code-Blöcke mit Syntax-Markierung, Task-Listen und Auto-Links. Vor der Darstellung wird das HTML mit DOMPurify gegen XSS gehärtet.
Markdown ist eine leichtgewichtige Auszeichnungssprache, die 2004 von John Gruber in Zusammenarbeit mit Aaron Swartz entwickelt wurde. Das Ziel: Texte in Klartext schreiben können, die trotzdem strukturiert sind und sich problemlos in HTML konvertieren lassen. Heute ist Markdown der De-facto-Standard für technische Dokumentation und wird unter anderem auf GitHub (README, Issues, Pull Requests), Notion, Discord, Slack, Reddit, Stack Overflow und in vielen statischen Site-Generatoren (Jekyll, Hugo, Next.js, Astro) verwendet.
.md-Datei lässt sich in jedem Texteditor, jeder Git-Versionierung und auf jeder Plattform öffnen und vergleichen.Die folgenden Elemente decken 90% des Alltags ab:
# Heading 1
## Heading 2
### Heading 3
**bold text** *italic text* ~~strikethrough~~
- bullet list item
- another item
- nested item
1. ordered list item
2. second item
[Link text](https://calcsi.com)
`inline code`
```js
// fenced code block
console.log('Hello, Markdown');
```
| Column A | Column B |
| -------- | -------- |
| cell 1 | cell 2 |
| cell 3 | cell 4 |
> A blockquote.
- [x] completed task
- [ ] open task- [ ]), Strikethrough (~~Text~~), Auto-Links und Syntax-Highlighting für Code-Blöcke. Wird in diesem Tool standardmäßig verwendet.README.md als Einstiegspunkt.Das Tool nutzt die marked-Bibliothek mit aktivierten Optionen gfm: true und breaks: true — also GitHub Flavored Markdown, das auf CommonMark basiert. Das deckt nahezu alle GitHub-, Slack- und Notion-Kompatiblen Markdown-Texte ab.
Nein. Die Konvertierung läuft komplett im Browser über die JavaScript-Bibliotheken marked und DOMPurify. Dein Text verlässt niemals dein Gerät. Du kannst sogar die Netzwerkverbindung trennen, sobald die Seite geladen ist.
Mit der Syntax . Beispiel: . Der Alt-Text ist wichtig für Barrierefreiheit und SEO. Möchtest du Größe oder Klasse setzen, kannst du an dieser Stelle auch direkt einen <img>-Tag schreiben — der Konverter akzeptiert eingebettetes HTML.
Ja. Markdown lässt eingebettetes HTML zu, sodass du z.B. <details> für aufklappbare Abschnitte oder <kbd> für Tasten verwenden kannst. Achtung: Vor der Anzeige wird das Ergebnis mit DOMPurify gesäubert, sodass <script>, Inline-Event-Handler und ähnliche XSS-Vektoren entfernt werden.
Ja. Da GFM aktiv ist, werden Pipe-Tabellen unterstützt — Spalten werden mit | getrennt und Header durch eine ----Trennzeile von den Datenzeilen abgegrenzt. Alignment per Doppelpunkt: :--- links, :---: zentriert, ---: rechts.
Ja. Über den Button HTML kopieren wird das gerenderte HTML in die Zwischenablage kopiert und kann z.B. in einem E-Mail-Client, CMS oder Code-Editor eingefügt werden.
Markdown wurde 2004 von John Gruber als "text-to-HTML"-Schreibsprache veröffentlicht und ist seitdem zur Lingua Franca von Entwicklerdokumentation, README-Dateien, Static-Site-Generatoren und Chat-Tools geworden. Lange Zeit gab es keine formale Spezifikation, was zu Dutzenden inkompatibler Parser führte. Erst CommonMark (commonmark.org) hat 2014 die Syntax exakt definiert: #-Headings, **bold**, *italic*, Listen mit - oder 1., Code mit Backticks, Links als [text](url), Blockquotes mit > und HTML-Inlining werden seitdem überall gleich interpretiert.
Über CommonMark hinaus haben sich GitHub Flavored Markdown (GFM), MultiMarkdown und MDX etabliert. GFM ergänzt Tabellen mit Pipes (| A | B |), Strikethrough mit ~~Text~~, Task-Listen (- [ ], - [x]), Autolinks und Code-Fences mit Sprachhinweis (```js). Unser Konverter nutzt die marked-Bibliothek mit { gfm: true, breaks: true } — Sie erhalten also alle GFM-Features plus harte Zeilenumbrüche, wie sie auch GitHub Issues und Slack rendern.
Sicherheitskritisch: Markdown erlaubt eingebettetes HTML, und ein naiver Renderer würde damit XSS einschleusen lassen. Wir leiten den HTML-Output deshalb durch DOMPurify, das gefährliche Tags (<script>, <iframe>), on*-Event-Handler und javascript:-URLs entfernt, bevor das Vue-v-html rendert. So können Sie auch Markdown aus unbekannter Quelle gefahrlos vorab anschauen.
Die Konvertierung ist live — alles passiert clientseitig, ohne Upload. Folgen Sie diesen Schritten:
# für Headings, - oder * für Listen, **fett** und *kursiv*.| und Trennzeile | --- |, Task-Listen mit - [x], Code-Fences mit Sprachangabe wie ```python.HTML kopieren, um den gerenderten, durch DOMPurify gesäuberten HTML-Code in die Zwischenablage zu legen — fertig zum Einfügen in CMS, E-Mail-Templates oder statische Seiten..md, versionieren Sie es in Git und nutzen Sie das Tool als Quick-Preview. So bleibt die Quelle versioniert, der HTML-Build erfolgt im CI.Hier sind typische Markdown-Eingaben und ihr HTML-Ergebnis:
# Title wird zu <h1>Title</h1>, ## Subtitle zu <h2>Subtitle</h2> usw. bis Ebene 6.**Important** ergibt <strong>Important</strong>, *emphasis* ergibt <em>emphasis</em>, `code` wird zu <code>code</code>.| Name | Age |\n| ---- | --- |\n| Anna | 29 | rendert eine vollständige <table> mit <thead> und <tbody>.js plus Code plus drei Backticks ergibt <pre><code class="language-js">...</code></pre> — bereit für Highlight.js oder Prism.- [x] erledigt und - [ ] offen erzeugen <input type="checkbox" checked disabled> und unchecked — perfekt für Issues und To-Do-Listen.Markdown ist absichtlich minimal — alles, was über CommonMark + GFM hinausgeht, ist nicht-portabel. Erstens: Footnotes, Definition Lists und Math (KaTeX) sind weder in CommonMark noch in GFM enthalten; Pandoc und MultiMarkdown können das, unser Konverter nicht. Wer Mathe braucht, embeddet $$E=mc^2$$ und lässt es nachgelagert von KaTeX oder MathJax rendern. Zweitens: Frontmatter. YAML-Blöcke am Dateianfang (---\ntitle: X\n---) gehören zu Static-Site-Generatoren (Jekyll, Hugo, MkDocs), nicht zur Markdown-Syntax. Sie würden hier als Heading --- gerendert. Drittens und kritisch — XSS: Markdown erlaubt <script>-Tags und <a href="javascript:...">-Links als Inline-HTML. Ein naiver Renderer würde die Payload ausführen. Wir filtern den HTML-Output mit DOMPurify; gefährliche Tags, Event-Handler-Attribute und JS-URLs werden entfernt, bevor Vue rendert. Auch wenn Sie sich auf den Schutz verlassen können, gilt: vertrauen Sie niemals Markdown aus unbekannter Quelle ungeprüft in einer Produktionsumgebung — manche User-Provided-Markdown-Engines aktivieren allowDangerousHtml per Default, was die Sanitization umgeht. Viertens: HTML-Encoding. Zeichen wie < und > müssen Sie als </> schreiben, wenn sie buchstäblich erscheinen sollen — sonst interpretiert Markdown sie als HTML-Anfang. Fünftens: Linkprefetching. Browser können http(s)://-Links beim Hover prefetchen. Bei sensiblen URLs (Magic-Links) ist das ein Datenschutzproblem; nutzen Sie rel="noopener noreferrer" oder nofollow.
breaks: true). Nicht unterstützt: Footnotes, MathJax/KaTeX, Frontmatter, MDX-JSX.<script>, <iframe>, on*-Handler und javascript:-URLs entfernt. Für Produktionsumgebungen empfehlen wir trotzdem zusätzlich eine Content-Security-Policy (script-src 'self'), denn Defense in Depth ist immer besser.`x = 1`), drei für Blöcke (mit Sprachhinweis ```js). Markdown wandelt das automatisch in <code>-Elemente und HTML-encodet Zeichen wie <, sodass der Browser nichts ausführt.| --- | ist, sonst werden Pipes als reiner Text interpretiert. Beispiel: | Name | Age | <br> | --- | --- | <br> | Anna | 29 |. Außerdem müssen alle Zeilen die gleiche Spaltenzahl haben.. Für lange Texte besser ein CDN nutzen.marked und DOMPurify laufen als JavaScript-Bibliotheken vollständig clientseitig. Keine Daten werden an CalcSI gesendet. Auch das Copy-to-Clipboard nutzt die lokale navigator.clipboard-API.