marked-highlight

Highlight code blocks

Installation

1npm install marked-highlight

Usage

You will need to provide a function that transforms the code to html.

1import { Marked } from "marked";
2import { markedHighlight } from "marked-highlight";
3import hljs from 'highlight.js';
4
5// or UMD script
6// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
7// <script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
8// const { Marked } = globalThis.marked;
9// const { markedHighlight } = globalThis.markedHighlight;
10const marked = new Marked(
11  markedHighlight({
12	emptyLangClass: 'hljs',
13    langPrefix: 'hljs language-',
14    highlight(code, lang, info) {
15      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
16      return hljs.highlight(code, { language }).value;
17    }
18  })
19);
20
21
22marked.parse(`
23\`\`\`javascript
24const highlight = "code";
25\`\`\`
26`);
27// <pre><code class="hljs language-javascript">
28//   <span class="hljs-keyword">const</span> highlight = <span class="hljs-string">&quot;code&quot;</span>;
29// </code></pre>

The async option should be set to true if the highlight function returns a Promise.

1import { Marked } from "marked";
2import { markedHighlight } from "marked-highlight";
3import pygmentize from 'pygmentize-bundled';
4
5const marked = new Marked(
6  markedHighlight({
7    async: true,
8    highlight(code, lang, info) {
9      return new Promise((resolve, reject) => {
10        pygmentize({ lang, format: 'html' }, code, function (err, result) {
11          if (err) {
12            reject(err);
13            return;
14          }
15
16          resolve(result.toString());
17        });
18      });
19    }
20  })
21)
22
23await marked.parse(`
24\`\`\`javascript
25const highlight = "code";
26\`\`\`
27`);
28// <pre><code class="language-javascript">
29//   <div class="highlight">
30//     <pre>
31//       <span class="kr">const</span> <span class="nx">highlight</span> <span class="o">=</span> <span class="s2">&quot;code&quot;</span><span class="p">;</span>
32//     </pre>
33//   </div>
34// </code></pre>

options

option	type	default	description
async	boolean	false	If the highlight function returns a promise set this to true. Don't forget to await the call to marked.parse
langPrefix	string	'language-'	A prefix to add to the class of the code tag.
emptyLangClass	string	''	The class to add to the code tag if the language is empty.
highlight	function	(code: string, lang: string) => {}	Required. The function to transform the code to html.