57.美化代码编辑器

Hello, 大家好~我是米洛，欢注迎我的关公号众测试开发坑货!

📒 回顾

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

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

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

📒 调研一番

在经历了各种调研之后，发现了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官网找到了这样的文档:

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

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

简单粗暴！！！

🍦 试验一下

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

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

🍦 结合react-ace

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

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

这样就达到了只引入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，然后在编辑器引入:

看看效果:

心满意足，打完收工~！

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