Showdown 通过highlight.js 来实现代码语法高亮

  Showdown 本身是没有提供代码语法高亮功能的。虽然它有好几个已关闭的相关issue提到实现方式,但在它的wiki 里面并没有提到。实现方式没有什么特别的地方,只是通过extension 的方式调用highlight.js 来处理而已。

import showdown from "showdown";

const mapLanguage = {
  zsh: 'bash'
}

showdown.extension("highlight", function() {
  return [
    {
      type: "output",
      filter: function(text, converter, options) {
        var left = "<pre><code\\b[^>]*>",
          right = "</code></pre>",
          flags = "g";
        var replacement = function(wholeMatch, match, left, right) {
          var lang = (left.match(/class=\"([^ \"]+)/) || [])[1];
          left = left.slice(0, 18) + "hljs " + left.slice(18);
          left = left.slice(0, 4) + ` alt="${lang}"` + left.slice(4);  // 与highlight.js 无关,特殊样式处理所需
          if (lang) lang = mapLanguage[lang] || lang;
          if (lang && window.hljs.getLanguage(lang)) {
            return left + window.hljs.highlight(lang, match).value + right;
          } else {
            return left + window.hljs.highlightAuto(match).value + right;
          }
        };
        return showdown.helper.replaceRecursiveRegExp(
          text,
          replacement,
          left,
          right,
          flags
        );
      }
    }
  ];
});

const converter = new showdown.Converter({ extensions: ['highlight'] })
您的浏览器已过时

要正常浏览本网站请升级您的浏览器。现在升级

×