CodeMirror HTML 模式不起作用

Question

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.我正在尝试使用 CodeMirror 设置代码示例的样式，但它可以部分工作 - 它将所选主题应用于textarea ，但语法未突出显示。

There is my page:有我的页面：

<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>

Here is an image of the result.这是结果的图像。 It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):它似乎有效，但没有语法突出显示（图像顶部），我也尝试过不使用我的 CSS，但结果是相同的（图像底部）：

codemirror html模式

The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules.问题在于mode: "text/html"似乎无法正常工作，如果我使用mode: "javascript"它会通过 JavaScript 语法规则为标签着色。 How can I fix this?我怎样才能解决这个问题？

Answer 1

CodeMirror parses HTML using the XML mode. CodeMirror 使用 XML 模式解析 HTML。 To use it, the appropriate script must be included, same as with any other mode.要使用它，必须包含适当的脚本，与任何其他模式相同。

Add its dependency in your markup:在你的标记中添加它的依赖：

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

and set the mode to xml :并将模式设置为xml ：

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

In addition, you may want to configure the parser to allow for non well-formed XML.此外，您可能希望将解析器配置为允许格式不正确的 XML。 You can do so by switching the htmlMode flag on:您可以通过打开htmlMode标志来做到这一点：

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

See the XML/HTML mode demo for a live example.有关实时示例，请参阅XML/HTML 模式演示。

Answer 2

Just in case if my experience can be helpful to someone.以防万一我的经验对某人有帮助。

I did following mistake :我犯了以下错误：

<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>

This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets.这是错误的：我首先调用了 codemirror.js - 主文件，然后初始化了编辑器，然后调用了它的资产。 In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).在这种情况下，它不起作用，我花了一些时间才找到问题（我是在 WordPress 中做的，所以我只是让我的脚本依赖于 codemirror.js）。

Answer 3

<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
        mode: "text/css",
        lineNumbers: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        lint: true
    });
}
</script>

CodeMirror HTML 模式不起作用

问题描述

3 个解决方案

解决方案1
66 已采纳 2013-07-13 18:20:24

解决方案2
0 2020-04-27 12:52:02

解决方案3
0 2022-05-19 06:51:33

CodeMirror HTML 模式不起作用

问题描述

3 个解决方案

解决方案1 66 已采纳 2013-07-13 18:20:24

解决方案2 0 2020-04-27 12:52:02

解决方案3 0 2022-05-19 06:51:33

解决方案1
66 已采纳 2013-07-13 18:20:24

解决方案2
0 2020-04-27 12:52:02

解决方案3
0 2022-05-19 06:51:33