javascript - 使用 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>

标签： javascripthighlight.jsmarkdown-it

希望还不算太晚。

您必须在受保护的代码块\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;

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

问题描述

解决方案

一切都应该是这样的：

推荐阅读