在当前示例中，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 回答
偶然的你
TA贡献1841条经验 获得超3个赞
希望还不算太晚。
您必须在您的围栏代码块之后换行 ( \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;
智慧大石
TA贡献1946条经验 获得超3个赞
概括：
简单的方法
首先，确保你在卡片中支持 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()
更新所有卡片。
如果你运行它两次，那么它会尝试更新它已经更新的卡片，你会收到警告。
添加回答
举报
0/150
提交
取消