PDFFlare
7 min read

How to Convert Markdown to HTML Online (With Live Preview)

You wrote a README in Markdown but your CMS expects HTML. You are drafting an email newsletter in Obsidian and need clean HTML for Mailchimp. You built documentation in Markdown and need to paste it into a WYSIWYG editor that does not understand Markdown syntax. All three situations call for a quick Markdown-to-HTML conversion.

In this guide you will learn how Markdown works, how to convert it to HTML online, and when to reach for each format using PDFFlare's free Markdown to HTML tool.

What Markdown Is

Markdown is a plain-text formatting syntax created by John Gruber in 2004. It lets you write formatted text using simple characters — **bold**, *italic*, # Heading, [link](url) — that converts to clean HTML.

Its appeal is that Markdown source is readable as-is. You do not need to render it to understand the structure. That is why GitHub READMEs, Reddit comments, Discord messages, Notion, Obsidian, and most modern docs tools all speak Markdown.

How to Convert Markdown to HTML (Step by Step)

  1. Open the tool: PDFFlare's Markdown to HTML.
  2. Paste your Markdown: Drop in your README, blog post, docs page, or any .md content.
  3. See the live HTML preview: The converted HTML appears instantly as you type, with a rendered preview alongside.
  4. Copy the HTML output: One-click copy to clipboard, ready to paste into your CMS, email template, or code editor.

Markdown Syntax Reference

Headings

Use 1-6 # symbols:

# Heading 1

## Heading 2

### Heading 3

Bold and Italic

  • **bold**bold
  • *italic*italic
  • ***bold italic***bold italic
  • ~~strikethrough~~ → strikethrough (GFM)

Links and Images

  • [link text](https://example.com) — inline link
  • ![alt text](image.jpg) — image
  • [link text](url "tooltip") — link with tooltip

Lists

Unordered — use -, *, or +:

- First item

- Second item

Ordered — use numbers:

1. First

2. Second

Code

  • Inline: `code`code
  • Block: three backticks on their own line, optional language, code, three backticks. Example: ```js for JavaScript.

Blockquotes

> This is a blockquote.

Tables (GitHub Flavored Markdown)

Pipes separate columns, dashes mark the header divider:

| Col 1 | Col 2 |

|-------|-------|

| Value | Value |

Horizontal Rule

--- on its own line.

Markdown Flavors

Over the years, “Markdown” has splintered into multiple dialects:

  • CommonMark: The official standardized spec, adopted by GitHub, Reddit, Discourse, and most modern tools. The safest target for clean conversion.
  • GitHub Flavored Markdown (GFM): CommonMark plus tables, task lists, strikethrough, and automatic URL linking. The de facto standard for READMEs.
  • Original (Gruber) Markdown: The 2004 spec — still used in some legacy tools but ambiguous in edge cases.
  • MultiMarkdown, Pandoc Markdown: Extended variants with footnotes, citations, math, and more. Powerful but not portable.

PDFFlare's converter targets CommonMark + GFM — the most widely supported combination.

When to Use Markdown vs HTML

Use Markdown For:

  • READMEs, documentation, wikis
  • Blog posts you want to edit in any plain-text editor
  • Note-taking (Obsidian, Notion, Bear)
  • GitHub issues, PRs, discussions
  • Forum posts (Reddit, Stack Overflow, Discourse)

Use HTML For:

  • CMS platforms that only accept HTML (some WordPress themes, legacy systems)
  • Email templates — most email clients require inline HTML
  • Anywhere precise control over markup or styling is required
  • Complex layouts beyond Markdown's capabilities

Common Markdown Pitfalls

Indentation Matters in Lists

Nested lists require 2-4 spaces of indentation. Using tabs or inconsistent spaces breaks the nesting silently.

Line Breaks Are Tricky

A single line break in Markdown does not produce a line break in HTML — it is treated as a space inside the same paragraph. For a real line break, end a line with two spaces or a backslash \, or leave a blank line for a new paragraph.

Raw HTML Is Allowed But Not Sanitized

Markdown passes through raw HTML. This is useful for embedding rich media (iframes, buttons, custom styles) but also a security risk if you render untrusted user Markdown server-side. Always sanitize before rendering user input.

Tables Require Exact Syntax

Tables need the header row, the divider row with dashes, and correctly aligned pipes. Missing any of these breaks the table.

Converting the Other Direction (HTML to Markdown)

Going HTML → Markdown is trickier — HTML has constructs (nested divs, inline styles, custom classes) that have no Markdown equivalent. Lossy by nature. Tools like Turndown (JS) and html2text (Python) handle the common cases but always inspect the output before shipping.

Common Markdown-to-HTML Mistakes

  • Nesting code blocks inside lists doesn't work without indentation. A code block inside a bullet point needs 4 spaces of indent or it falls back to the parent level. Most converters now auto-handle this for GFM, but old CommonMark implementations stumble.
  • Inline HTML inside Markdown sometimes renders, sometimes doesn't. Strict CommonMark allows raw HTML; sanitizers in CMS tools like WordPress strip it. Test before relying on inline <div> or <span> tags.
  • Smart quotes in source.If you copied Markdown from Word or Notes, smart quotes (curly “like this”) may end up in code blocks where they break syntax. Always paste via a plain-text editor or strip smart quotes first.
  • Forgetting blank lines around block elements. Headings, lists, and code blocks need a blank line before AND after. Without it, some converters concatenate elements unexpectedly.
  • Mixing list markers (- vs * vs +). Switching mid-list resets numbering in some converters. Pick one marker per list and stick with it.

Where Markdown HTML Output Goes

  • Static-site generators (Hugo, Jekyll, Astro): They render Markdown to HTML at build time. Use the converter to preview the HTML output before committing.
  • WYSIWYG-disabled CMS fields: Some CMS forms accept HTML but not Markdown. Convert and paste.
  • Email templates: Email clients want HTML. Write the email in Markdown, convert, paste into the template.
  • Documentation in code repos: README.md, CHANGELOG.md, CONTRIBUTING.md are all Markdown — but sometimes you need the rendered HTML for a docs site or PR description.

Privacy Note

Many online Markdown converters send your content to a server for processing. PDFFlare's Markdown converter runs entirely in your browser. Internal notes, unpublished blog drafts, and confidential docs stay on your device.

Workflow Notes Beyond the Basics

Converting Markdown to HTML powers a surprising number of modern publishing workflows, from technical documentation to email newsletters to static site generators. The deeper point underneath all of this is that workflow tools earn their place not in the simple cases but in the cases where defaults fail. The simple cases are easy: drag, drop, click convert, done. The interesting cases are the ones where the defaults produce output that does not quite work, and the difference between a tool that survives a year of daily use and one that gets replaced is whether it gives you the knobs needed to handle those edge cases without leaving the tool. PDFFlare is built around that observation: every tool exposes the options that matter, the defaults work for ninety percent of cases, and the remaining ten percent have a clear path forward without requiring a different application or a complicated workflow. Try the tool on a real piece of work, identify where the defaults could be better for your specific use case, and adjust the relevant option. After a few iterations, you have a setting profile that matches your work better than any out-of-the-box default could, and the tool stops being a generic utility and starts being your tool, customized for what you actually do. That gradient — from generic utility to personalized tool — is the real value, and the time spent on the calibration pays back in every subsequent use of the tool over years of work.

One pattern worth internalizing about file workflows in general is that the cost of getting a setting wrong scales with how often you repeat the workflow. A one-off conversion where you accept the defaults loses you nothing if those defaults are slightly suboptimal. The same defaults applied to a recurring monthly process across hundreds of files accumulate into real time and quality losses over a year. The right discipline is to invest a few minutes calibrating a workflow the first time you set it up, document the settings somewhere you can find them later, and then run the calibrated workflow without further thought for the next six to twelve months. Re-evaluate when something changes, not on every individual run. This rhythm matches how most professionals work in practice — they have a few well-understood workflows that they execute on autopilot, and a much smaller number of new workflows that get the deliberate setup attention. The trick is to make sure your recurring workflows are the calibrated ones, not the default-accepting ones. PDFFlare's tools support this pattern by exposing the calibration knobs prominently and making them easy to discover, so the time you invest in setting up a workflow once compounds across every later execution. The end result is fewer surprises, more predictable output, and a noticeable reduction in the small frictions that interrupt focused work.

Wrapping Up

Markdown is the fastest way to write formatted text. HTML is the universal format the web renders. A converter that takes you between the two in one step — with a live preview — turns cross-platform content work into a five-second task instead of a slow manual rewrite. PDFFlare does exactly that, free, in your browser.

Useful Companion Tools

Two more PDFFlare tools that pair well with this workflow:Word Counter and Text Diff. Both are free, browser-based, and require no signup — same as the tool covered in this guide.

Related Workflows

Adjacent tools you might find useful while working through this guide: Markdown to HTML and JSON Formatter. They handle different parts of the same workflow and pair naturally with what we've covered here.

Related Tools