The breaks option in Marked
Options change how Marked renders Markdown; the breaks option turns single line breaks inside a paragraph into <br> tags.
How it works
- Pass options to marked. The second argument of
marked.parseis an options object. The right panel passes{ breaks: true }while the left passes nothing. [1] - See the difference. The input is four lines separated by single newlines. With
breaks: truethe HTML contains<br>between them, as in the CLI example in the docs. [1] - Compare the HTML. Each panel shows the rendered poem and, below it, the HTML string so you can see exactly which tags were added. [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 = 'Roses are red\nViolets are blue\nMarked reads Markdown\nAnd so can you'
// Same input, with and without the breaks option
const plain = marked.parse(md)
const withBreaks = marked.parse(md, { breaks: true })
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; }
.label { font-family: ui-monospace, monospace; font-size: 12px; color: #a0570f; margin: 0 0 8px; }
.out { font-size: 16px; line-height: 1.5; min-height: 120px; }
pre { white-space: pre-wrap; font-size: 11px; color: #2a4d8f; background: #eceef2; padding: 8px; border-radius: 6px; }
`
document.head.appendChild(style)
const panel = (label, html) => `
<section class="card">
<p class="label">${label}</p>
<div class="out">${html}</div>
<pre>${html.replace(/</g, '<')}</pre>
</section>`
document.getElementById('root').innerHTML =
`<div class="wrap">${panel('marked.parse(md)', plain)}${panel('marked.parse(md, { breaks: true })', withBreaks)}</div>`
The left panel runs the four lines together; the right keeps them on separate lines. Code written by AgentGid [1].
The left panel runs the four lines together; the right keeps them on separate lines. 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
Converting Markdown to HTML with Marked GitHub Flavored Markdown tables 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.