使用 Markdown-it.js 和 Highlight.js 高亮代码

Question

在当前示例中，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>

Answer 1

希望还不算太晚。

您必须在 受保护的代码块 .

之后换行 (\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;

使用 Markdown-it.js 和 Highlight.js 高亮代码

Highlight code with Markdown-it.js and Highlight.js

javascript

highlight.js

markdown-it

一切都应该是这样的：