时间戳

首页 > 解决方案 > CodeMirror 不显示 HTML 模式

javascript - CodeMirror 不显示 HTML 模式

问题描述

我正在尝试在我的 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>

任何帮助将不胜感激！

谢谢！

标签： javascriptjqueryhtmlcsscodemirror

解决方案

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>

推荐阅读