Converting Markdown to HTML with Marked
marked.parse takes a Markdown string and returns an HTML string that you can put into the page.
How it works
- Parse the Markdown. Import
markedand callmarked.parse(md). The result is a plain HTML string with headings, lists, links and a blockquote. [1] - Put it in the page. The left panel sets
innerHTMLto the HTML, and the right panel shows the same string as text so you can read the tags. [2] - Sanitize untrusted input. This example only parses a fixed string. If the Markdown comes from users, run the output through a sanitizer before inserting it. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { marked } from 'marked'
const md = `# Release notes
Marked turns **Markdown** into HTML.
- Headings and *emphasis*
- Lists and \`inline code\`
- [Links](#release-notes)
> Blockquotes work too.`
// One call: Markdown string in, HTML string out
const html = marked.parse(md)
const style = document.createElement('style')
style.textContent = `
html, body, #root { margin: 0; height: 100%; background: #111; font-family: system-ui, sans-serif; }
.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; height: 100%; box-sizing: border-box; }
.card { background: #f6f7f9; color: #1b1d22; border-radius: 10px; padding: 12px 16px; overflow: auto; }
.card h1 { font-size: 22px; margin: 4px 0 8px; }
.card blockquote { border-left: 3px solid #e0a030; margin: 8px 0; padding-left: 10px; color: #555; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin: 0 0 6px; }
pre { white-space: pre-wrap; font-size: 11px; margin: 0; color: #2a4d8f; }
`
document.head.appendChild(style)
const root = document.getElementById('root')
root.innerHTML = `
<div class="wrap">
<section class="card"><p class="label">Rendered</p><div id="preview"></div></section>
<section class="card"><p class="label">marked.parse() output</p><pre id="source"></pre></section>
</div>`
root.querySelector('#preview').innerHTML = html
root.querySelector('#source').textContent = html
Change the Markdown in the md string and both panels update when the code reruns. Code written by AgentGid [1].
Change the Markdown in the md string and both panels update when the code reruns. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with marked 18.1.0. Needs WebGL.
More Marked examples
GitHub Flavored Markdown tables in Marked The breaks option in Marked A live Markdown preview with Marked Removing zero-width characters before Marked
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.