我试图用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,
// ...
};
见 XMLHTML模式演示 为一个活生生的例子。
以防我的经验对别人有帮助。
我做了以下的工作 错误:
<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>
这是错的。 我首先调用了codemirror.js--主文件,然后初始化了编辑器,之后又调用了它的assets。在这种情况下,它没有工作,我花了很多时间才找到问题所在(我是在WordPress中做的,所以我只是让我的脚本只依赖于codemirror.js)。