Markdown Previewer
Preview Markdown locally with GFM or CommonMark rules and sanitized HTML, plus structure checks and review notes before reusing the markup.{{ summaryTitle }}
{{ summaryLine }}
{{ computation.ok ? values.html_markup : '' }}
{{ exportStatus }}
| Review area | Status | Evidence | Copy |
|---|---|---|---|
| {{ row.label }} | {{ row.value }} | {{ row.detail }} |
Markdown is source text, not a finished page. A heading marker, list prefix, fenced block, or table row must be interpreted by a parser before it becomes HTML, and the final appearance still depends on the destination's styles.
Two readers can render the same document differently when their Markdown rules differ. CommonMark defines a portable core, while GitHub Flavored Markdown (GFM) adds familiar extensions such as tables, task-list items, and strikethrough. A document written for one destination should be reviewed with rules that resemble that destination.
| Choice | Useful when | Important limit |
|---|---|---|
| GFM | The destination supports GitHub-style extensions | Extensions may not survive in a CommonMark-only system |
| CommonMark core | Portability matters more than platform extras | The destination may still add its own extensions |
| Sanitize raw HTML | Allowed markup should render after unsafe content is removed | Sanitizers can differ between destinations |
| Escape raw HTML | Tags should be reviewed visibly as text | The output no longer renders those tags |
| Strip raw HTML | Tags should be removed before parsing | Text inside paired tags may remain |
Raw HTML deserves separate attention because Markdown can carry active or unsafe markup into a renderer. Sanitization removes dangerous elements and attributes from the generated HTML, and an isolated preview prevents that HTML from gaining normal page privileges. These protections reduce risk but do not certify the markup for every content management system or publishing policy.
Links are another handoff boundary. A protected external link opens separately with opener isolation, while a same-tab link keeps ordinary navigation behavior inside the isolated preview. Neither choice verifies that the destination is trustworthy; it only changes how a valid HTTP or HTTPS link is opened.
A useful preview checks more than visual appearance. Heading levels, list density, table rows, code blocks, raw tags, unsafe link references, and unclosed fences can reveal problems that are easy to miss in a polished render. The generated HTML should still be tested in the actual publishing destination because CSS, extensions, and sanitization policy can change the final page.
How to Use This Tool:
Match the parser and safety choices to the intended destination before judging the rendered document.
- Choose Markdown flavor, Raw HTML, and External links policies that reflect where the document will be used.
- Paste one document into Markdown source or load a local MD, Markdown, or text file. Use at most 100,000 characters and one file no larger than 2 MiB.
- Open Advanced only when you need unique heading IDs or want each single source line break to render as a break. The default leaves both behaviors off.
- Read the warning message, inspect the rendered document, and compare the generated HTML with the structure and review summaries before reusing the markup.
Interpreting Results:
A ready preview means the source passed the local input checks and produced sanitized HTML. It does not mean the document will look identical elsewhere. Confirm the parser label, HTML safety policy, external-link policy, and any review notes before copying the markup.
- Use the rendered view to judge reading order and obvious formatting.
- Use the HTML view to confirm the markup that will actually be handed off.
- Use structure counts to find unusually heading-heavy, list-heavy, table-heavy, or code-heavy drafts; the counts are descriptive, not quality grades.
- Treat a fallback-parser note as a reason to recheck the document with the intended renderer because only a reduced Markdown subset is available.
Technical Details:
Markdown previewing is an ordered text transformation. Safety policy must be applied before the final markup is shown, while heading and link policies must operate on the sanitized result so they cannot restore removed active content.
Transformation Core
The complete path is source normalization → raw-HTML policy → Markdown parsing → HTML sanitization → optional heading IDs → external-link policy → readable markup and isolated preview.
| Stage | Transformation | Result |
|---|---|---|
| Normalize | Remove a leading byte-order mark and leading zero-width controls; convert CRLF or CR line endings to LF | Stable source text |
| Raw HTML | Keep for later sanitization, escape tags as text, or remove tag syntax | Policy-adjusted Markdown |
| Parse | Apply GFM or CommonMark-core behavior, including the soft-break choice | Candidate HTML |
| Sanitize | Remove unsafe elements, event attributes, and script-style URLs | Safe preview markup |
| Heading IDs | Optionally derive lowercase hyphenated IDs and suffix duplicates | Unique anchors such as release-notes-2 |
| Links | Protect external HTTP(S) links or preserve same-tab behavior | Final generated HTML |
Rule Core
Review notes come from explicit source and runtime conditions rather than a general quality score.
| Condition | Review note |
|---|---|
| The primary parser is unavailable | A reduced built-in Markdown subset is in use |
| Raw tags are present under Sanitize | The number of tags passed through sanitization is reported |
| A Markdown or HTML link uses a script-style URL | The unsafe reference is neutralized and counted |
| The number of triple-backtick fence lines is odd | One fenced code block appears unclosed |
| No line starts with one heading marker and text | No level-one heading is present |
The structure profile counts headings, paragraphs, list items, table rows, code blocks, and links or images in the final sanitized HTML. The displayed block total adds headings, paragraphs, list items, table rows, and code blocks; links and images remain a separate count. Word counting excludes fenced code and raw tag syntax.
Heading IDs are added only when a parsed heading has no existing ID. Duplicate generated IDs receive numeric suffixes beginning with -2. External-link protection applies only to rendered HTTP and HTTPS anchors; unsafe script-style references are removed during sanitization.
Privacy and Limits:
Pasted text and accepted local files are read and transformed in the browser; the document is not uploaded for previewing.
- Only the first dropped or selected file is read. Extra files are ignored, and accepted inputs are MD, Markdown, or plain-text files no larger than 2 MiB.
- The source document is not placed in shared page settings. Copying, downloading, or opening an external link is a separate user action.
- The preview is sanitized and shown in a sandboxed frame, but a destination may use different extensions, styles, or sanitization rules.
- Opening a link can disclose a visit to its destination. Link policy does not assess the destination's safety or privacy practices.
Worked Examples:
Checklist for a GitHub workflow
A draft containing task-list items and a pipe table should use GFM when GitHub is the destination. Switching to CommonMark core reveals which extensions may not carry over, while the structure count confirms that the table and list were actually parsed.
Raw tag and unsafe link review
A draft with a script tag and a script-style link is sanitized before preview. The unsafe link loses its active destination, the review notes report the neutralized reference, and the HTML view shows the exact markup available for handoff.
References:
- CommonMark Specification 0.31.2, CommonMark.
- GitHub Flavored Markdown Specification 0.29-gfm, GitHub.
- Cross Site Scripting (XSS), OWASP Foundation.
- HTML links, WHATWG HTML Living Standard.