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

2021年09月16日 阅读数:2
这篇文章主要向大家介绍测试平台系列(57) 美化代码编辑器,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Hello, 你们好~我是米洛,欢注迎个人关公号众测试开发坑货!css

回顾

上节咱们编写了JSON比对相关方法,虽然尚未运用到断言之中,但丝绝不影响咱们插播另外一篇文章。node

其实咱们的AceEditor引入许多主题的时候会有些卡顿,目前还不知道是主题太多呢,仍是补全代码太多,因此咱们先减小下主题再说。react

但因为我的一直没有特别喜欢的主题,因此其实非常苦恼,但我看到leetcode的代码编辑器,又很羡慕,它的monaco-editor支持了material,如图。git

leetcode的编辑器如此潇洒

调研一番

在经历了各类调研以后,发现了2个极品网站。github

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

  • 一键生成主题文件app

    可是主题文件是tmTheme格式的,不是太好用。dom

最左侧能够选各类主题

咱们找到本身最想要的2个: material one dark和atom dark编辑器

能够看到主题很是精美,是我想要的

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

咱们还有下面一个网站:

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

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

言归正传

不过话说回来,咱们由于是要改造AceEditor,因此咱们要找找AceEditor怎么添加自定义主题

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

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

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

简单粗暴!!!

试验一下

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

把主题写进去

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

彷佛没看到报错

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

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

结合react-ace

由于咱们用的是React组件,那么咱们势必要像以前的主题同样import.

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

能够看到他把css直接写入到cssText了

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

话很少说,咱们也来试验一下:

照搬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,而后在编辑器引入:

设置为默认主题

看看效果:

很是很是很是nice

心满意足,打完收工~!

在线体验地址: http://pity.buzz