CodeMirror HTML模式无法工作

Question

CodeMirror HTML模式无法工作

32

我正在尝试使用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，但结果是相同的（图片底部）：

codemirror html mode

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

- vitto

3个回答

0

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

- Zezo Android

0

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

我犯了以下错误：

<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，然后初始化编辑器并最后调用其资产。在这种情况下，它没有起作用，花费了我一些时间才找到问题（我在WordPress中进行操作，所以我只让我的脚本依赖于codemirror.js）。

- khandaniel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eliran Malka · Accepted Answer

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 模式演示获取实时示例。