Razor模板编辑高亮CodeMirror和格式化JS-Beautify

<link rel="stylesheet" href="~/lib/codemirror-5.63.3/codemirror.css" />
@*代码折叠*@
<link rel="stylesheet" href="~/lib/codemirror-5.63.3/addon/fold/foldgutter.css">

<script src="~/lib/codemirror-5.63.3/codemirror.js"></script>

@*代码折叠*@
<script src="~/lib/codemirror-5.63.3/addon/fold/foldcode.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/foldgutter.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/brace-fold.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/xml-fold.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/indent-fold.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/markdown-fold.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/fold/comment-fold.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/mode/multiplex.js"></script>

<script src="~/lib/codemirror-5.63.3/addon/formatting/formatting.js"></script>
@*xml*@
<script src="~/lib/codemirror-5.63.3/mode/xml/xml.js"></script>

@*源代码*@
<script src="~/lib/codemirror-5.63.3/mode/clike/clike.js"></script>
@*html*@
<script src="~/lib/codemirror-5.63.3/mode/htmlmixed/htmlmixed.js"></script>
@*asp.net*@
<script src="~/lib/codemirror-5.63.3/mode/htmlembedded/htmlembedded.js"></script>
@*razor*@
<script src="~/lib/codemirror-5.63.3/mode/razor/razor.js"></script>
@*javascript*@
<script src="~/lib/codemirror-5.63.3/mode/javascript/javascript.js"></script>
@*css*@
<script src="~/lib/codemirror-5.63.3/mode/css/css.js"></script>
@*当前行高亮*@
<script src="~/lib/codemirror-5.63.3/addon/selection/active-line.js"></script>
<script src="~/lib/codemirror-5.63.3/addon/edit/matchbrackets.js"></script>



@*代码格式化*@
<script src="~/lib/js-beautify-1.14.0/beautify.js"></script>
<script src="~/lib/js-beautify-1.14.0/beautify-css.js"></script>
<script src="~/lib/js-beautify-1.14.0/beautify-html.js"></script>

<script src="~/js/beautifyHelper.js"></script>

<script>
    editorCode=null;
    $(document).ready(function(){
        editorCode = CodeMirror.fromTextArea(document.getElementById("Content"), {
                    lineNumbers: false,
                    mode: 'text/x-razor
                    //mode: 'htmlembedded',
                    //mode: 'htmlembedded',
                    styleActiveLine: true,
                    //matchBrackets: true
                    lineWrapping: true,
                    extraKeys: { "Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); } },
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
                });

                // 格式化html
    $("#format_code").click(function () {
        // 获得CoeMirror组件代码内容
        var source = editorCode.getValue();
        // 使用js-beautify格式化代码
        var output = new beautifyHelper().beautify(source, 'html')
        // 更新美化的代码到组件，beautify不支持razor，直接用结果会存在一些缩进问题
        //editorPluginHtml.setValue(output);
        //return
        // 添加一些razor的配置，按行来
        var lines = output.split('\n')
        var addTabSize = 0;
        lines.forEach((value, index, arr) => {

            var txt = value.trim()
            if (txt == '}') {
                // 遇到razor 代码块结尾，随后的行减少一个缩进
                addTabSize -= 1;
            }

            if (addTabSize > 0) {
                var str = ''
                for (var i = 0; i < addTabSize; i++)
                    str += '  '
                // 代码增加一个razor缩进
                arr[index] = str + value;
            }

            if (txt == '@@{' || txt == '{') {
                // 如果当前行是@@{ 或者 {,随后的行增加一个缩进
                addTabSize += 1;
            }

        });
        editorCode.setValue(lines.join('\n'));

        return false;
    })

    })


</script>