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

如何解决使用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>

解决方法

希望现在还不算太晚。

您必须在围栏代码块之后换行 (\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
在 node_modules/markdown-it-highlight/dist/index.css 处获取 .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;