The parse
function
import { marked } from 'marked';
marked.parse(markdownString [,options] [,callback])
Argument | Type | Notes |
---|---|---|
markdownString | string |
String of markdown source to be compiled. |
options | object |
Hash of options. Can also use marked.setOptions . |
callback | function |
Called when markdownString has been parsed. Can be used as second argument if no options present. |
Alternative using reference
// Create reference instance
import { marked } from 'marked';
// Set options
// `highlight` example uses https://highlightjs.org
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function(code, lang) {
const hljs = require('highlight.js');
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
pedantic: false,
gfm: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
});
// Compile
console.log(marked.parse(markdownString));
Options
Member | Type | Default | Since | Notes |
---|---|---|---|---|
async | boolean |
false |
4.1.0 | If true, walkTokens functions can be async and marked.parse will return a promise that resolves when all walk tokens functions resolve. |
baseUrl | string |
null |
0.3.9 | A prefix url for any relative link. |
breaks | boolean |
false |
v0.2.7 | If true, add <br> on a single line break (copies GitHub behavior on comments, but not on rendered markdown files). Requires gfm be true . |
gfm | boolean |
true |
v0.2.1 | If true, use approved GitHub Flavored Markdown (GFM) specification. |
headerIds | boolean |
true |
v0.4.0 | If true, include an id attribute when emitting headings (h1, h2, h3, etc). |
headerPrefix | string |
'' |
v0.3.0 | A string to prefix the id attribute when emitting headings (h1, h2, h3, etc). |
highlight | function |
null |
v0.3.0 | A function to highlight code blocks, see Asynchronous highlighting. |
langPrefix | string |
'language-' |
v0.3.0 | A string to prefix the className in a <code> block. Useful for syntax highlighting. |
mangle | boolean |
true |
v0.3.4 | If true, autolinked email address is escaped with HTML character references. |
pedantic | boolean |
false |
v0.2.1 | If true, conform to the original markdown.pl as much as possible. Don't fix original markdown bugs or behavior. Turns off and overrides gfm . |
renderer | object |
new Renderer() |
v0.3.0 | An object containing functions to render tokens to HTML. See extensibility for more details. |
sanitize | boolean |
false |
v0.2.1 | If true, sanitize the HTML passed into markdownString with the sanitizer function.Warning: This feature is deprecated and it should NOT be used as it cannot be considered secure. Instead use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! |
sanitizer | function |
null |
v0.3.4 | A function to sanitize the HTML passed into markdownString . |
silent | boolean |
false |
v0.2.7 | If true, the parser does not throw any exception. |
smartLists | boolean |
false |
v0.2.8 | If true, use smarter list behavior than those found in markdown.pl . |
smartypants | boolean |
false |
v0.2.9 | If true, use "smart" typographic punctuation for things like quotes and dashes. |
tokenizer | object |
new Tokenizer() |
v1.0.0 | An object containing functions to create tokens from markdown. See extensibility for more details. |
walkTokens | function |
null |
v1.1.0 | A function which is called for every token. See extensibility for more details. |
xhtml | boolean |
false |
v0.3.2 | If true, emit self-closing HTML tags for void elements (<br/>, <img/>, etc.) with a "/" as required by XHTML. |
Known Extensions
Marked can be extended using custom extensions. This is a list of extensions that can be used with marked.use(extension)
.
Name | Package Name | Description |
---|---|---|
Admonition | marked-admonition-extension |
Admonition extension |
Bidi | marked-bidi |
Add Bidirectional text support to the HTML |
Custom Heading ID | marked-custom-heading-id |
Specify a custom heading id in headings with the Markdown Extended Syntax # heading {#custom-id} |
Extended Tables | marked-extended-tables |
Extends the standard Github-Flavored tables to support advanced features: Column Spanning, Row Spanning, Multi-row headers |
GFM Heading ID | marked-gfm-heading-id |
Use github-slugger to create the heading IDs and allow a custom prefix. |
Katex Code | marked-katex-extension |
Render katex code |
LinkifyIt | marked-linkify-it |
Use linkify-it for urls |
Misskey-flavored Markdown | marked-mfm |
Custom extension for Misskey-flavored Markdown. |
Inline Markdown
You can parse inline markdown by running markdown through marked.parseInline
.
const blockHtml = marked.parse('**strong** _em_');
console.log(blockHtml); // '<p><strong>strong</strong> <em>em</em></p>'
const inlineHtml = marked.parseInline('**strong** _em_');
console.log(inlineHtml); // '<strong>strong</strong> <em>em</em>'
Asynchronous highlighting
Unlike highlight.js
the pygmentize.js
library uses asynchronous highlighting. This example demonstrates that marked is agnostic when it comes to the highlighter you use.
marked.setOptions({
highlight: function(code, lang, callback) {
require('pygmentize-bundled') ({ lang: lang, format: 'html' }, code, function (err, result) {
callback(err, result.toString());
});
}
});
marked.parse(markdownString, (err, html) => {
console.log(html);
});
In both examples, code
is a string
representing the section of code to pass to the highlighter. In this example, lang
is a string
informing the highlighter what programming language to use for the code
and callback
is the function
the asynchronous highlighter will call once complete.
Workers
To prevent ReDoS attacks you can run marked on a worker and terminate it when parsing takes longer than usual.
Marked can be run in a worker thread on a node server, or a web worker in a browser.
Node Worker Thread
// markedWorker.js
import { marked } from 'marked';
import { parentPort } from 'worker_threads';
parentPort.on('message', (markdownString) => {
parentPort.postMessage(marked.parse(markdownString));
});
// index.js
import { Worker } from 'worker_threads';
const markedWorker = new Worker('./markedWorker.js');
const markedTimeout = setTimeout(() => {
markedWorker.terminate();
throw new Error('Marked took too long!');
}, timeoutLimit);
markedWorker.on('message', (html) => {
clearTimeout(markedTimeout);
console.log(html);
markedWorker.terminate();
});
markedWorker.postMessage(markdownString);
Web Worker
NOTE: Web Workers send the payload from
postMessage
in an object with the payload in a.data
property
// markedWorker.js
importScripts('path/to/marked.min.js');
onmessage = (e) => {
const markdownString = e.data
postMessage(marked.parse(markdownString));
};
// script.js
const markedWorker = new Worker('./markedWorker.js');
const markedTimeout = setTimeout(() => {
markedWorker.terminate();
throw new Error('Marked took too long!');
}, timeoutLimit);
markedWorker.onmessage = (e) => {
clearTimeout(markedTimeout);
const html = e.data;
console.log(html);
markedWorker.terminate();
};
markedWorker.postMessage(markdownString);