Javascript 使用Markdown-it.js和Highlight.js突出显示代码_Javascript_Highlight.js_Markdown It

Javascript 使用Markdown-it.js和Highlight.js突出显示代码

javascript

Javascript 使用Markdown-it.js和Highlight.js突出显示代码,javascript,highlight.js,markdown-it,Javascript,Highlight.js,Markdown It,在当前示例中，一个标记代码段被移植到HTML，输出显示在DIV（ID Content）中 highlight函数（hljs.highlight）设置为选项markdown it（md）。然而，这并没有得到执行为了使输出使用highlight.js，我必须更改什么 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="st

在当前示例中，一个标记代码段被移植到HTML，输出显示在DIV（ID Content）中

highlight函数（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>

'; }捕获（{} } 返回“

”+md.utils.escapeHtml（str）+”

”； } }); var result=md.render（'#标记它rulezz！\n\n``htmlfunction test（）；````'）；

var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');

document.getElementById（'content'）.innerHTML=result；

希望不会太晚

您必须在受保护的代码块之后断线（
\n
）
因此：

var result = md.render('# markdown-it rulezz! \n\n ```html \n <pre><code class="js">function test();</code></pre>\n```');
'; }捕获（{} }否则{ 返回“
”+esc（str）+“
”； } }; //现在设置md： md=window.markdownit（默认值）； //现在，在这里，您忘记了隔离代码块之后的换行符： const result=md.render（'#标记它rulezz！\n``html\n函数测试（）；\n````）； document.querySelector（“#content”）.innerHTML=result；您可以挖掘web演示的src，它可以工作。