CodeMirror 不显示 HTML 模式答案

【问题标题】：CodeMirror Doesn't Display HTML ModeCodeMirror 不显示 HTML 模式
【发布时间】：2018-11-23 19:39:33
【问题描述】：

我正在尝试在我的 Web 应用程序中使用 CodeMirror 模式，但它不会突出显示模式“htmlmixed”的单词。我不明白出了什么问题。每个文件的路径都是正确的，因为我没有收到任何 404 错误。这是我所做的：

<!DOCTYPE html>
<head>
    <script src="/node_modules/codemirror/lib/codemirror.js"></script>           
    <link rel="stylesheet" href="/path-to/codemirror/lib/codemirror.css">
   <script src="/path-to/codemirror/lib/codemirror.js"></script>
   <script src="/path-to/codemirror/mode/htmlmixed/htmlmixed.js"></script>
   <script src="/path-to/jquery.min.js"></script>
</head>
<html>
    <textarea id="editor"></textarea>
    ....
</html>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
         lineNumbers: true,
         mode:  "htmlmixed",
         htmlMode: true,
});
</script>

任何帮助将不胜感激！

谢谢！

【问题讨论】：

<link rel="stylesheet" href="/path-to/codemirror/lib/codemirror.css">这是实际路径吗？
嗨，ksav，为了简单起见，我刚刚修改了路径。我的实际代码中的路径是正确的。

标签： javascript jquery html css codemirror

【解决方案1】：

htmlmixed 模式取决于xml、javascript 和css 模式。必须包含它们，htmlmixed 才能工作。

这是一个例子：

var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
  lineNumbers: true,
  mode:  "htmlmixed",
  htmlMode: true,
});

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/codemirror.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/xml/xml.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.41.0/mode/css/css.js"></script>
</head>
<html>
  <textarea id="editor">&lt;p&gt; I am HTML&lt;/p&gt;
&lt;script&gt;
  console.log(&quot;I am JS&quot;);
&lt;/script&gt;</textarea>
</html>

【讨论】：