javascript - 使用带有缩进的angular-ui-codemirror进行代码美化

我使用以下代码通过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,
    // ...
};

..and角，您将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/