MultiKit

Markdown Preview and Markdown to HTML Converter

  • Free
  • No sign-up
  • Runs in your browser
  • Version 1.2.1
  • Last updated 2026-10-25
Report a problem

Type or paste Markdown on the left and see the result on the right. Copy the HTML when you need it for a website or an e-mail.

Markdown

HTML tags typed into the Markdown are shown as text, not run, and only web, mail, phone and relative links are kept. A ```mermaid block is drawn as a diagram.

Code languages that get colors (193)

Write the name or any alias after the three backticks, for example ```php or ```js. Click a language to put a code block of that language into your text. A name that is not on the list still works, but the code stays uncolored.

Everything you enter is processed in your browser and is never sent to a server.

How to use

  1. Write or paste Markdown in the left box, or open a .md file. Load example shows the main features.
  2. Read the result under Preview. Switch to HTML to see the code that was generated. A ```mermaid code block is drawn as a diagram.
  3. Copy the Markdown or the HTML, or download the HTML as a complete page.

Examples

# Title
→ <h1>Title</h1>
**bold** and *italic*
→ <strong>bold</strong> and <em>italic</em>
A code block that starts with ```mermaid and contains sequenceDiagram, then Alice->>Bob: Hi
→ A sequence diagram with Alice and Bob and an arrow between them
Flowcharts, sequence diagrams, class diagrams, Gantt charts and more are drawn the same way.
[click](javascript:alert(1))
→ The word click, with no link
Links that run code are dropped. Web, mail, phone and relative links are kept.

How it works

The text is parsed by the open-source marked library following the CommonMark and GitHub Flavored Markdown rules. Before the result is shown it is made safe in two ways. First, the renderer here shows raw HTML as plain text and drops links and pictures with addresses that could run code. Second, the page runs the result through DOMPurify, the standard HTML sanitizer, as a last check.

Code is colored by the open-source highlight.js library, which loads only when the text has a code block with a language. It colors by the name you write and never guesses the language, because a wrong guess colors code in a misleading way. The library escapes the code and adds only span elements; the result still goes through DOMPurify before it is shown.

Diagrams are drawn by the open-source Mermaid library, which loads only when the text has a ```mermaid block. It runs in its strict mode: the text of the diagram is sanitized and diagrams cannot attach clicks that run code. Mermaid needs a real browser to draw, so the automated tests check the part that does not: that a mermaid block becomes the right element with its text escaped, that other code blocks are untouched, and that the example diagram syntax is accepted.

The coloring is tested for the languages above, for aliases and letter case, and for code that contains HTML, which must come out as harmless text. The tool is also tested for the elements above, for tables, task lists and code blocks, and for attacks: script tags, event attributes, javascript: and data: addresses, and quotes that try to break out of an attribute must all come out harmless. DOMPurify itself needs a browser, so it is the one step the automated tests do not cover.

Sources

Frequently asked questions

Which Markdown does it understand?
CommonMark with the GitHub additions: tables, task lists (- [x]), strikethrough (~~text~~), fenced code blocks and automatic links. That covers READMEs, notes and most blog posts.
Can I put HTML inside the Markdown?
It is shown as text, not run. This keeps pasted content from a stranger from doing anything on this page, and it is why the preview and the HTML you copy always match what you typed.
Which links and pictures are allowed?
Links to web (http, https), mail and phone addresses, to places in the same page (#section) and relative paths. Pictures only from web addresses. Anything else, such as javascript: or data: addresses, is removed.
Can it draw diagrams?
Yes, with Mermaid. Put the diagram text in a code block whose language is mermaid, such as flowchart LR, sequenceDiagram, classDiagram, gantt or pie, and the preview shows the drawing. A mistake in the diagram shows the message from Mermaid in place of the drawing. The first diagram makes the browser download the Mermaid library, which is large, so it may take a moment.
How do I put a diagram on my own page?
Copy the HTML. A diagram appears in it as a pre element with the class mermaid, which is the form Mermaid reads, so any page that loads Mermaid turns it into a drawing. The Download .html button adds the loading script for you; that file needs an internet connection to draw the diagrams, and GitHub also draws mermaid code blocks in Markdown files by itself.
Which code languages get colors?
About 190, from the highlight.js library: php, javascript (js), typescript (ts), python (py), bash (sh), sql, json, yaml, html, xml, css, java, kotlin, go, rust, c, cpp, csharp (cs), ruby, swift, dart, lua, powershell, dockerfile, diff, markdown (md), graphql, nginx and many more, plus text (plaintext, txt) for code without colors. The full list, with every alias, is under the editor, where you can search it and click a language to insert a code block.
What happens with a language that is not on the list?
The code block is kept, with the name as a class, and shown without colors. Some modern names are not covered, for example Vue, Svelte, Astro, Zig and Terraform. The name is kept in the HTML you copy, so a site with its own highlighter can still color it. The colors are only in the preview; the HTML you copy has plain code blocks.
Is my text uploaded or saved?
No. The text is processed in your browser and disappears when you close the page.
Does the HTML include any styling?
No. You get plain HTML with the usual tags, so it takes the look of the site you put it on. The downloaded file is a bare page with no styles.
Version history
  • 1.2.1 — Clarifies the search title with the tool's main task and whether it is free or runs online.
  • 1.2.0 — Colors code in about 190 languages with highlight.js, and lists them with a search box.
  • 1.1.0 — Draws Mermaid diagrams from ```mermaid code blocks.
  • 1.0.0 — First release.

Last updated: