测试平台系列(57) 美化代码编辑器

简介: 美化代码编辑器

回顾


上节我们编写了JSON比对相关方法,虽然还没有运用到断言之中,但丝毫不影响我们插播另一篇文章。

其实我们的AceEditor引入许多主题的时候会有些卡顿,目前还不知道是主题太多呢,还是补全代码太多,所以我们先减少下主题再说。

但由于个人一直没有特别喜欢的主题,所以其实很是苦恼,但我看到leetcode的代码编辑器,又很羡慕,它的monaco-editor支持了material,如图。

5.jpg

leetcode的编辑器如此潇洒

调研一番


在经历了各种调研之后,发现了2个极品网站。

http://tmtheme-editor.herokuapp.com/#!/editor/theme/Material%20One%20Dark

  • 一键生成主题文件
    但是主题文件是tmTheme格式的,不是太好用。

6.jpg

最左侧可以选各种主题

我们找到自己最想要的2个: material one dark和atom dark

7.jpg

可以看到主题非常精美,是我想要的

点击Download就可以下载到对应的主题文件啦,其实这文件是用于vscode之中的,但咱们想嵌入WebIDE怎么弄呢?

我们还有下面一个网站:

https://bitwiser.in/monaco-themes/

这个网站可以把主题文件转为JSON文件,这样就能嵌入到monaco编辑器了!

言归正传


不过话说回来,我们因为是要改造AceEditor,所以我们要找找AceEditor怎么添加自定义主题

苦心人,天不负。在Ace的github官网找到了这样的文档:

8.jpg

image

我们来翻译一下他的步骤:

  1. 把代码拉下来,进入tool文件夹,并安装依赖
  2. 把tmtheme文件放到ththemes目录里面
  3. 更新ththeme.js文件,包含我们的新主题
  4. 执行node tmtheme.js

简单粗暴!!!

试验一下


9.jpg

先把下载下来的One Dark文件扔进去

10.jpg

把主题写进去

我这省略了npm install的步骤,我们直接node执行ththeme.js

11.jpg

似乎没看到报错

我们去检查下有没有文件生成:

12.jpg

最终在ace/lib/ace/theme文件夹找到嫌疑人

结合react-ace


因为我们用的是React组件,那么我们势必要像之前的主题一样import.

13.jpg

image

但我们生成了js和css,没事我们来看下比如monokai是怎么玩的:

14.jpg

可以看到他把css直接写入到cssText了

这样就达到了只引入js就能有样式的目的,好家伙!!!

[图片上传失败...(image-37a927-1631763617435)]

话不多说,我们也来试验一下:

15.jpg

image

照搬monokai的代码,把它require时候用的相对路径都改为绝对路径,最后把cssText用``括起来写进去。

cssClass等字段名字也要改掉哦~


ace.define("ace/theme/material-one-dark",["require","exports","module","ace/lib/dom"], function(require, exports, module) {
  exports.isDark = false;
  exports.cssClass = "ace-material-one-dark";
  exports.cssText = `
.ace-material-one-dark .ace_gutter {
  background: #272B33;
  color: rgb(103,111,122)
}
.ace-material-one-dark .ace_print-margin {
  // width: 1px;
  background: #e8e8e8
}
.ace-material-one-dark {
  background-color: #272B33;
  color: #A6B2C0
}
.ace-material-one-dark .ace_cursor {
  color: #528BFF
}
.ace-material-one-dark .ace_marker-layer .ace_selection {
  background: #3D4350
}
.ace-material-one-dark.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #272B33;
  border-radius: 2px
}
.ace-material-one-dark .ace_marker-layer .ace_step {
  background: rgb(198, 219, 174)
}
.ace-material-one-dark .ace_marker-layer .ace_bracket {
  margin: -1px 0 0 -1px;
  border: 1px solid #747369
}
.ace-material-one-dark .ace_marker-layer .ace_active-line {
  background: #2B313A
}
.ace-material-one-dark .ace_gutter-active-line {
  background-color: #2B313A
}
.ace-material-one-dark .ace_marker-layer .ace_selected-word {
  border: 1px solid #3D4350
}
.ace-material-one-dark .ace_fold {
  background-color: #61AEEF;
  border-color: #A6B2C0
}
.ace-material-one-dark .ace_keyword {
  color: #C679DD
}
.ace-material-one-dark .ace_keyword.ace_operator {
  color: #A6B2C0
}
.ace-material-one-dark .ace_keyword.ace_other.ace_unit {
  color: #D2945D
}
.ace-material-one-dark .ace_constant {
  color: #D2945D
}
.ace-material-one-dark .ace_constant.ace_numeric {
  color: #D2945D
}
.ace-material-one-dark .ace_constant.ace_character.ace_escape {
  color: #57B6C2
}
.ace-material-one-dark .ace_support.ace_function {
  color: #57B6C2
}
.ace-material-one-dark .ace_support.ace_class {
  color: #E5C17C
}
.ace-material-one-dark .ace_storage {
  color: #C679DD
}
.ace-material-one-dark .ace_invalid.ace_illegal {
  color: #272B33;
  background-color: #f2777a
}
.ace-material-one-dark .ace_invalid.ace_deprecated {
  color: #272B33;
  background-color: #d27b53
}
.ace-material-one-dark .ace_string {
  color: #90C378
}
.ace-material-one-dark .ace_string.ace_regexp {
  color: #57B6C2
}
.ace-material-one-dark .ace_comment {
  font-style: italic;
  color: #59626F
}
.ace-material-one-dark .ace_variable {
  color: #DF6A73
}
.ace-material-one-dark .ace_meta.ace_selector {
  color: #C679DD
}
.ace-material-one-dark .ace_entity.ace_other.ace_attribute-name {
  color: #D2945D
}
.ace-material-one-dark .ace_entity.ace_name.ace_function {
  color: #61AEEF
}
.ace-material-one-dark .ace_entity.ace_name.ace_tag {
  color: #DF6A73
}
.ace-material-one-dark .ace_markup.ace_list {
  color: #DF6A73
}
`;
  var dom = require("ace/lib/dom");
  dom.importCssString(exports.cssText, exports.cssClass);
});                (function() {
  ace.require(["ace/theme/ace-material-one-dark"], function(m) {
    if (typeof module == "object" && typeof exports == "object" && module) {
      module.exports = m;
    }
  });
})();

最终文件如上,我们给他取名叫MaterialOneDark.js,然后在编辑器引入:

16.jpg

image

17.jpg

设置为默认主题

看看效果:

18.jpg

非常非常非常nice


心满意足,打完收工~!




相关文章
|
4月前
|
Kubernetes 测试技术 Perl
混沌测试平台 Chaos Mesh
混沌测试平台 Chaos Mesh
129 1
|
22天前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
5月前
|
传感器 数据采集 监控
LabVIEW电池管理系统测试平台
LabVIEW电池管理系统测试平台
68 4
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
108 1
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
66 2
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
53 0
|
4月前
|
测试技术 Android开发 iOS开发
Appium 是一个开源的自动化测试框架,它支持多种平台和多种编程语言
Appium是一款开源自动化测试框架,支持iOS和Android多平台及多种编程语言。通过WebDriver协议,开发者可编写自动化测试脚本。在iPhone上实现屏幕点击等操作需安装Appium及其依赖,启动服务器,并设置所需的测试环境参数。利用Python等语言编写测试脚本,模拟用户交互行为,最后运行测试脚本来验证应用功能。对于iPhone测试,需准备真实设备或Xcode模拟器。
132 1
|
4月前
|
运维 Kubernetes 监控
|
5月前
|
传感器 存储 数据采集
LabVIEW阀性能测试平台
LabVIEW阀性能测试平台
53 0
|
6月前
|
jenkins Java 测试技术
电商返利平台的测试与持续集成
电商返利平台的测试与持续集成