上效果

代码

此处演示纯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. Codeforces Round 971 (Div. 4)

    C. The Legend of Freya the Frog 因为是从x开始跳,贪心的取肯定是直接用max(a,b)/d向上取整然后再乘2,但是要注意,如果再x到达之前,y已经是到达了,也就是某次以 ...

  2. Codeforces Round 954 (Div. 3)

    A. X Axis 1.既然要求每个点到a到距离之和最小,不妨让点a为3个点中的中间点,也就是先对三个数从小到大排序,然后输出首尾数减中间值的绝对值之和即可 #include <bits/std ...

  3. issue: java.lang.NoClassDefFoundError: javax/el/ELManager

    问题描述: Context initialization failed org.springframework.beans.factory.BeanCreationException: Error c ...

  4. C#基础——超级方便的ExpandoObject类别

    这东西是.NET Framework 4.5 的新东西..发现这个,大概就跟发现新大陆一样的兴奋,让我再次赞叹Anders Hejlsberg 之神.. 这边有MSDN : http://msdn.m ...

  5. ​.NET AI Preview 2 发布：支持 Aspire 与 Qdrant 向量库集成，加速云原生 AI 开发​

    引言 随着人工智能(AI)技术的迅猛发展,开发者对简单.高效的AI开发工具需求日益增加.微软 .NET 团队最近发布了 .NET AI 模板的 Preview 2 版本,这一更新为开发者带来了诸多令人 ...

  6. dashboard部署

    1.下载dashboard资源请单 wget  https://raw.githubusercontent.com/kubernetes/dashboard/v1.10.1/src/deploy/re ...

  7. 自荐：开源截图工具ScreenCapture：超多控制指令，支持截长图

    特性 跨屏幕截图.滚动截图(截长图).高分屏支持.窗口区域高亮. 取景框,快捷键复制 RGB 颜色(Ctrl+R). HEX 颜色(Ctrl+H)与 CMYK 颜色(Ctrl+K). 绘制填充.非填充 ...

  8. TenantLineInnerInterceptor源码解读

    一.引言 TenantLineInnerInterceptor是MyBatis-Plus中的一个拦截器类,位于com.baomidou.mybatisplus.extension.plugins.in ...

  9. WPF 粉笔绘制

    在做白板书写的时候,会有各种笔的绘制,比如 书写笔.马克笔.演示笔等等.粉笔的功能需求也是很有必要的. 上网搜了一圈,几乎没有绘制粉笔的. 有的是毛笔.楷体等绘制的如下博客: wpf inkcanva ...

  10. Spring异常处理 bug ！！！同一份代码，结果却不一样？

    1. 背景 在上周遇到一个spring bug的问题,将其记录一下.简化的代码如下: public void insert() { try { Person person = new Person() ...