使用 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>
翻阅古今2回答
-
偶然的你
希望还不算太晚。您必须在您的围栏代码块之后换行 ( \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 文件应该是：<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>这些都可以。至于 .css，您可以使用您正在使用的那个，也可以使用 npm 中的那个：npm install markdown-it-highlight在 获取 .css 文件node_modules/markdown-it-highlight/dist/index.css，它具有更好的语法高亮颜色并使用它。然后你必须设置这个defaults对象并将其设置在defaults.highlight：var defaults = { html: false, // Enable HTML tags in source xhtmlOut: false, // Use '/' to close single tags (<br />) breaks: false, // Convert '\n' in paragraphs into <br> langPrefix: 'language-', // CSS language prefix for fenced blocks linkify: true, // autoconvert URL-like texts to links typographer: true, // Enable smartypants and other sweet transforms // options below are for demo only _highlight: true, // <= THIS IS WHAT YOU NEED _strict: false, _view: 'html' // html / src / debug};// and then do this:defaults.highlight = function (str, lang) { var esc = md.utils.escapeHtml; console.log(str) console.log(lang) if (lang && hljs.getLanguage(lang)) { try { return '<pre class="hljs"><code>' + hljs.highlight(lang, str, true).value + '</code></pre>'; } catch (__) {} }else{ return '<pre class="hljs"><code>' + esc(str) + '</code></pre>'; }};// now set the md:md = window.markdownit(defaults);// now this is where you forgot the line break after the fenced code block:const result = md.render('# markdown-it rulezz! \n ```html \n <pre><code class="js">function test();</code></pre>\n```');document.querySelector('#content').innerHTML = result; -
智慧大石
概括：简单的方法首先，确保你在卡片中支持 Markdown：import MarkdownIt from 'markdown-it'// For Markdown in Adaptive Cards.window.markdownit = MarkdownIt现在我们将使用另一个库来为代码着色：import highlight from 'highlight.js'import 'highlight.js/styles/github.css'跑步：highlight.highlightAll()更新所有卡片。如果你运行它两次，那么它会尝试更新它已经更新的卡片，你会收到警告。
随时随地看视频慕课网APP
相关分类
JavaScript