使用Markdown-it与Highlight.js时代码块渲染异常的问题求助

阿华AIGC实验室

2026-4-13

我最近在尝试用Markdown-it和Highlight.js在HTML里渲染Markdown内容，但遇到了两个头疼的问题：

代码块里的<和>被自动转义了，这不是我想要的效果；
C语言代码里的#include被错误识别成了Markdown的标题格式。

以下是我的代码：

template.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="/js/styles/dark.min.css" />

        <title>Example Markdown-it</title>
    </head>
    <body>
        <div class="container">

        <div class="markdown">
        ## Example Markdown Content

        Example list:

        *   One

        *   Two

        *   Three

        A code segment:

        ```js
        window.onload = function() {
            var md = window.markdownit();
            var div = document.getElementsByClassName('markdown');
            for (var i = 0; i < div.length; i++) {
                var content = div[i].innerHTML;
                document.getElementsByClassName('markdown')[i].innerHTML = md.render(content);
            }
        }
        ```

        And now a C snippet:

        ```c
        #include <stdio.h>
        #include <other.h>

        int main() {
            printf("hello world!\n");
            int x = 100;
            if (x > 50)
                printf("x is greater than 50\n");
            return 0;
        }
        ```
        </div> <!-- end of markdown content -->

    </div>

    <script src="js/markdown-it.min.js"></script>
    <script src="js/highlight.min.js"></script>

    <script src="js/test.js"></script>
    </body>
</html>

test.js

window.onload = function() {
    
    const md = markdownit({
      highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return '<pre><code class="hljs">' +
                   hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
                   '</code></pre>';
          } catch (__) {}
        }

        return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
      }
    });

    var div = document.getElementsByClassName('markdown');
    for (var i = 0; i < div.length; i++) {
        var content = div[i].innerHTML;
        document.getElementsByClassName('markdown')[i].innerHTML =  md.render(content);
    }
}

现在渲染出来的效果完全不符合预期：
渲染异常的效果