codemirror代码格式化
上效果
代码
此处演示纯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代码格式化的更多相关文章
- [No00007B]DreamweaverCC 的CSS代码格式化
Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...
- code blocks 如何实现一键代码格式化
问题:code blocks 如何实现一键代码格式化 解答:直接右键,选择format use ASstyle
- 使用AStyle进行代码格式化
转自:http://www.cnblogs.com/JerryTian/archive/2012/09/20/AStyle.html 在日常的编码当中,大家经常要遵照一些设计规范,如命名规则.代码格式 ...
- iOS开发-xCode代码格式化xAlign
xCode默认是可以进行代码格式化的,能满足基础开发需求,如果想要个性一些代码对齐方式宏对齐,等号对齐,属性对齐,xAlign就提供了以上三种功能,参考文中效果~ 基础效果 等号对齐: 属性对齐: 宏 ...
- MyEclipse中防止代码格式化时出现换行的情况的设置
编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行.虽然自动换行以后在编辑器中一眼就能看到全部的代码,但是可读性却大打折扣,避免出现这种情况的办法是: 1.Java代码 ...
- 在线代码格式化，在线JSON校验格式化
在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具
- 超详细的Xcode代码格式化教程，可自定义样式。
超详细的Xcode代码格式化教程,可自定义样式. 为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题.在之前,我们可能会写完代码后,再 ...
- 如何通过VIM把代码格式化后生成HTML网页代码
本文转自http://wangxiaoyu.blog.51cto.com/922065/203471 需求及思路:演示需要,需要网站上嵌入一些代码,我的建议做法是根据代码文件,生成相应的HTML代码, ...
- 转载：MyEclipse中防止代码格式化时出现换行的情况的设置
转载出处:http://www.cnblogs.com/yjhrem/articles/2310013.html 编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行. ...
- astyle代码格式化
Artistic Style 1.24 A Free, Fast and Small Automatic Formatterfor C, C++, C#, and Java Source Code 项 ...
随机推荐
- Python科学计算系列9—逻辑代数
1.基本定理的验证 代码如下: from sympy import * A, B, C = symbols('A B C') # 重叠律 # A·A=A A+A=A print(to_cnf(A | ...
- git版本管理库运用
一.git 删除本地创建的仓库连接 //删除文件夹下的所有 .git 文件 find . -name ".git" | xargs rm -Rf 二.git命令:全局设置用户名邮箱 ...
- SearXNG+MCP实现搜索引擎，想怎么搜就怎么搜
一.概述 MCP应用市场,有很多搜索引擎的应用.但是你们会发现,普遍都需要api-key.你必须花钱购买api-key才能实现搜索功能. 问题来了,我就想用免费搜索的,就向百度一样,可不可以? 答案是 ...
- Argo CD
目录 一.什么是 Argo CD 二.为什么选择 Argo CD 三.Argo CD 架构 1.API服务器 2.存储库服务器 3.应用程序控制器 四.Argo CD 的使用 1.要求 2.安装 Ar ...
- 关于：win远程桌面连接命令怎么用
远程桌面连接命令怎么用? 事实上,远程桌面连接命令很简单,一个mstsc命令就搞定: 也可以直接使用第三方远程桌面管理软件,比如 IIS7远程桌面管理 这些,但是想要真正连接上远程桌面是有前提的,下面 ...
- 抽象方法(abstract)、虚方法(virtual)及接口(interface)
抽象方法(abstract).虚方法(virtual)及接口(interface) 抽象方法(abstract) 定义:abstract关键词标记的方法--抽象方法 特征: 抽象方法只能定义在抽象类里 ...
- AUTOFAC学习DEMO2-——ContainerBuilder注册三种方式、反射注册
注册组件 通过容器构造器ContainerBuilder注册组件的三种方式: 通过类型反射注册 通过现存实例注册(实现对象的实例) lambda表达式注册(通过可实例化对象的匿名函数注册) 每个组件可 ...
- 一、C语言概述
声明 本文内容大多取自<高级语言程序设计一书>,为本人学习笔记记录,切勿用于商业用途. 第一节 计算机发展 电子计算机已经历的四个发展时代: 第一代:20 世纪 50 年代,主要采用真空电 ...
- C#网络编程(二)----网络层/链路层
网络层协议 网络层(Network Layer) 的主要功能是实现主机之间的逻辑寻址.路由选择和分组转发,确保数据在不同网络(如局域网.广域网)之间的传输 协议类别 核心协议 路由协议 辅助协议 扩展 ...
- LocalDateTime时间工具之“2023-01-18T23:59:59.999999999”转“yyyy-MM-dd HH:mm:ss”
LocalDateTime时间工具之"2023-01-18T23:59:59.999999999"转"yyyy-MM-dd HH:mm:ss" 代码 Local ...