我使用以下代码使用 jquery 生成了 xml 代码,
var _outerBlock = $("<outerBlock>");
for (var i = 0; i < 10; i++) {
var _innerBlock = $("<innerBlock>Serial " + i + "</innerBlock>")
_outerBlock.append(_innerBlock)
}
var _tmp = $("<div>");
var $output = _tmp.html();
现在我在 $output 变量中得到一行 xml 代码。我尝试使用 codemirror.js 来美化这段代码,它应用了样式,但没有添加缩进。
这里是我使用纯 codemirror.js 从浏览器控制台尝试的内容
var myCodeMirror = CodeMirror(document.body, {
value: code,
mode: "text/html",
lineNumbers:true
});
如何使用缩进?如何使用 angular-ui-codemirror 显示代码?
最佳答案
为了正确的 xml 语法缩进,您需要包含
<script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
(xml模式js文件的路径可能不同,但你无论如何都需要这样的定义..)
然后你可以这样使用它:
config = {
mode : "xml",
htmlMode: true,
// ...
};
..在 Angular 中,您可以将 ui-codemirror 附加到您需要的任何元素。
在 Angular 中,设置的方式有所不同:
myAppModule.controller('MyController', [ '$scope', function($scope) {
$scope.editorOptions = {
lineWrapping : true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'xml',
};
}]);
..还有
<ui-codemirror ui-codemirror-opts="editorOptions"></ui-codemirror>
来源/进一步阅读:
https://libraries.io/bower/angular-sdco-tools
CodeMirror HTML mode not working
https://github.com/angular-ui/ui-codemirror/blob/master/README.md
关于javascript - 使用带有缩进的 angular-ui-codemirror 进行代码美化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30827626/