๐ Markdown Preview
Heron Tools
ๅคชๅญ ใจ ๆไฝใใคใณใฉใคใณใณใผใ ใไฝฟใใพใใ
- ใชในใ้ ็ฎ1
- ใชในใ้ ็ฎ2
- ็ชๅทไปใ1
- ็ชๅทไปใ2
ๅผ็จๆใงใ
console.log("code block");Preview Markdown as rendered HTML in real time. Useful for checking how a README or blog post draft will look before publishing.
How to use
- Type or paste Markdown text into the input box.
- The rendered preview appears in real time on the right.
- Check headings, lists, and other elements for layout issues as you edit.
How the calculation works
This tool interprets your Markdown line by line, converts it to HTML and shows the result as a preview. Supported syntax includes headings from "#" to "######", "**bold**" and "*italic*", bulleted lists with "-" or "*", numbered lists with "1.", links as "[text](URL)", inline code in backticks, and code blocks fenced with "```". For safety, "<", ">" and "&" in the input are escaped before conversion, so HTML tags written inside the Markdown appear as text rather than being interpreted. Links get target="_blank" and rel="noopener noreferrer" so they open in a new tab.
Worked example
Entering this Markdown # Shopping list - **Milk** - Bread More [here](https://example.com) The preview shows "Shopping list" as a top-level heading, "Milk" as a bold list item, and "here" as a link. Writing HTML such as <b>tag</b> does not make text bold; the characters "<b>tag</b>" appear as they are.
Things to be aware of
- Extended syntax such as tables, footnotes and task lists is not supported.
- HTML tags are escaped and shown as text.
- Details of interpretation may differ from services such as GitHub.
- To get the HTML source, use the Markdown to HTML converter.
FAQ
What Markdown syntax is supported?
Common Markdown elements such as headings, lists, emphasis, links, and code blocks.
Is my input saved?
No, everything is processed in your browser, so your input is lost if you leave the page.
Can I use this to draft a GitHub README?
Yes โ it previews the core GitHub Flavored Markdown syntax, making it a good way to check a README or docs draft before committing it.
Does it support tables?
It covers core elements like headings, lists, emphasis, links, and code blocks. For complex extended syntax, it's worth double-checking how it renders on the actual platform you're publishing to.
Does it syntax-highlight code blocks?
Code blocks are displayed set apart from the rest of the text, but language-specific syntax highlighting isn't supported.