Zellio.io

Markdown to a clean HTML snippet

1 min readLast updated 3 steps · runs on this page

Writing in Markdown and publishing in HTML is the normal state of affairs, and the conversion is usually done by a build step you cannot see. This recipe does it in the open: the Markdown becomes HTML, and the HTML is laid out so it can be read and edited before it goes anywhere.

The steps

  1. 1

    Clean hidden charactersvia Invisible Character Detector

    Straightens quotes and removes invisible characters that an editor may have pasted in with the text.

  2. 2

    Markdown → HTMLvia Markdown Previewer

    Headings, emphasis, lists, links, code and blockquotes become their HTML elements.

  3. 3

    Beautify HTML / XMLvia Code Formatter

    One element per line, nested elements indented, so the snippet can be read and edited.

Ctrl+Enter runs · nothing leaves this tab

Where a snippet like this goes

  • A CMS field that accepts HTML but has no Markdown mode.
  • An email template, where the beautified markup is easier to wrap in the table layout email still needs.
  • A static page maintained by hand, where the alternative is writing the tags yourself.

What is and is not converted

The converter covers the common subset: headings, paragraphs, emphasis, inline code and fenced blocks, ordered and unordered lists, links, images and blockquotes. Tables and footnotes are dialect features and are passed through as text. Raw HTML inside the Markdown is kept as written, which is convenient and also the reason not to convert Markdown from a source you do not trust and publish it unread.

Before you paste it

Read the output once. Check that the link targets are the ones you meant, that a line you intended as a heading did not become a paragraph because the hash had no space after it, and that code blocks kept their language class if your destination highlights by it. The beautified layout makes each of these a glance rather than a search.

Questions

Can I get a full page with a head and body?
No; the output is a fragment, which is what a CMS or template wants. Wrap it yourself for a standalone file.
Do the styles come with it?
Markdown has no styles. The HTML uses plain elements, and the destination's stylesheet decides how they look.