Markdown Previewer
Preview Markdown code in real-time. Write, edit, and check your Markdown formatting instantly online.
Formula
Preview HTML = MarkdownRenderer(markdownInput)
The component renders Markdown source into structured HTML in real time, mapping Markdown syntax (headings, emphasis, lists, code blocks) to HTML elements.
Worked Examples
Example 1: Headings
Problem:How to create different heading levels?
Solution:# H1 Heading ## H2 Heading ### H3 Heading
Result:Creates structured document titles.
Example 2: Emphasis
Problem:How to make text bold or italic?
Solution:**Bold Text** *Italic Text* ***Bold and Italic***
Result:Applies formatting styles.
Example 3: Lists
Problem:How to create bullet or numbered lists?
Solution:- Item 1 - Item 2 1. First 2. Second
Result:Creates clean lists.
Frequently Asked Questions
What is Markdown?
Markdown is a lightweight markup language used to format text. It uses simple plain-text syntax (like # for headings, * for lists) that converts to valid HTML. It's widely used in README files, forums, and documentation.
Why does my single line break disappear?
In Markdown a single newline is treated as a space, not a line break - paragraphs are separated by a blank line. To force a break inside a paragraph, end the line with two trailing spaces or a backslash. GitHub is the confusing exception: in issue comments and pull request descriptions it renders single newlines as breaks, but in a committed .md file it follows the standard rule.
What is the difference between Markdown, CommonMark and GitHub Flavored Markdown?
John Gruber's 2004 original was defined mainly by its Perl implementation, so edge cases behaved differently in every tool. CommonMark, begun in 2014, is a strict specification with a test suite that removes that ambiguity. GitHub Flavored Markdown is a superset of CommonMark that adds tables, task lists, strikethrough, autolinked URLs and footnotes. Most modern renderers implement CommonMark plus some subset of the GFM extensions.
Why doesn't my table render?
Tables are not part of original Markdown or of core CommonMark - they are a GitHub Flavored Markdown extension, so a strict CommonMark renderer will output your pipes as literal text. Where tables are supported, the header row must be followed by a delimiter row of hyphens, and colons in that row set alignment: left, right, and centre.
How do I show a literal asterisk or underscore?
Escape it with a backslash: write a backslash before the character and the renderer prints it instead of interpreting it. This works for the punctuation Markdown treats as syntax - asterisk, underscore, backtick, hash, brackets, parentheses, pipe and the backslash itself. For a run of characters, wrapping them in backticks as inline code is usually cleaner than escaping each one.
How much should I indent a nested list?
Indent the child item so it lines up with the start of the parent item's text, not with the parent's bullet. For a hyphen and one space that means two spaces; for an ordered item like '1. ' it means three. Under-indenting is the most common cause of a nested list rendering as a flat one, and mixing tabs with spaces produces different results across renderers.
Can I put HTML inside Markdown?
Yes - both the original format and CommonMark allow raw HTML blocks and inline tags to pass through, which is how people add things Markdown cannot express, such as a details/summary disclosure or an image with explicit width. The caveat is that most platforms sanitise it: GitHub strips script tags, style attributes and much else before rendering, so anything security-sensitive will be removed.
What syntax is supported?
This previewer supports standard Markdown syntax: # Headings, **Bold**, *Italic*, - Lists, 1. Ordered Lists, [Links](url), , `Code`, and > Blockquotes.
Can I export the result?
Currently, you can copy the preview text directly. We may add an 'Export to HTML' button in future updates.
Does it support images?
Yes, you can embed images using standard Markdown syntax ``. The images must be hosted publicly on the web.
Background & Theory
Markdown works by mapping special characters to HTML tags.
Common Mappings:
# Text→<h1>Text</h1>**Text**→<strong>Text</strong>[Link](url)→<a href="url">Link</a>> Quote→<blockquote>Quote</blockquote>
Why Use Markdown?
- Readability: The raw code looks almost like the final result.
- Portability: It's just plain text. It opens in any editor.
- Efficiency: Typing
#is faster than typing<h1></h1>. - Focus: Writers can focus on content rather than styling tags.
Flavors:
While standard Markdown covers the basics, "flavors" like GFM (GitHub Flavored Markdown) add features like tables, task lists, and strikethrough, which have become widely expected by users.