CodeMirror HTML模式不起作用

vit*_*tto 26 javascript syntax-highlighting codemirror

我正在尝试使用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>
Run Code Online (Sandbox Code Playgroud)

这是结果的图像.它似乎工作,但没有语法高亮(图像顶部),我也尝试没有我的CSS,但结果是相同的(图像底部):

codemirror html模式

问题是mode: "text/html",如果我使用mode: "javascript"它似乎无法正常工作,它会通过JavaScript语法规则对标记进行着色.我怎样才能解决这个问题?

Eli*_*lka 52

CodeMirror使用XML模式解析HTML.要使用它,必须包含相应的脚本,与任何其他模式相同.

在标记中添加其依赖项:

<script type="text/javascript" 
        src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
Run Code Online (Sandbox Code Playgroud)

并将模式设置为xml:

config = {
    mode : "xml",
    // ...
};
Run Code Online (Sandbox Code Playgroud)

此外,您可能希望将解析器配置为允许格式不正确的XML.您可以通过切换htmlMode标志来执行此操作:

config = {
    mode : "xml",
    htmlMode: true,
    // ...
};
Run Code Online (Sandbox Code Playgroud)

有关实例,请参阅XML/HTML模式演示.