MDUtil

Markdown to HTML Converter

Paste Markdown and get clean HTML for a website, blog or email template, or download a complete page that opens in any browser. Nothing is uploaded.

Markdown

617 characters28 lines
<h1 id="getting-started">Getting started</h1>
<p>Install the package and import it where you need it. The <a href="https://example.com/docs">full guide</a> lists every option.</p>
<h2 id="install">Install</h2>
<pre><code class="language-bash">npm install field-notes
</code></pre>
<h2 id="options">Options</h2>
<table>
<thead>
<tr>
<th align="left">Option</th>
<th align="center">Default</th>
<th align="left">Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>sync</code></td>
<td align="center"><code>true</code></td>
<td align="left">Upload notes when online</td>
</tr>
<tr>
<td align="left"><code>quality</code></td>
<td align="center"><code>0.8</code></td>
<td align="left">JPEG quality of photos</td>
</tr>
</tbody>
</table>
<h2 id="checklist">Checklist</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Create an account</li>
<li class="task-list-item"><input type="checkbox" disabled> Invite your team</li>
</ul>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save. A day of notes takes about <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi><mo>×</mo><mn>2.5</mn></mrow><annotation encoding="application/x-tex">n \times 2.5</annotation></semantics></math></span> MB.<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="user-content-footnote-label">1</a></sup></p>
<blockquote>
<p><strong>Note:</strong> Notes stay on the device until you sync them.</p>
</blockquote>
<section data-footnotes="" class="footnotes"><h2 class="sr-only" id="user-content-footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
<p>For <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi></mrow><annotation encoding="application/x-tex">n</annotation></semantics></math></span> photos at the default quality. <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>
2,054 characters

What it handles

Clean, semantic HTML
Headings, lists, tables with align, <pre><code class="language-js"> blocks and footnotes, with no wrappers or inline styles.
Safe by default
HTML written inside the Markdown is kept, while scripts, event attributes such as onclick and javascript: links are removed.
GitHub Flavored Markdown
Tables, task lists, strikethrough, autolinks and footnotes convert the way GitHub shows them.
Formulas without scripts
Math becomes MathML, which browsers draw on their own, or KaTeX HTML with its stylesheet linked.
Heading anchors
Headings get GitHub-style ids such as id="getting-started", so each section can be linked to.
Complete pages
A complete page has a doctype, character set, viewport and title, plus an optional stylesheet that follows the reader's light or dark mode.

Convert Markdown to HTML in code

JavaScript

This page uses the unified tools. Keep rehype-sanitize in the chain whenever the Markdown comes from your users.

import rehypeSanitize from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeSanitize)
  .use(rehypeStringify)
  .process("# Hello, *world*!");

console.log(String(file)); // <h1>Hello, <em>world</em>!</h1>

Python

The Python-Markdown package converts a string; its extensions add tables, fenced code and footnotes.

import markdown

html = markdown.markdown(text, extensions=["tables", "fenced_code", "footnotes"])

Pandoc

-f gfm reads GitHub Flavored Markdown. The first command writes an HTML fragment, the second a complete page.

pandoc README.md -f gfm -o README.html
pandoc README.md -f gfm -s --metadata title="README" -o README.html

Questions and answers

How do I convert Markdown to HTML?

Paste the Markdown above and copy the HTML from the right-hand panel, or download it as an .html file. The conversion runs in your browser.

Is the HTML safe to put on my website?

Yes. Formatting tags stay, and anything that can run code is removed: <script>, <iframe>, event attributes such as onclick and javascript: links. When your own site converts Markdown written by users, sanitize it the same way, for example with rehype-sanitize or DOMPurify.

Why does the HTML look plain on my site?

An HTML fragment carries no styles, so it takes on your site's stylesheet. For a file that looks finished on its own, choose Complete page with styles switched on.

How are math formulas converted?

With MathML, formulas become <math> elements that current browsers draw without any script or stylesheet. With KaTeX HTML, they become KaTeX markup, which needs KaTeX's stylesheet; the complete page links it for you.

Can I use HTML inside the Markdown?

Yes. Tags such as <kbd>, <sup>, <mark>, <details> and <img width> pass through unchanged; tags that could run code are removed.

What is the difference between Markdown and HTML?

Markdown is a plain-text shorthand that is quick to write and easy to read, such as **bold** for <strong>bold</strong>. HTML is the markup browsers display, so Markdown is turned into HTML whenever it appears on a web page.

Does it support GitHub Flavored Markdown?

Yes: tables, task lists, strikethrough, autolinks and footnotes all convert. Switch on Syntax colors to add highlight.js classes to code blocks, and pair them with a highlight.js theme on your site.