In the current example, a Markdown snippet is ported to HTML and the output is shown in the DIV (ID Content).
The highlight function (hljs.highlight) is set to the options markdown-it (md). However, this is not carried out.
What do I have to change so that the output uses the highlight.js?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.1/markdown-it.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var md = window.markdownit();
md.set({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');
document.getElementById('content').innerHTML = result;
</script>
</body>
</html>
Hope it's not too late.
You must break line (
\n
) after your fenced code block.So this:
Should be:
This is how everything should be:
the .js files should be:
These are okay.
As for the .css, you can use the one you are using or you can use the one that is in the npm:
npm install markdown-it-highlight
get the .css file at
node_modules/markdown-it-highlight/dist/index.css
, that has nicer syntax highlighting color and use that.Then you would have to set this
defaults
object and set this on thedefaults.highlight
: