Developer Guide
Live Markdown Preview with GFM Tables
Preview GitHub Flavored Markdown in the browser with tables, fenced code, and strikethrough. marked + DOMPurify; copy HTML, not a CMS. Single newlines stay single.
Markdown is a writing format. HTML is what browsers paint. /tools/markdown-editor sits between them: type on the left, see GitHub Flavored Markdown on the right, copy sanitized HTML when the preview looks right. It uses marked with gfm: true and breaks: false, then DOMPurify so a fenced block cannot become a live <script>. It is not GitHub, not a CMS, and not /tools/html-renderer (that sandbox runs HTML you already have).
What GFM means on this page
GitHub Flavored Markdown adds tables, strikethrough, autolinks, and task-list-ish syntax on top of CommonMark. Tables need a header row, a separator row with hyphens, and a blank line before the table so the parser does not treat it as a paragraph. Fenced code uses three backticks and an optional language tag (js, ts, bash).
breaks: false means a single newline inside a paragraph stays a space, like CommonMark and like GitHub. Two newlines start a new paragraph. If you want <br> per line, that is a different Markdown dialect; this editor will not invent it.
Sanitized HTML, then copy
The preview is HTML that has already gone through DOMPurify. Forbidden tags include script, iframe, object, embed, form, link, meta, base, style, textarea, button, svg, math, noscript, and template. srcdoc is stripped. Data attributes are not allowed. Links and images that GFM produced stay if they are ordinary HTML.
Copy HTML copies that sanitized tree, not the raw Markdown. Paste it into a post that accepts HTML. Paste Markdown into GitHub, a README, or another Markdown renderer — those sites will parse again and may differ (mermaid, math, and alert blocks are not enabled here).
Sample document and tables
The editor opens with a short sample: a heading, a GFM table with Feature / Supported columns, a js fence that logs hello, markdown, a list, a link to thedevtools.in, inline code, and strikethrough. Use it as a syntax reminder, then replace it.
If a table renders as a single mashed paragraph, you probably omitted the blank line before the pipe rows or the | --- | separator. Alignment colons (|:---|) work; nested tables do not.
Markdown Editor versus HTML Viewer versus Diff
/tools/html-renderer executes HTML, CSS, and JavaScript in a sandbox. That is the wrong window for untrusted Markdown. Convert here first (scripts are dropped), and only then, if you meant to run a page, open the HTML viewer with HTML you wrote on purpose.
Two Markdown drafts belong in /tools/string-diff if you need a revision highlight. /tools/source-code-viewer adds line numbers to a paste but does not parse GFM. Regex testing is /tools/regex-tester.
What this editor will not do
No mermaid diagrams, no KaTeX, no YAML front matter, no file upload, no collaboration cursor. Images in Markdown are <img src> as written — a javascript: URL will not survive sanitizer policy the way a relative PNG will, but you should still not paste secrets into an image URL you do not trust.
Very large pastes are limited by the tab. This is a preview, not a 200-page book pipeline.
Common pitfalls
Expecting a single Return key to insert a line break. Forgetting the blank line before a table. Copying Markdown when the destination wants HTML, or HTML when the destination wants GFM. Pasting the output into /tools/html-renderer and assuming scripts in the original Markdown still run — they should not, because they were stripped.
markedGFM on, CommonMark-style line breaks (not GitHubbreaks: truefor every newline).- DOMPurify drops executable and document-level tags before preview and copy.
- No mermaid, math, or CMS save.
Worked examples
GFM table
## Status
| Check | Result |
| ----- | ------ |
| Tables | Yes |
| Fenced code | Yes |A heading, then an HTML <table> with two columns. A blank line before the table is required.If you omit the blank line, marked may keep the pipes as paragraph text.
Fenced JavaScript
```js
console.log('hello, markdown');
```Renders as a <pre><code class="language-js"> block. The snippet is not executed. Copy HTML to move the markup, not to run it.
Frequently asked questions
Does a single newline become a <br>?
No. breaks is false. Use a blank line for a new paragraph, or two trailing spaces plus newline if you need a hard break the way CommonMark specifies.
Can Markdown in the editor run JavaScript?
The preview sanitizes HTML and forbids script, iframe, and friends. Treat untrusted Markdown as untrusted anyway; this is a local preview, not a security boundary for a product you ship.
Is this the same as GitHub’s README renderer?
Close on tables, fences, and strikethrough. GitHub adds extra features (mermaid, alerts). Copy Markdown into GitHub if you need those.
When should I use the HTML Viewer instead?
When you already have HTML/CSS/JS you intend to execute in a sandbox. Convert Markdown here first if your source is .md.
Is anything uploaded?
No. Parse and sanitize run in the browser. Copy is your clipboard, not a server save.
Summary
Write GFM on the left of /tools/markdown-editor, confirm tables and fences on the right, and copy sanitized HTML only when the destination wants HTML. Leave scripts and iframes at the door. Diff two drafts on /tools/string-diff, and use /tools/html-renderer only for HTML you mean to run.