使用Markdown-it.js和Highlight.js突出显示代码
在当前的示例中，一个Markdown片段被移植到HTML中，输出结果显示在DIV (ID内容)中。
突出显示函数(hljs.highlight)被设置为选项markdown-it (md)。然而，这是没有执行的。
为了使输出使用highlight.js，我必须更改什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.1/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>回答 1
Stack Overflow用户
发布于 2021-04-22 21:03:13
希望不会太晚。
您必须在您的\n隔离代码块之后中断行()。
所以这个：
var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');应：
var result = md.render('# markdown-it rulezz! \n\n ```html \n <pre><code class="js">function test();</code></pre>\n```');一切都是这样的：
- .js文件应该是：
，
- ，这些都没事。
对于
- ，您可以使用正在使用的.css，也可以使用npm中的.css：
。
npm install markdown-it-highlight
- 在
node_modules/markdown-it-highlight/dist/index.css获取.css文件，该文件具有更好的语法突出显示颜色，并使用该文件。
然后，
- 必须设置这个
defaults对象，并在defaults.highlight上设置这个对象：
var默认值={ html: false，// Enable xhtmlOut: false，// Use '/‘以关闭单个标记()断点: false，//将段落中的'\n’转换为langPrefix：' language -'，// CSS语言前缀，用于围栏块链接: true，//签名将类似URL的文本转换为链接排印器: true，// Enable智能类型和其他甜蜜的转换//选项，下面仅用于演示_highlight: true，// <= --这是您需要的_strict: false，_view：' html‘// html/ src / debug }；//然后执行以下操作: defaults.highlight =函数(str，lang) { var esc = md.utils.escapeHtml；console.log(str) console.log (lang ) if (lang& hljs.getLanguage(lang)) { try {lang '‘+ hljs.highlight(lang，str，true).value + ''；} catch (__) {} --{返回'‘+ esc(str) + ''；}；//现在设置md: md =window.markdownit(默认值)；//现在您忘记了隔离代码块之后的换行: const结果= md.render('# md it rulezz！\n html \n <pre><code class="js">function test();</code></pre>\n')；document.querySelector('#content').innerHTML =.innerHTML；
https://stackoverflow.com/questions/64332569
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号