MarkdownPaper Open reader

Guide

Markdown to HTML

Markdown was designed to be turned into HTML. Each symbol stands for an HTML tag: # becomes a heading, ** becomes bold, - becomes a list. Any Markdown app does this conversion every time it shows you a page.

You write

# Title

Some **bold** text and a [link](https://example.com).

- One
- Two

You see

Title

Some bold text and a link.

  • One
  • Two

The right side is what a browser draws from HTML like this:

<h1>Title</h1>
<p>Some <strong>bold</strong> text and a <a href="https://example.com">link</a>.</p>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>
On this page

What each piece becomes

MarkdownHTML
# Heading<h1>Heading</h1>
**bold**<strong>bold</strong>
*italic*<em>italic</em>
[text](url)<a href="url">text</a>
![alt](image.png)<img src="image.png" alt="alt">
- item<ul><li>item</li></ul>
1. item<ol><li>item</li></ol>
`code`<code>code</code>
> quote<blockquote>
---<hr>

HTML written straight into a Markdown file is passed through as it is, in apps that allow it.

A fragment or a whole page

A converter gives you one of two things:

  • A fragment: just the tags for the content, ready to drop into an existing web page or template.
  • A standalone page: a complete HTML file with a head, a title and styles, which opens on its own in a browser.

Without styles, a standalone page looks like plain browser defaults. The look of a page comes from the CSS added around the converted HTML.

Save one document as an HTML file

In MarkdownPaper, open or paste the document, then choose Save as an HTML file from the share menu. You get one file that carries the page's styles and only the fonts it uses inside it, so it opens offline in any browser and looks the same as on screen. Diagrams and math travel with it.

Images linked from the web stay links, so they need a connection to show.

Convert files on the command line

For many files, or as part of a build, use a converter.

  • Pandoc converts Markdown to almost anything:

    pandoc notes.md -s -o notes.html

    -s makes a standalone page instead of a fragment. Add --embed-resources to pull images and styles into the one file, and -f gfm to read GitHub Flavored Markdown.

  • Libraries do it inside a program: marked and markdown-it in JavaScript, Python-Markdown and mistune in Python, and many more.

Converters differ on the extras: tables, footnotes, math and diagrams are not part of standard Markdown, so check that yours supports the ones you use.

Common problems

  • Symbols show on the page. The text was put into HTML without being converted. Run it through a converter first.
  • The page has no styling. The converter made bare HTML. Add a stylesheet, or export from an app that includes one.
  • Raw HTML disappeared. Many converters remove HTML for safety, as GitHub does with some tags.

Questions

How do I convert Markdown to HTML?

Open the file in a Markdown app that exports HTML, or run pandoc notes.md -s -o notes.html on the command line.

Can I convert Markdown to HTML without installing anything?

Yes. Open the file in a web reader such as MarkdownPaper and save it as an HTML file. The conversion runs in your browser.

Is Markdown the same as HTML?

No. Markdown is a shorter way of writing that converts to HTML. HTML is what browsers actually read.

Next