Practical guide

How to use Markdown Preview

Markdown Preview turns a practical subset of Markdown into a readable local preview and reviewable HTML source. It supports headings, paragraphs, emphasis, strong text, inline code, fenced code blocks, quotations, links, horizontal rules, and ordered or unordered lists without executing raw HTML from the pasted document.

Step by step

Paste or write Markdown and select Render preview.
Compare the visual result with the generated HTML, especially around nested punctuation and list boundaries.
Copy the HTML only when the destination accepts this supported subset and applies its own sanitization policy.

Example

Input

## Local tools

- Private input
- Reviewable output

`npm run build`

ResultA level-two heading, two-item list, and inline code rendered as safe DOM nodes

How it works

A small browser-side parser recognizes block structures line by line and creates elements with DOM methods. Inline links are restricted to http, https, mailto, anchors, or relative paths. Raw HTML remains visible as text instead of becoming active markup.

Important limitations

This is not a complete CommonMark or GitHub Flavored Markdown implementation and does not support tables, task lists, footnotes, nested lists, or embedded HTML.
Ambiguous emphasis and deeply nested inline markup may render differently in another Markdown engine.
Copied HTML still needs contextual sanitization and policy review before accepting untrusted content in a production application.

README drafting

Preview headings, lists, links, quotations, and code while drafting a short project note without uploading an unpublished repository description.

CMS handoff

Inspect the HTML shape produced by a bounded Markdown subset before placing reviewed content into a system with its own sanitizer.

Unsafe sample review

Demonstrate that pasted tags remain text in this preview while discussing why raw HTML support requires a maintained sanitization policy.

Review the result

What to check before using the output

Compare the result in the destination Markdown engine. Pay special attention to blank lines, nested lists, underscores inside words, link destinations, raw HTML, code fences, and features this subset intentionally leaves unsupported.

Confirm the destination dialect.
Review every link target.
Keep raw HTML disabled for untrusted input.
Sanitize again at the production boundary.

Choose the right method

When another tool is better

Use a maintained CommonMark or GitHub Flavored Markdown parser together with a well-configured HTML sanitizer when exact dialect compatibility, plugins, tables, task lists, or untrusted production content are required.

Privacy and browser behavior

Draft text and generated nodes remain in the tab. Documents can contain unpublished plans, internal links, credentials in code blocks, or personal information, so remove secrets before sharing previews or copied HTML.

Frequently asked questions

Can pasted script or iframe tags run?

No. Raw HTML is handled as text, and the preview is assembled with DOM nodes rather than assigning the source to innerHTML.

Why does GitHub render my document differently?

GitHub supports a larger Markdown dialect. Use its renderer or a maintained CommonMark library when exact compatibility is required.

Is the generated HTML automatically safe everywhere?

No. The preview avoids executing source HTML here, but every destination must still enforce its own allowed elements, attributes, and URL schemes.

Markdown Preview