上效果

代码

此处演示纯js版本，而切实5.x版本，最新版本6.x变化较大，不搞

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.css" rel="stylesheet">

    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/theme/night.min.css" rel="stylesheet">

</head>

<body>

    <textarea id="abc">

        {"job_name":"西藏域名监控","metrics_path":"/probe","params":{"module":["http_2xx"]},"file_sd_configs":[{"files":["targets/probes/xizang.json"],"refresh_interval":"6m"}],"relabel_configs":[{"source_labels":["__address__"],"target_label":"__param_target"},{"source_labels":["__param_target"],"target_label":"instance"},{"target_label":"__address__","replacement":"172.21.16.52:9115"}]}

    </textarea>

    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/javascript/javascript.min.js"></script>

    <script>

        //  格式化插件

        CodeMirror.extendMode("css", {

            commentStart: "/*",

            commentEnd: "*/",

            newlineAfterToken: function (type, content) {

                return /^[;{}]$/.test(content);

            }

        });

        CodeMirror.extendMode("javascript", {

            commentStart: "/*",

            commentEnd: "*/",

            // FIXME semicolons inside of for

            newlineAfterToken: function (type, content, textAfter, state) {

                if (this.jsonMode) {

                    return /^[\[,{]$/.test(content) || /^}/.test(textAfter);

                } else {

                    if (content == ";" && state.lexical && state.lexical.type == ")") return false;

                    return /^[;{}]$/.test(content) && !/^;/.test(textAfter);

                }

            }

        });

        CodeMirror.extendMode("xml", {

            commentStart: "<!--",

            commentEnd: "-->",

            newlineAfterToken: function (type, content, textAfter) {

                return type == "tag" && />$/.test(content) || /^</.test(textAfter);

            }

        });

        // Comment/uncomment the specified range

        CodeMirror.defineExtension("commentRange", function (isComment, from, to) {

            let cm = this, curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode;

            cm.operation(function () {

                if (isComment) { // Comment range

                    cm.replaceRange(curMode.commentEnd, to);

                    cm.replaceRange(curMode.commentStart, from);

                    if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside

                        cm.setCursor(from.line, from.ch + curMode.commentStart.length);

                } else { // Uncomment range

                    let selText = cm.getRange(from, to);

                    let startIndex = selText.indexOf(curMode.commentStart);

                    let endIndex = selText.lastIndexOf(curMode.commentEnd);

                    if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {

                        // Take string till comment start

                        selText = selText.substr(0, startIndex)

                            // From comment start till comment end

                            + selText.substring(startIndex + curMode.commentStart.length, endIndex)

                            // From comment end till string end

                            + selText.substr(endIndex + curMode.commentEnd.length);

                    }

                    cm.replaceRange(selText, from, to);

                }

            });

        });

        // Applies automatic mode-aware indentation to the specified range

        CodeMirror.defineExtension("autoIndentRange", function (from, to) {

            let cmInstance = this;

            this.operation(function () {

                for (let i = from.line; i <= to.line; i++) {

                    cmInstance.indentLine(i, "smart");

                }

            });

        });

        // Applies automatic formatting to the specified range

        CodeMirror.defineExtension("autoFormatRange", function (from, to) {

            let cm = this;

            let outer = cm.getMode(), text = cm.getRange(from, to).split("\n");

            let state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);

            let tabSize = cm.getOption("tabSize");

            let out = "", lines = 0, atSol = from.ch == 0;

            function newline() {

                out += "\n";

                atSol = true;

                ++lines;

            }

            for (let i = 0; i < text.length; ++i) {

                let stream = new CodeMirror.StringStream(text[i], tabSize);

                while (!stream.eol()) {

                    let inner = CodeMirror.innerMode(outer, state);

                    let style = outer.token(stream, state), cur = stream.current();

                    stream.start = stream.pos;

                    if (!atSol || /\S/.test(cur)) {

                        out += cur;

                        atSol = false;

                    }

                    if (!atSol && inner.mode.newlineAfterToken &&

                        inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || "", inner.state))

                        newline();

                }

                if (!stream.pos && outer.blankLine) outer.blankLine(state);

                if (!atSol) newline();

            }

            cm.operation(function () {

                cm.replaceRange(out, from, to);

                for (let cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)

                    cm.indentLine(cur, "smart");

                cm.setSelection(from, cm.getCursor(false));

            });

        });

        // 使用

        let editor = CodeMirror.fromTextArea(document.getElementById('abc'), {

            lineNumbers: true,

            mode: "application/json",

            theme: 'night'

        });

        let totalLines = editor.lineCount();

        editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });

    </script>

</body>

</html>

react版

参考这里，写这篇文章的时候，有用到

codemirror代码格式化的更多相关文章

  1. [No00007B]DreamweaverCC 的CSS代码格式化

    Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...

  2. code blocks 如何实现一键代码格式化

    问题:code blocks 如何实现一键代码格式化 解答:直接右键,选择format use ASstyle

  3. 使用AStyle进行代码格式化

    转自:http://www.cnblogs.com/JerryTian/archive/2012/09/20/AStyle.html 在日常的编码当中,大家经常要遵照一些设计规范,如命名规则.代码格式 ...

  4. iOS开发-xCode代码格式化xAlign

    xCode默认是可以进行代码格式化的,能满足基础开发需求,如果想要个性一些代码对齐方式宏对齐,等号对齐,属性对齐,xAlign就提供了以上三种功能,参考文中效果~ 基础效果 等号对齐: 属性对齐: 宏 ...

  5. MyEclipse中防止代码格式化时出现换行的情况的设置

    编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行.虽然自动换行以后在编辑器中一眼就能看到全部的代码,但是可读性却大打折扣,避免出现这种情况的办法是: 1.Java代码 ...

  6. 在线代码格式化，在线JSON校验格式化

    在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具

  7. 超详细的Xcode代码格式化教程，可自定义样式。

    超详细的Xcode代码格式化教程,可自定义样式. 为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题.在之前,我们可能会写完代码后,再 ...

  8. 如何通过VIM把代码格式化后生成HTML网页代码

    本文转自http://wangxiaoyu.blog.51cto.com/922065/203471 需求及思路:演示需要,需要网站上嵌入一些代码,我的建议做法是根据代码文件,生成相应的HTML代码, ...

  9. 转载：MyEclipse中防止代码格式化时出现换行的情况的设置

     转载出处:http://www.cnblogs.com/yjhrem/articles/2310013.html 编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行. ...

  10. astyle代码格式化

    Artistic Style 1.24 A Free, Fast and Small Automatic Formatterfor C, C++, C#, and Java Source Code 项 ...

随机推荐

  1. 无耳 Solon Ai MCP，发布工具服务，使用工具服务。效果预览！

    solon-ai-mcp 是 solon-ai 的扩展特性.提供 mcp 协议的支持.通过它,可以方便的发布 Tool Service,方便的使用 Tool Service. 引入依赖包 <de ...

  2. Junit单元测试的maven设置

    maven 官方文档: https://maven.apache.org/surefire/maven-surefire-plugin/usage.html maven是通过插件 maven-sure ...

  3. 定时任务稳定性解决方案-healthchecks监控系统

    背景 目前crontab出现问题后无感知,发现问题不及时,几乎是靠业务部门或用户反馈的方式,研发部门再排查的方式,处理问题.发现问题相对滞后,由此可见需要进一步优化crontab的稳定性,降故障通知前 ...

  4. 2025西安交大集训Day1:二分,三分,哈希,高精度,位运算,模拟退火

    2025西安交大集训Day1:二分,三分,哈希,高精度,位运算,模拟退火 二分 详见2025dsfz集训Day2:二分与三分,三分在当前文章内已经重构过. 三分 三分算法详细解释 三分算法(Terna ...

  5. 内网穿透——Natapp实现

    转自:NATAPP使用教程(内网穿透)_Willing卡卡的博客-CSDN博客_natapp NATAPP内网穿透使用教程 本文主要分享了有关内网穿透NATAPP的使用,包括:注册.建立隧道(免费). ...

  6. Vue(五)—Class与style绑定

    Vue-Class与style绑定 class.style都属于attribute,所以通过v-bind来绑定 针对class.style属性,v-bind可以通过对象或数组去指定 绑定Html Cl ...

  7. 1.3K star！像拿快递一样传送文件，这么酷！

    嗨,大家好,我是小华同学,关注我们获得 "最新.最全.最优质" 开源项目和高效工作学习方法 trzsz 是一款革命性的文件传输工具,专为终端用户设计.它完美兼容传统 rz/sz 协 ...

  8. idea创建类时默认添加头部注释信息

  9. IDEA如何增加界面对比度

    这个问题困扰大家许久了应该,今天就让我来终结吧! 背景的对比度虽然没法直接修改,但是我们可以直接改背景色进而达到修改对比度的效果! Editor--color Scheme--general--Tex ...

  10. 利用堆排序和分治法求解千万级数据排序的Top K问题—百度面试

    目录 问题描述 问题解析 第一步:查询次数统计 第二步:找出Top 10 算法一:排序 算法二:部分排序 算法三:堆排序 1.构造初始堆 2.首尾交换,断尾重构 3.迭代执行第二步 算法四:分治法 小 ...