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

简介: 美化代码编辑器

回顾


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

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

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

5.jpg

leetcode的编辑器如此潇洒

调研一番


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

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

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

6.jpg

最左侧可以选各种主题

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

7.jpg

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

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

我们还有下面一个网站:

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

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

言归正传


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

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

8.jpg

image

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

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

简单粗暴!!!

试验一下


9.jpg

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

10.jpg

把主题写进去

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

11.jpg

似乎没看到报错

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

12.jpg

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

结合react-ace


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

13.jpg

image

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

14.jpg

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

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

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

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

15.jpg

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

16.jpg

image

17.jpg

设置为默认主题

看看效果:

18.jpg

非常非常非常nice


心满意足,打完收工~!




相关文章
|
28天前
|
关系型数据库 MySQL 测试技术
【分享】AgileTC测试用例管理平台使用分享
AgileTC 是一个脑图样式测试用例管理平台,支持用例设计、执行与团队协作,帮助测试人员高效管理测试流程。
172 116
【分享】AgileTC测试用例管理平台使用分享
|
26天前
|
人工智能 数据可视化 测试技术
AI测试平台自动遍历:低代码也能玩转全链路测试
AI测试平台的自动遍历功能,通过低代码配置实现Web和App的自动化测试。用户只需提供入口链接或安装包及简单配置,即可自动完成页面结构识别、操作验证,并生成可视化报告,大幅提升测试效率,特别适用于高频迭代项目。
|
1月前
|
人工智能 测试技术 调度
写用例写到怀疑人生?AI 智能测试平台帮你一键生成!
霍格沃兹测试开发学社推出AI智能测试用例生成功能,结合需求文档一键生成高质量测试用例,大幅提升效率,减少重复劳动。支持自定义提示词、多文档分析与批量管理,助力测试人员高效完成测试设计,释放更多时间投入核心分析工作。平台已开放内测,欢迎体验!
|
1月前
|
人工智能 测试技术 项目管理
测试不再碎片化:AI智能体平台「项目资料套件」功能上线!
在实际项目中,需求文档分散、整理费时、测试遗漏等问题常困扰测试工作。霍格沃兹推出AI智能体测试平台全新功能——项目资料套件,可将多个关联文档打包管理,并一键生成测试用例,提升测试完整性与效率。支持套件创建、文档关联、编辑删除及用例生成,适用于复杂项目、版本迭代等场景,助力实现智能化测试协作,让测试更高效、更专业。
|
2月前
|
存储 人工智能 算法
AI测试平台实战:深入解析自动化评分和多模型对比评测
在AI技术迅猛发展的今天,测试工程师面临着如何高效评估大模型性能的全新挑战。本文将深入探讨AI测试平台中自动化评分与多模型对比评测的关键技术与实践方法,为测试工程师提供可落地的解决方案。
|
4月前
|
存储 测试技术 虚拟化
VMmark 4.0.3 - 虚拟化平台基准测试
VMmark 4.0.3 - 虚拟化平台基准测试
95 0
VMmark 4.0.3 - 虚拟化平台基准测试
|
28天前
|
人工智能 自然语言处理 测试技术
AI测试平台的用例管理实践:写得清晰,管得高效,执行更智能
在测试过程中,用例分散、步骤模糊、回归测试效率低等问题常困扰团队。霍格沃兹测试开发学社推出的AI测试平台,打通“用例编写—集中管理—智能执行”全流程,提升测试效率与覆盖率。平台支持标准化用例编写、统一管理操作及智能执行,助力测试团队高效协作,释放更多精力优化测试策略。目前平台已开放内测,欢迎试用体验!
|
2月前
|
存储 人工智能 文字识别
从零开始打造AI测试平台:文档解析与知识库构建详解
AI时代构建高效测试平台面临新挑战。本文聚焦AI问答系统知识库建设,重点解析文档解析关键环节,为测试工程师提供实用技术指导和测试方法论
|
2月前
|
人工智能 安全 数据可视化
安全测试平台的选型标准与搭建思路
随着企业安全需求升级,传统漏洞扫描和渗透测试已无法满足要求。构建安全测试平台(STP)成为趋势,实现漏洞扫描、权限评估、接口测试等工作的平台化运营。本文从选型标准、平台架构、模块功能等六个方面,系统讲解如何搭建企业级安全测试平台,提升安全能力。
|
5月前
|
安全 前端开发 Linux
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台
167 3
Immunity CANVAS Professional 7.27 (macOS, Linux, Windows) - 渗透测试和漏洞利用平台

热门文章

最新文章