Skip to content
SocialTools

Markdown Previewer

Write or paste Markdown to see it rendered below, and switch on the HTML view when you need the markup.

Text ToolsText

Hello Markdown

This is a bold statement and this is italic.

  • Item one
  • Item two
  • Item three
  1. First
  2. Second

Visit SocialTools for more.

inline code example.

code block

Runs in your browser. Nothing you enter is uploaded.

What it does

The previewer converts Markdown into HTML as you type and renders it in the Preview panel under the editor. It supports headings (# to ######), bullet lists with -, * or +, numbered lists, fenced code blocks, inline code, bold, italic and links.

Use it to check a README section, a changelog entry or a blog draft before you commit or publish, or to turn a quick Markdown note into HTML you can paste into a CMS, newsletter tool or page builder that does not accept Markdown.

How to use it

  1. 1

    Type or paste Markdown into the Markdown input box, replacing the sample.

  2. 2

    Read the rendered result in the Preview panel as you type.

  3. 3

    Tick Show HTML output to see the generated markup.

  4. 4

    Click Copy HTML to copy it.

What you get

A live rendered preview plus, when enabled, the generated HTML: h1 to h6, p, ul, ol, li, strong, em, a, code and pre tags. The tags carry Tailwind class attributes used for the preview styling.

When to use it

Proofread README sections
Paste a section and confirm that list items, code fences and links render the way you meant before pushing.
Get HTML for a CMS
Tick Show HTML output and copy the tags for editors that accept HTML but not Markdown.
Learn Markdown syntax
The editor opens with a sample showing headings, lists, a link and code, so you can edit it and see the effect.

Example

Input

# Launch notes

Shipping **today**.

- Faster exports
- [Changelog](https://example.com/changelog)

Output

<h1 class="font-bold">Launch notes</h1>
<p>Shipping <strong>today</strong>.</p>
<ul class="list-disc pl-6">
<li>Faster exports</li>
<li><a href="https://example.com/changelog" class="text-indigo-400 underline">Changelog</a></li>
</ul>

Strip the class attributes if your site has its own styles.

Tips

  • Each non-empty line becomes its own paragraph. Lines are not joined into one paragraph the way GitHub does it, so write each paragraph on a single line.
  • Tables, blockquotes, images, nested lists and task checkboxes are not converted. They appear as plain paragraphs, so check those parts in your final platform.
  • Underscores are read as italics, even inside link URLs: a URL containing my_file_name gets em tags. Use asterisks for emphasis and double-check links with underscores.
  • Raw HTML you type is escaped and shown as text, which keeps the preview safe but means inline HTML will not render.

Questions

Why do my Markdown tables not render in the preview?

This previewer covers core syntax only: headings, lists, code, emphasis and links. Pipe tables are a GitHub Flavored Markdown extension and show up as plain paragraphs here.

Can I paste the HTML straight into WordPress or Webflow?

Yes, into an HTML or code block. The tags include Tailwind class names such as list-disc pl-6; they do nothing without Tailwind, so leave them or delete them.

Why did two lines I wrote together become separate paragraphs?

The converter treats every line as its own block. Standard Markdown would merge consecutive lines into one paragraph, so join them into one line if you want one paragraph.

How do I show a code block with syntax highlighting?

Wrap the code in lines of three backticks. The previewer outputs pre and code tags with the content escaped, but it does not add language highlighting.

Related tools