CodeMirror HTML模式不起作用 [英] CodeMirror HTML mode not working
问题描述
我正在尝试使用CodeMirror设置代码示例样式，但它部分工作 - 它将所选主题应用于 textarea 但语法不会突出显示。
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.
有我的页面：
<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，但结果是相同的（图像底部）：
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):
< img src =https://i.stack.imgur.com/PM6ai.pngalt =codemirror html mode>
问题在于模式：text / html这似乎无法正常工作，如果我使用模式：javascript它会为标签着色通过JavaScript语法规则。我该如何解决这个问题？
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. How can I fix this?
推荐答案
CodeMirror使用XML模式解析HTML。要使用它，必须包含相应的脚本，与任何其他模式相同。
CodeMirror parses HTML using the XML mode. 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>
并将模式设置为 xml ：
config = {
mode : "xml",
// ...
};
此外，您可能希望将解析器配置为允许格式不正确的XML。您可以通过切换 htmlMode 标志来执行此操作：
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
参见 XML / HTML模式演示。
这篇关于CodeMirror HTML模式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
