PrismJS 代码块允许 HTML 标记

keywords: prismjs 代码 html标记 js 斜体 粗体 删除线 下划线

Prismjs 引入后会忽略所有 HTML 标记，包括粗体 <strong> </strong> 斜体 <em> </em> 下划线 <u> </u> 删除线 <s> </s> 。但有时我们可能需要用 HTML 标记来突出显示注释等内容，像这样：

print('Hello,World')
#print hello word

在 Prism.js 文件末尾添加以下代码解决：

!(function () {
  if (!self.Prism) {
    return;
  }
  var div = document.createElement("div");
  Prism.hooks.add("before-highlight", function (env) {
    var elt = env.element;
    if (
      !elt.hasAttribute("data-keep-tags") &&
      elt.parentNode.tagName.toLowerCase() === "pre"
    ) {
      elt = elt.parentNode;
    }
    env.keepTags = true;
    env.keepTagsPlaceholder = "___KEEPTAGS{n}___";
    var tags_regex = /<(strong|em|u|s)>([\s\S]*?)<\/\1>/g;
    env.keepTagsRegex = tags_regex;
    env.tokenStack = [];
    env.backupCode = env.code;
    var code = env.element.innerHTML;
    code = code.replace(tags_regex, function (match) {
      env.tokenStack.push(match);
      return env.keepTagsPlaceholder.replace("{n}", env.tokenStack.length);
    });
    env.element.innerHTML = code;
    code = env.element.textContent;
    code = code.replace(/^(?:\r?\n|\r)/, "");
    env.code = code;
  });
  Prism.hooks.add("after-highlight", function (env) {
    if (!env.keepTags) {
      return;
    }
    for (var i = 0, t; (t = env.tokenStack[i]); i++) {
      t = t.replace(env.keepTagsRegex, function (match, tag, inside) {
        div.innerHTML = inside;
        inside = div.textContent;
        return (
          "<" +
          tag +
          ">" +
          Prism.highlight(inside, env.grammar, env.language) +
          "</" +
          tag +
          ">"
        );
      });
      env.highlightedCode = env.highlightedCode.replace(
        env.keepTagsPlaceholder.replace("{n}", i + 1),
        t
      );
      env.element.innerHTML = env.highlightedCode;
    }
  });
})();

Cover: Martin Vorel, CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0, via Wikimedia Commons