测试平台系列(57) 美化代码编辑器-阿里云开发者社区

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

2022-05-29 289

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 美化代码编辑器

回顾

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

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

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

leetcode的编辑器如此潇洒

调研一番

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

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

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

最左侧可以选各种主题

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

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

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

我们还有下面一个网站:

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

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

言归正传

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

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

image

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

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

简单粗暴！！！

试验一下

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

把主题写进去

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

似乎没看到报错

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

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

结合react-ace

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

image

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

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

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

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

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

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;
    }
  });
})();