Markdown Previewer
Preview Markdown locally with GFM or CommonMark rules, raw-HTML safety controls, heading anchors, source audits, and exportable HTML.| Check | Status | Value | Detail | Copy |
|---|---|---|---|---|
| {{ row.check }} | {{ row.status }} | {{ row.value }} | {{ row.detail }} |
{{ outputHtml }}{{ resultJson }}
Introduction
Markdown review is a translation check. The source stays readable in plain text, but the published document depends on the parser, the allowed HTML rules, heading-anchor behavior, link handling, and the styling of the destination. A small syntax choice can turn a table into a paragraph, leave task boxes as ordinary bullets, break a section link, or make a raw tag disappear.
Markdown is intentionally light. Writers mark structure with characters such as # for headings, backticks for code, > for quotes, and pipes for many table formats. That compact notation is useful in repositories, release notes, support answers, runbooks, and CMS drafts because the text remains editable before rendering. The tradeoff is that two destinations can read the same source differently.
- Markdown flavor
- The rule set used to decide which features are recognized. GitHub-flavored Markdown, often shortened to GFM, adds common extensions such as tables, task lists, strikethrough, and autolinks on top of the CommonMark base.
- Raw HTML
- HTML typed directly into the Markdown source. Some destinations allow it, some clean it, and some remove it or show it as text.
- Heading anchor
- A generated heading ID used by section links, tables of contents, and documentation cross-references.
Preview mismatches usually come from a few repeat offenders rather than from Markdown as a whole. Tables and task lists depend on extension support, heading links depend on stable IDs, raw HTML depends on the destination's safety policy, and link behavior depends on how external targets are opened or filtered.
Documents that mix prose with code fences, checklists, tables, links, block quotes, and occasional HTML need an extra pass before handoff. The important questions are whether the intended structure survived rendering, whether link targets are acceptable, and whether raw HTML is allowed in the place where the document will finally live.
A local rendering pass is still a rehearsal, not a guarantee. The final destination may add its own sanitizer, heading-ID rule, CSS, table styling, and link policy. Use the rehearsal to catch obvious structure and safety problems, then test the real destination when anchors, raw HTML, or table layout are critical.
How to Use This Tool:
Start with the parsing and safety choices, then use the preview and audit together. The visual page shows whether the Markdown reads correctly, while the audit catches structural warnings that are easy to miss by eye.
- Paste text into Markdown source, drag a file onto the editor, or choose Browse MD. Local files must be Markdown or text files under 1 MB.
- Choose Markdown flavor. Use GitHub-flavored Markdown for README-style tables, task lists, strikethrough, and autolinks. Use CommonMark core when the destination follows a stricter baseline.
- Set HTML safety. Sanitize rendered HTML is the normal review setting. Escape raw HTML as text makes tags visible, and Strip raw HTML tags removes them before the Markdown is parsed.
- Set External links to choose whether HTTP and HTTPS links should open in a safer new tab, then decide whether Heading anchors should add deduplicated heading IDs.
- Check Rendered Preview first, then open Source Audit for parser status, document size, reading time, heading outline, links, structured blocks, task-list counts, and review notes.
- Use HTML Markup or JSON after the audit looks right. You can copy or download the generated HTML, copy or download audit CSV, export a DOCX audit when that export is available, and copy or download the JSON summary.
Interpreting Results:
Rendered Preview is the current HTML view after the selected Markdown flavor, raw HTML policy, heading-anchor option, and link policy have been applied. If the preview looks right but the audit reports a warning, read the warning before copying output. Missing top-level headings, multiple top-level headings, unclosed code fences, and unsafe link targets can all be hard to spot in a formatted page.
Source Audit turns the rendered result into review rows. The parser row confirms whether the intended Markdown profile was available or a simpler fallback was used. The document-size and reading-pass rows estimate the amount of content. The heading, link, structured-block, and task-list rows explain whether the page has the expected outline and Markdown structures.
The safety rows reduce risk, but they are not a full security review for a publishing system. A clean result means the current browser preview removed or neutralized the issues it detected under the selected settings. The final destination still needs its own content rules, sanitizer, encoding, permissions, and editorial review.
Technical Details:
Markdown rendering is a transformation from plain text into an HTML fragment. Block parsing identifies headings, paragraphs, lists, tables, code fences, and block quotes. Inline parsing then resolves emphasis, links, images, inline code, and similar spans inside those blocks. A flavor setting changes which extensions are recognized, so the same source can produce different HTML when tables, task checkboxes, strikethrough, or autolinks are involved.
Raw HTML is the main safety distinction. If raw tags are allowed through without review, the rendered page can include elements or attributes that the destination does not want. Escaping keeps those tags visible as text, stripping removes tag-shaped text before parsing, and sanitizing cleans the rendered fragment before it is displayed. Link handling is a separate pass because unsafe schemes and new-tab behavior are not Markdown syntax by themselves.
Transformation Core:
| Stage | Rule | Visible Signal |
|---|---|---|
| Normalize text | Leading byte-order marks and carriage-return line endings are normalized before parsing. | Document size reports lines, source bytes, and generated HTML bytes. |
| Handle raw HTML | Tags are sanitized after rendering, escaped as text before parsing, or stripped before parsing according to the selected safety mode. | HTML safety reports whether raw tags were found and how unsafe links were handled. |
| Parse Markdown | GFM mode targets tables, task lists, strikethrough, and autolinks. CommonMark core keeps extension behavior conservative. | Preview parser shows the parser profile used for the current pass. |
| Add heading anchors | When enabled, heading IDs are lowercased, accent-folded, slugged, and deduplicated. | Heading outline lists heading levels, text, and generated anchor behavior. |
| Review links | JavaScript-style link targets are removed or neutralized. Secure external-link mode adds safer new-tab attributes to HTTP and HTTPS links. | Links reports total, external, and secured external links. |
Formula Core:
The audit uses deterministic counts from the rendered fragment. Reading time is a planning estimate based on a 225 words-per-minute review pace, not a promise about how long a careful technical review will take.
| Symbol | Meaning |
|---|---|
B | Review block count in the summary and audit. |
H, P, L, C, T, Q | Heading, paragraph, list, code-block, table, and block-quote counts. |
R | Estimated reading minutes. |
W | Word count extracted from the rendered text. |
A source with 520 extracted words reports ceil(520 / 225) = 3 reading minutes. A rendered fragment with 2 headings, 4 paragraphs, 2 lists, 1 code block, 1 table, and no block quotes reports 10 review blocks.
Warning Rules:
| Warning | Why It Appears | What to Check |
|---|---|---|
| No H1 heading | The rendered document has words but no top-level heading. | Add one page title when the destination expects a clear root heading. |
| Multiple H1 headings | More than one top-level heading was detected. | Keep one main title and demote later sections when a single page outline matters. |
| Unsafe link reference | A JavaScript-style Markdown or HTML link target was found. | Replace it with a normal URL, remove it, or verify that the destination rejects it too. |
| Raw HTML sanitized | Tag-shaped source was present while sanitize mode was selected. | Review whether the raw HTML is intentional and whether the final destination allows it. |
| Unclosed code fence | The number of opening fence markers is odd. | Close the code block before publishing, especially in release notes or command examples. |
Privacy and Limits:
After the page assets load, pasted Markdown and accepted local files are processed in the browser session. The preview, generated HTML, CSV audit, DOCX audit, and JSON output are produced from the current local source and settings. File loading accepts text-like Markdown files under 1 MB.
The preview is intentionally conservative, but it is not a replacement for the destination's parser, sanitizer, access controls, or content-security rules. Use it to catch structure and safety issues before handoff, then confirm important output in the system that will actually publish the content.
Worked Examples:
Release note with a checklist
A release note with one # Release notes title, a task list, a status table, a fenced code example, a quote, and one external link should show one top-level heading, tracked task counts, one table, one code block, one block quote, and a secured external-link count in Source Audit.
CMS draft with raw HTML
A draft that includes <span class="badge">Beta</span> may need different review modes. Sanitized preview shows the cleaned rendered result, escaped mode shows the tags as text, and stripped mode removes the tags before parsing so the writer can see how much meaning depends on raw HTML.
Unsafe link before handoff
A Markdown link such as [demo](javascript:alert(1)) can be missed during plain-text editing. The preview removes or neutralizes that target and reports it in review notes, which gives the writer a chance to replace the link before copying HTML.
FAQ:
Why does the preview differ from my repository or CMS?
The destination may use a different Markdown flavor, sanitizer, heading-anchor rule, link policy, or CSS. Test a representative sample there when table layout, anchors, or raw HTML matter.
Which Markdown flavor should I choose?
Choose GitHub-flavored Markdown for README-style content with tables, task lists, strikethrough, or autolinks. Choose CommonMark core when you want a stricter baseline with fewer extensions.
Does sanitizing make untrusted HTML safe to publish?
No. Sanitizing the preview reduces risky rendering during review, but publishing systems still need their own validation, encoding, sanitizer, content rules, and permission checks.
Why did my file fail to load?
The loader accepts one text-like .md, .markdown, or .txt file under 1 MB. Other file types or larger files trigger a local file error.
Glossary:
- Markdown flavor
- The parsing rule set used to interpret Markdown syntax and extensions.
- Raw HTML
- HTML tags typed directly into the Markdown source rather than produced by Markdown syntax.
- Sanitizer
- A cleanup step that removes unsafe elements, attributes, or link targets from rendered HTML before display or publication.
- Heading anchor
- A generated heading ID that can support section links and tables of contents.
- Source Audit
- The review table that reports parser status, document counts, links, task lists, warning notes, and export-ready rows.
References:
- CommonMark Spec, CommonMark.
- GitHub Flavored Markdown Spec, GitHub.
- Cross Site Scripting (XSS), OWASP Foundation.