Markdown Editor & Preview

How to use the Markdown Editor & Preview tool

1. Type Markdown in the left panel. The right panel updates as you type.
2. Switch the Right panel dropdown from Preview to HTML source to see the markup instead of the rendering.
3. Click Copy HTML to put the sanitized markup on the clipboard, or Download .md to save the Markdown itself.
4. Click Upload .md to load an existing file from disk.
5. Click Dummy Data for a sample document with a table, a task list and a fenced code block, so you can see how each feature renders.

How to render Markdown to HTML in JavaScript, PHP and Python

// npm i marked dompurify jsdom
const { marked } = require("marked");
const createDOMPurify = require("dompurify");
const { JSDOM } = require("jsdom");

const DOMPurify = createDOMPurify(new JSDOM("").window);

const md = "# Title\n\nSome **bold** text and a [link](https://example.com).";
const dirty = marked.parse(md, { gfm: true });
const clean = DOMPurify.sanitize(dirty);

console.log(clean);

// Markdown allows raw HTML. If the source is user input,
// sanitizing afterwards is not optional.

<?php
// composer require league/commonmark
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\Extension\GithubFlavoredMarkdownExtension;
use League\CommonMark\MarkdownConverter;

$environment = new Environment([
    'html_input' => 'escape',        // do not trust raw HTML in the source
    'allow_unsafe_links' => false,   // no javascript: hrefs
]);
$environment->addExtension(new CommonMarkCoreExtension());
$environment->addExtension(new GithubFlavoredMarkdownExtension());

$converter = new MarkdownConverter($environment);
echo $converter->convert("# Title\n\nTables and task lists included.");

# pip install markdown-it-py bleach
from markdown_it import MarkdownIt
import bleach

md = MarkdownIt("commonmark").enable("table").enable("strikethrough")
html = md.render("# Title\n\n| a | b |\n|---|---|\n| 1 | 2 |")

ALLOWED = ["p", "h1", "h2", "h3", "strong", "em", "a", "code", "pre",
           "ul", "ol", "li", "table", "thead", "tbody", "tr", "th", "td",
           "blockquote", "hr", "br", "del"]

print(bleach.clean(html, tags=ALLOWED, attributes={"a": ["href", "title"]}))

Common errors and how to fix them

Single line breaks disappear

This is correct CommonMark behavior: one newline inside a paragraph is a soft break. End the line with two spaces or a backslash, or turn on the breaks option in your parser if you want every newline to become a line break.

The table renders as a paragraph full of pipes

The |---|---| separator row under the header is missing, or the table is not preceded by a blank line. Tables are also a GitHub extension, so the parser needs GFM enabled.

A nested list renders flat

The indentation does not reach the parent's content column. Under a dash, indent by two spaces; under 1., by three. Mixing tabs and spaces in the same list is the usual cause.

snake_case_words turn into italics

Underscores inside a word are emphasis in some parsers. Wrap the identifier in backticks, or escape the underscores.

Raw HTML in the Markdown does not appear

The sanitizer removed it. This tool strips scripts, event handlers and javascript: URLs on purpose. In your own code, check whether the parser escapes HTML input, which is the right default for user-submitted content.

Good to know