Markdown to HTML Converter

Draft in plain text, inspect the markup immediately

Markdown is useful because the source remains readable before rendering. The final web representation, however, is HTML: headings become heading elements, list markers become list items, links need attributes, and paragraphs need explicit boundaries. This online Markdown to HTML converter provides both views. Type Markdown on the left, then switch the right side between Live Preview and HTML Source without rerunning a command.

The converter supports a practical subset: ATX headings from one to six hashes, horizontal rules, single-line blockquotes, pipe tables, single-level ordered and unordered lists, images, links, bold, italic, strikethrough, inline code, and fenced code blocks. Blank-line-separated prose becomes paragraphs; remaining single line breaks inside a prose block become <br />.

It also offers Wrap in full HTML document. When disabled, output is a fragment suitable for a CMS field or template. When enabled, output includes a doctype, lang="en", charset and viewport metadata, a title, an embedded style sheet, and a body around the converted content.

Build a release note from source to output

Enter:

# Version 2.3

The release is **ready** for [testing](https://example.com/test).

| Area | Owner |
| --- | --- |
| API | Sam |
| UI | Lee |

```sh
npm test

The fragment includes an `<h1>`, a paragraph with `<strong>` and `<a>`, a table, and a code block. Generated links open in a new tab and include `rel="noopener noreferrer"` plus presentation classes. Generated images receive their source, alt text, and utility classes. Fenced code receives `<pre><code>` and a `language-sh` class inferred from the first line after the opening fence.

The preview injects generated output into a styled container, so you can inspect headings, lists, blockquotes, code, and tables. The HTML Source tab shows exactly what Copy and Download use. Preview styling is not embedded in fragment output, aside from classes attached to some generated elements; the host site still determines final appearance.

## The compiler’s sequence matters

This converter is implemented with ordered text transformations rather than a CommonMark parser. Knowing the sequence helps explain edge cases.

First, ampersands, less-than signs, and greater-than signs are escaped. Raw HTML in Markdown is therefore displayed as text instead of passed through as elements. A pasted `<script>` is encoded rather than executed as raw Markdown HTML.

Fenced code blocks are then stored behind placeholders, followed by inline code. This protects their contents from most later emphasis and link rules. The first fenced-content line is treated as a language only when it consists solely of letters, digits, underscores, or hyphens. Otherwise it remains code and the class uses `language-plaintext`.

Horizontal rules, headings, blockquotes, tables, lists, images, links, emphasis, and strikethrough are processed in that order. Finally, blank-line-separated blocks become paragraphs unless they begin with a recognized block-level output token. Stored inline and fenced code is restored at the end.

This approach is fast and transparent, but overlapping Markdown constructs can differ from CommonMark or GitHub Flavored Markdown (GFM). Use the preview as evidence of this converter’s behavior rather than assuming portability to another renderer.

## Tables have a local dialect

Any line beginning with `|` can start table collection. Following lines continue while they begin with a pipe, or contain a pipe while table collection is active. Cells are split at every `|`; escaped pipes inside cell content are not specially protected. Leading and trailing pipes are removed, and cell text is trimmed.

Rows whose every cell consists only of hyphens and colons are removed as divider rows. The first remaining row always becomes `<thead>`; all others become `<tbody>`. Alignment colons are not converted into text alignment. Generated table markup carries utility classes for borders and spacing.

For reliable output, use leading and trailing pipes, include a conventional divider, and avoid literal pipes inside cells:

```markdown
| Command | Purpose |
| --- | --- |
| `build` | Create files |
| `test` | Run checks |

Lists and blockquotes are intentionally shallow

Consecutive lines beginning with -, *, or + become one unordered list. Consecutive lines beginning with a number and period become an ordered list. Leading indentation is accepted by the matcher but does not create nested list structure; every matched item is emitted at one level. Continuation paragraphs, task-list checkboxes, and complex item blocks are not modeled.

Blockquotes are recognized one source line at a time when the escaped line begins with > followed by whitespace. Consecutive quote lines become separate <blockquote> elements rather than one container with multiple paragraphs. Nested quote depth is not constructed.

These limits make the tool suitable for straightforward notes and snippets. Documentation relying on CommonMark container rules should be rendered with a full parser.

Paragraphs and hard breaks

After block conversions, the source is split wherever two or more newline characters occur. A block already beginning with a recognized heading, list, blockquote, preformatted block, table, horizontal rule, or code placeholder is left unwrapped. Other blocks receive <p>. Single newline characters within those blocks become <br />.

That means this converter treats ordinary source line wrapping as a visible break. CommonMark generally treats a single newline in a paragraph as a soft line ending unless explicit hard-break syntax is used. If your prose editor wraps lines manually, inspect the output for extra <br /> elements.

Fragment or complete document?

Fragment mode is best when a larger page already supplies <html>, <head>, styles, and <body>. Download names the result snippet.html. Copy provides only generated content tags.

Full-document mode wraps the fragment in a usable static shell and downloads document.html. Its embedded CSS sets a system font, reading width, heading spacing, code and preformatted backgrounds, blockquote treatment, and table borders. The title is always Document, language is always English, and the style is fixed. There are no fields for metadata, canonical URLs, custom CSS, or page title, so edit those after downloading when needed.

Switching the checkbox recomputes both Preview and HTML Source. In preview mode, a full document string is inserted into the preview container; browsers may not represent that nested document exactly as opening the downloaded file would. Use the downloaded document in a browser for the final check.

A publication workflow

1. Draft Markdown with simple, supported constructs.
2. Use blank lines to make intended paragraph boundaries explicit.
3. Check Live Preview for hierarchy, table cells, list grouping, and line breaks.
4. Switch to HTML Source and inspect generated attributes and wrappers.
5. Decide whether the destination expects a fragment or complete HTML document.
6. Click Copy for a CMS or Download for snippet.html or document.html.
7. Validate the HTML in its destination and apply site-specific sanitization if content is untrusted.
8. Check keyboard behavior, link purpose, image alternative text, heading order, and color or style choices separately.

Clear empties input and output. Copy and Download remain disabled until conversion produces output. Everything runs from editor state in the component; no syntax error panel is provided.

Security and trust boundaries

Escaping raw &, <, and > reduces direct raw-HTML injection through Markdown text. Generated links and images still take source strings from Markdown destination syntax and place them into quoted attributes. The converter does not validate URL schemes or perform a dedicated sanitizer pass. Quotation marks inside a destination can also interact poorly with the simple regular expressions.

Do not treat arbitrary untrusted Markdown as safe solely because raw angle brackets are escaped. Apply a maintained HTML sanitizer configured for allowed elements, attributes, and URL protocols before publishing user content. Content Security Policy and safe DOM insertion remain valuable defense layers.

The Live Preview uses dangerouslySetInnerHTML with generated output. The raw-tag escaping is a relevant protection, but this custom compiler has not replaced a security-reviewed Markdown and sanitization pipeline.

Features not implemented here

There is no syntax highlighting engine; fenced code only receives a language class. There are no footnotes, definition lists, autolinks, heading IDs, nested lists, task-list semantics, fenced-code attributes, reference-style links, escaped-pipe table cells, or HTML passthrough. Table alignment is ignored. Ordered-list start values are not retained because output always uses a plain <ol>.

Images receive alt text but no title parsing. Links receive new-tab behavior automatically, with no toggle. The converter does not generate a table of contents or export Markdown itself. Describing these boundaries prevents confusing “works in one renderer” with a portable Markdown standard, since Markdown ecosystems differ even among mature implementations.

Converter FAQ

Is this CommonMark compliant?

No. It is a custom, regex-based subset with its own paragraph, table, list, and quote behavior.

Can I include raw HTML in the Markdown?

Raw less-than and greater-than characters are escaped before conversion, so raw tags appear as text rather than passing through as markup.

Does a fenced language name enable highlighting?

No. It adds a language-name class to <code>. A separate client-side or build-time highlighter would need to use that class.

Are nested lists supported?

No. Matched ordered or unordered items are rendered at a single level regardless of indentation.

Why does every source line become a break?

Within a prose block, remaining newline characters are replaced with <br />. This differs from soft-line-break behavior in many Markdown parsers.

What does full-document mode add?

It adds the doctype, English root element, charset, viewport, fixed title, embedded styles, and body wrapper. Download then uses document.html instead of snippet.html.

Do links always open a new tab?

Yes. Generated anchors include target="_blank" and rel="noopener noreferrer"; there is no control to change that behavior.

Is preview appearance part of copied HTML?

Not generally. The page’s preview container supplies styling. Full-document mode includes its own fixed CSS, while fragment mode relies on destination styles except for classes written into some generated tags.