我正在尝试使用 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 语法规则。我该如何解决这个问题？
最佳答案
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举个例子。
关于javascript - CodeMirror HTML 模式不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17622750/