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官網找到了這樣的文件:

我們來翻譯一下他的步驟:

1. 把程式碼拉下來，進入tool資料夾，並安裝依賴
2. 把tmtheme檔案放到ththemes目錄裡面
3. 更新ththeme.js檔案，包含我們的新主題
4. 執行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