回顾
上节我们编写了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; } }); })();
最终文件如上,我们给他取名叫MaterialOneDark.js,然后在编辑器引入:
image
设置为默认主题
看看效果:
非常非常非常nice
心满意足,打完收工~!