如何使用 Codemirror 突出显示 README.md 文件

Question

现在我正在使用带有 codemirror 的 showdown.js 制作编辑器

我想突出显示摊牌库语法（如#Heading、**Bold**、``` Code ``）

这是我的代码

  let codemirror = CodeMirror.fromTextArea(
    document.getElementById("book-content"),
    {
      lineNumbers: true,
      lineWrapping: true,
      mode: "mustache",
      htmlMode: true,
      styleActiveLine: true,
      autoCloseTags: true,
      theme: "monokai",
      keyMap: "sublime",
      showCursorWhenSelecting: true,
    }
  );

<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css" />
<link rel="stylesheet" href="https://codemirror.net/theme/monokai.css" />

<textarea rows="15" id="book-content" placeholder="Enter Your README.md ...">
#Heading 1
##Heading 2

    <h1>Code Here</h1>

[Hyper Link](http://google.com/)

*Italic*

**Bold**
- foo1
    - bar
    - baz
- foo2
</textarea>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/keymap/sublime.js"></script>
<script src="https://codemirror.net/addon/selection/active-line.js"></script>
<script src="https://codemirror.net/addon/display/placeholder.js"></script>

我用下面的代码试试这个

<style>
.highlightred {
  color: var(--red);
}
.highlightorange {
  color: var(--orange);
}
.highlightgreen {
  color: var(--green);
}
.highlightblue {
  color: var(--blue);
}
</style>

<script>
const hightlightArray = [
  ["#", "highlightgreen"],
  ["+", "highlightorange"],
  ["-", "highlightorange"],
  ["*", "highlightorange"],
  [")", "highlightblue"],
  ["(", "highlightblue"],
  ["[", "highlightblue"],
  ["]", "highlightblue"],
  ["{", "highlightblue"],
  ["}", "highlightblue"],
  ["`", "highlightred"],
];

function highlightCodeMirror() {
  document.querySelectorAll(".CodeMirror-line span").forEach((element) => {
    let Value = element.textContent;
    HightLighted = Value;
    for (let i = 0; i < htmlEntities.length; i++) {
      const ThisElement1 = htmlEntities[i];
      HightLighted = HightLighted.replaceAll(
        ThisElement1[0],
        ThisElement1[1]
      );
    }
    for (let i = 0; i < hightlightArray.length; i++) {
      const ThisElement2 = hightlightArray[i];
      HightLighted = HightLighted.replaceAll(
        ThisElement2[0],
        `<span class='${ThisElement2[1]}'>${ThisElement2[0]}</span>`
      );
    }
    element.innerHTML = HightLighted;
  });
}
  setInterval(() => {
    highlightCodeMirror();
  }, 500);
</script>

此代码有效。但是 codemirror 的行为变得很糟糕。 active-line.js 不起作用，并且闪烁的光标未显示在 textarea 中。

请任何人帮助我解决这个问题

感谢提前

Answer 1

CodeMirror 已经有许多流程来重排 DOM。添加更多内容，尤其是在计时器上添加 innerHTML，可能会与 CodeMirror 冲突并影响性能。

最好的选择是使用已经可用的 CodeMirror 进程并编写一个包装函数。

有一个 ma​​rkdown mode 可能适合您的示例。这是带有降价部分的 CodeMirror demo。

您也可以使用overlay 查看CodeMirror: Overlay Parser Demo 的示例。

CodeMirror.defineMode("mustache", function(config, parserConfig) {
  var mustacheOverlay = {
    token: function(stream, state) {
      var ch;
      if (stream.match("{{")) {
        while ((ch = stream.next()) != null)
          if (ch == "}" && stream.next() == "}") {
            stream.eat("}");
            return "mustache";
          }
      }
      while (stream.next() != null && !stream.match("{{", false)) {}
      return null;
    }
  };
  return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});

还有keyword CodeMirror 插件，可让您突出显示关键字。