CodeMirror HTML 模式不起作用答案

【问题标题】：CodeMirror HTML mode not workingCodeMirror HTML 模式不起作用
【发布时间】：2013-07-12 19:36:41
【问题描述】：

我正在尝试使用 CodeMirror 设置代码示例的样式，但它只能部分工作 - 它将所选主题应用于 textarea，但语法未突出显示。

有我的页面：

<textarea id="template-html" name="code" class="CodeMirror">
    <!DOCTYPE html>
    <foobar>
        <blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
        <tag2 foo="2" bar="bar" />
    </foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
    var config, editor;

    config = {
        lineNumbers: true,
        mode: "text/html",
        theme: "ambiance",
        indentWithTabs: false,
        readOnly: true
    };

    editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);

    function selectTheme() {
        editor.setOption("theme", "solarized dark");
    }
    setTimeout(selectTheme, 5000);
</script>

这是结果的图像。它似乎有效，但没有语法突出显示（图像顶部），我也尝试过不使用我的 CSS，但结果是相同的（图像底部）：

问题在于 mode: "text/html" 似乎无法正常工作，如果我使用 mode: "javascript" 它会根据 JavaScript 语法规则对标签进行着色。我该如何解决这个问题？

【问题讨论】：

标签： javascript syntax-highlighting codemirror

【解决方案1】：

CodeMirror 使用 XML 模式解析 HTML。要使用它，必须包含适当的脚本，与任何其他模式相同。

在你的标记中添加它的依赖：

<script type="text/javascript" 
        src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>

并将模式设置为xml:

config = {
    mode : "xml",
    // ...
};

此外，您可能希望将解析器配置为允许格式不正确的 XML。您可以通过打开htmlMode 标志来做到这一点：

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};

查看XML/HTML mode demo 以获取实时示例。

【讨论】：

是的，我丢失了很多文件，但你给了我正确的方法：
我建议你 have a read on the website 并更好地了解 CodeMirror。
我遇到了与 OP 类似的问题，只是我尝试使用 Velocity 模式。我已经导入了 xml 脚本，但是自动关闭无论如何都不想工作。您是否碰巧知道 Velocity 是否应该按照设计尊重 autoCloseTags 设置？

【解决方案2】：

以防我的经验对某人有所帮助。

我犯了错误：

<script src="lib/codemirror.js"></script>
<script type="text/javascript">
    const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint@1.0.5/dist/csslint.js"></script>

这是错误的：我首先调用了 codemirror.js - 主文件，然后初始化了 Editor，然后调用了它的 assets。在这种情况下，它不起作用，我花了一些时间才找到问题（我是在 WordPress 中做的，所以我只是让我的脚本依赖于 codemirror.js）。

【讨论】：