背景

上篇文章《我开发了个：所有数据只保存在 localStorage 的实用备忘录》提到，我用 Ace 这个Web编辑器，实现了一个 网页版 Sublime Text。临时存一些文本、代码、思路等，非常方便。

特点在于：

• 信息只保存本地，非常安全。
• 响应速度非常快。
• 编辑器好用，支持搜索、正则替换、多光标模式。
• 自动保存，退出后，未主动保存的文件也会存下来。

但是没有做语法高亮。这不太方便，所以我今天给它加上了「语法高亮和折叠功能」。

使用体验

基于文件名后缀识别

正如 Sublime Text 一样，我不做预测，只判断文件类型。用户可以在左侧的列表中，修改文件名，用.加上后缀，告知系统这是什么类型的文件。于是编辑器就是用这种文件对应的语言的语法。

文件名后缀和对应的语言映射关系如下：

{
  "py": "python",
  "go": "golang",
  "js": "javascript",
  "ts": "typescript",
  "c": "c_cpp",
  "cpp": "c_cpp",
  "erl": "erlang",
  "hrl": "erlang",
  "kt": "kotlin",
  "md": "markdown",
  "proto": "protobuf",
  "conf": "nginx",
  "txt": "plain_text",
  "rs": "rust",
  "rb": "ruby",
  "v": "verilog",
  "vhd": "vhdl",
  "vhdl": "vhdl"
}

此外，还有一些是文件后缀能看出语言类型的，不需要做映射：

[
  "jsx",
  "tsx",
  "css",
  "scss",
  "less",
  "sql",
  "java",
  "ejs",
  "sh",
  "lua",
  "svg",
  "xml",
  "json",
  "yaml",
  "html",
  "ini",
  "php",
  "r",
  "scala"
]

如果文件后缀转小写后，不在上面的列表中，则认为是文本类型，没有高亮和折叠。

只要修改文件名，语法高亮实时生效。

语法高亮动态加载

得益于 Ace 优秀的设计，我们可以懒加载语法配置。方法如下：

ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.3/');

这句代码设置了要请求的地址的基本路径，后面会去拼接需要的语法文件名。需要设置语法时，就这样调用：

editor.session.setMode("ace/mode/" + mode);

有哪些mode呢？可以在这里搜索到：cdnjs.com/libraries/a…

搜索mode-即可找到有配置的语法文件。

上面的语法映射，就是我手动添加的，筛选了一些自己认识的语法，把后缀映射到了语法文件名上。

这样设置好后，当你需要某种语法文件时，会自动去下载，下载完毕后，立马应用该语法。

此外，Ace 借助 service worker 实现了语法配置文件的缓存。需要下载某个配置文件时，如果已有缓存，就直接取缓存中的文件，不再下载了。如下图：

使用地址 & 源码

快来体验一下吧：

使用地址：tool.hullqin.cn/memo.html

源码：github.com/HullQin

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。