javascript CodeMirror HTML 模式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17622750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CodeMirror HTML mode not working
提问by vitto
I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textareabut 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，但结果是一样的（图像底部）：
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?
问题是mode: "text/html"它似乎无法正常工作，如果我使用mode: "javascript"它会根据 JavaScript 语法规则对标签进行着色。我怎样才能解决这个问题？
回答by Eliran Malka
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
CodeMirror 使用 XML 模式解析 HTML。要使用它，必须包含适当的脚本，与任何其他模式一样。
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. You can do so by switching the htmlModeflag on:
此外，您可能希望配置解析器以允许格式不正确的 XML。您可以通过打开htmlMode标志来做到这一点：
config = {
mode : "xml",
htmlMode: true,
// ...
};
See the XML/HTML mode demofor a live example.
请参阅XML/HTML 模式演示以获取实时示例。
回答by khandaniel
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/[email protected]/dist/csslint.js"></script>
This is wrong:I called first codemirror.js - main file, then initialized Editor and later called its assets. 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).
这是错误的：我首先调用了 codemirror.js - 主文件，然后初始化了 Editor，然后调用了它的资产。在这种情况下，它不起作用，我花了一些时间才找到问题（我在 WordPress 中这样做，所以我只是让我的脚本仅依赖于 codemirror.js）。
