--- theme: smartblue highlight: atom-one-dark --- # 用Tauri开发一个EPUB编辑器（二） Monaco Editor的汉化、代码高亮、设置主题、代码补全 [Ebook Code - Taiyuuki的专栏](https://juejin.cn/column/7375041782780968986) 上一篇：[Tauri + Monaco Editor 写一个vscode风格的EPUB编辑器（一） Ebook Code介绍](https://juejin.cn/post/7375370443731828773) ![eb23.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f8d113fceee4b9fa2cbdc0127abb19f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1130&h=735&s=189498&e=gif&f=70&b=021629) ## Monaco Editor的基本使用我使用的是Vite，因此本文只讨论Vite环境下的Monaco Editor。在Vite中使用monaco可以参考官方提供的示例代码： [monaco-editor/docs/integrate-esm.md at main · microsoft/monaco-editor](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite) 初始化Monaco Editor `src/editor/init.ts` ```ts import * as monaco from 'monaco-editor' import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' import typescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' function initMonaco() { self.MonacoEnvironment = { getWorker: function(_workerId: string, label: string) { switch (label) { case 'json': return new jsonWorker({ name: label }) case 'css': return new cssWorker({ name: label }) case 'html': case 'xhtml': case 'xml': return new htmlWorker({ name: label }) case 'javascript': return new typescriptWorker({ name: label }) default: return new editorWorker({ name: label }) } }, } return monaco } export { initMonaco } ``` monaco提供了各种语言服务，它们是通过web worker实现的。对于EPUB文件来说，绝大多数情况下，我们只需支持HTML和CSS两种语言即可，但也不能排除极少数情况下会有JS和JSON，所以我针对上面这些语言注册了对应的服务。值得注意的是，monaco并没有单独提供XML、XHTML的服务，所以统一用HTML。 CodeEditor组件： ```html ``` 后续我们可以通过`monaco`和`textModel`修改编辑器的语言、代码、状态等等，这里列举一些我在Ebook Code中用到的方法： ```ts let lang = 'css' monaco.editor.setModelLanguage(textModel, lang) // 设置语言 let code = 'console.log("hello world!")' textModel.setValue(code) // 设置代码 code = textModel.getValue()// 获取当前编辑器里的代码 // 获取编辑器实例，注意，这个editor不等同于monaco.editor // getEditors()会返回所有通过monaco.editor.create创建的编辑器实例构成的数组 // 上面我们只创建了一个实例，所以取[0]即可 let editor = monaco.editor.getEditors()[0] let pst = eidtor.getScrollTop() // 获取滚动条的位置 editor.setScrollTop(pst) // 滚动到指定位置 let lnum = 10 editor.revealLineNearTop(lnum) // 滚动到指定的代码行 editor.updateOptions({ fontSize: 18 }) // 设置字体大小 // 监听代码发生变动 textModel.onDidChangeContent(e => { console.log("代码发生变动") }) // 监听语言发生变动 textModel.onDidChangeLanguage(e => { console.log("语言发生变动") }) ``` ## 给Monaco设置代码高亮、主题颜色设置主题颜色我用的是[@shikijs/monaco](https://shiki.style/packages/monaco)，它提供了40多种主题。 ![eb08.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfa65cb70d124ed8a8c17fb8ace10eec~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1403&h=856&s=930954&e=gif&f=55&b=021727) 首先获取shiki提供的全部主题。 `src/editor/shiki.ts` ```ts import type { LanguageRegistration, ThemeRegistrationRaw } from 'shiki/core' import { getHighlighterCore } from 'shiki/core' import getWasmInlined from 'shiki/wasm' // 根据我的测试，这三个主题目前版本会报错，只能排除掉。 const NOT_SUPPORTED_THEMES = [ 'github-dark-default', 'github-dark-dimmed','vesper'] // 将shiki提供的所有主题，利用vite的glob import全部导入 const themes_imorts = import.meta.glob('../../node_modules/shiki/dist/themes/*.mjs', { import: 'default' }) const langs_imports = import.meta.glob('../../node_modules/shiki/dist/langs/{css,javascript,json,html,xml}.mjs', { import: 'default' }) async function getLighter() { const langs = await Promise.all(Object.values(langs_imports).map(t => t())) const themes = await Promise.all(Object.values(themes_imorts).map(t => t())) const hightlighter = await getHighlighterCore({ langs, themes: themes.filter(t => !NOT_SUPPORTED_THEMES.includes(t.name!)), loadWasm: getWasmInlined, }) return hightlighter } export { getLighter } ``` > 由于我这是个桌面端应用，因此选择了一次性导入全部主题，但如果开发的是普通的Web项目，那还是应该考虑按需动态导入。将主题注入monaco ```html ``` 调用setTheme方法即可修改主题： ```ts monaco.editor.setTheme('night-owl') // 参数是主题名称 ``` 我写了一段脚本，用来自动获取shiki提供的主题名称： `scripts/get-themes.ts` ```ts import { basename } from 'node:path' import { writeFileSync } from 'node:fs' import fg from 'fast-glob' function get_all_themes() { const themes = fg.sync('./node_modules/shiki/dist/themes/*.mjs').map(path => basename(path, '.mjs')) writeFileSync('./src/editor/themes.ts', ` // This file is generated by 'scripts/get-themes.ts' const themes = ${JSON.stringify(themes, null, 4)} as const export type ShikiTheme = typeof themes[number] export { themes } `.trim()) } get_all_themes() ``` 使用`esno`执行脚本： ```bash npx esno scripts/gen-themes.ts ``` 输出结果保存于`src/editor/themes.ts`： ```ts // This file is generated by 'scripts/get-themes.ts' const themes = [ 'andromeeda', 'aurora-x', 'ayu-dark', 'catppuccin-frappe', 'catppuccin-latte', 'catppuccin-macchiato', 'catppuccin-mocha', 'dark-plus', 'dracula-soft', 'dracula', 'github-dark-default', 'github-dark-dimmed', 'github-dark', 'github-light-default', 'github-light', 'houston', 'light-plus', 'material-theme-darker', 'material-theme-lighter', 'material-theme-ocean', 'material-theme-palenight', 'material-theme', 'min-dark', 'min-light', 'monokai', 'night-owl', 'nord', 'one-dark-pro', 'one-light', 'poimandres', 'red', 'rose-pine-dawn', 'rose-pine-moon', 'rose-pine', 'slack-dark', 'slack-ochin', 'snazzy-light', 'solarized-dark', 'solarized-light', 'synthwave-84', 'tokyo-night', 'vesper', 'vitesse-black', 'vitesse-dark', 'vitesse-light', ] as const export type ShikiTheme = typeof themes[number] export { themes } ``` ## 汉化Monaco Editor 如果你是通过CDN方式引入Monaco，官方提供了一个本地化的方案，官方示例：[monaco-editor/samples/browser-amd-localized/index.html](https://github.com/microsoft/monaco-editor/blob/main/samples/browser-amd-localized/index.html) 但遗憾的是，我使用的是Vite，通过ESM方式导入的Monaco目前并没有官方的本地化方案。有个第三方Vite插件可以对monaco进行汉化：[vite-plugin-monaco-editor-nls](https://github.com/pearone/vite-plugin-monaco-editor-nls)，但是它已经很久没有更新，新版本的monaco用不了。于是我研究了一下它的源码，发现它的原理其实很简单，就是将汉化文本注入到monaco源码的`nls.js`文件中，目前我用的monaco版本是0.48.0，npm安装完后，我们可以在`node_modules/monaco-editor/esm/vs/nls.js`找到它，我们只需依样画葫芦，以相同的方式给其注入汉化文本即可。具体操作是—— 首先，去VS Code的语言包仓库手动下载对应的语言包:[vscode-loc/i18n/vscode-language-pack-zh-hans](https://github.com/microsoft/vscode-loc/tree/main/i18n/vscode-language-pack-zh-hans)，里面的`translations/main.i18n.json`就是我要的语言包，复制或下载到本地，我将其改名为`zh-hans.json`。 > 这里只能手动下载或者手动复制到本地，因为官方并没有将其发布到npm上。然后，参照vite-plugin-monaco-editor-nls，写一个支持最新版的Vite插件，完整代码有点长，我在这里就不贴了，可以去我Ebook Code的仓库查看：[eb-code/plugins/nls/index.ts](https://github.com/taiyuuki/eb-code/blob/main/plugins/nls/index.ts)，里面分别导出了rollup和esbuild的插件。最后在vite的设置中导入插件（这里我省略了其他Vite设置）： ```ts import nlsPlugin, { Languages, esbuildPluginMonacoEditorNls } from './nls' import zh_hans from './nls/zh-hans.json' // 注意只在生产环境下添加rollup插件，开发模式下会报错 const plugins = [] if (process.env.NODE_ENV !== 'development') { plugins.push(nlsPlugin({ locale: Languages.zh_hans, localeData: zh_hans, })) } // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': resolve('./src'), }, }, build: { sourcemap: true, }, optimizeDeps: { esbuildOptions: { plugins: [ // 开发环境下通过esbuild插件进行汉化 esbuildPluginMonacoEditorNls({ locale: Languages.zh_hans, localeData: zh_hans, }), ], }, }, plugins, }); ``` 这样就能完成汉化了 ![eb21.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81023a5c3809412c9491bbb984a7d425~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1200&h=800&s=69371&e=jpg&b=021728) ![eb22.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0bf2e69a2264e73b79df5804fa29af5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1200&h=800&s=65362&e=jpg&b=021728) 这里提供一个最简单的汉化示例：[taiyuuki/monaco-zh-sample](https://github.com/taiyuuki/monaco-zh-sample/tree/main) ## 给Monaco配置emmet实现代码提示 Monaco Editor内置的语言服务已经提供了部分代码补全功能，但是对HTML没有任何代码提示。所以我还得给其配置emmet，以达到在VS Code上类似的效果，事实上，VS Code对HTML和CSS的代码提示功能也是emmet插件提供的。给Monaco配置emmet十分简单，因为有人写了现成的库[emmet-monaco-es](https://github.com/troy351/emmet-monaco-es)： `src/editor/init.ts` ```ts import * as monaco from 'monaco-editor' import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' import typescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' import { emmetHTML, emmetCSS } from 'emmet-monaco-es' function initMonaco() { self.MonacoEnvironment = { getWorker: function(_workerId: string, label: string) { switch (label) { case 'json': return new jsonWorker({ name: label }) case 'css': return new cssWorker({ name: label }) case 'html': case 'xhtml': case 'xml': return new htmlWorker({ name: label }) case 'javascript': return new typescriptWorker({ name: label }) default: return new editorWorker({ name: label }) } }, } emmetHTML(monaco) emmetCSS(monaco) return monaco } export { initMonaco } ``` 唯一需要注意的是，emmetHTML和emmetCSS的调用需要在monaco.editor.create之前，因此这里将其放在init函数中调用。 ### html和xhtml的closing tag问题由于EPUB内部使用的文件以XHTML为主，所以当输入img、br之类的标签时，我需要它是自闭合的，例如\
，\

，但是由于emmet默认提供的html代码补全，不是自闭合的，尖括号>前没有斜杠/。虽然这不是什么严重问题，但xhtml毕竟是比html更严谨的标准，例如在sigil中，如果img标签没有自闭合是会报错的，所以还是得处理一下。原本emmet是可以通过设置让其自闭合的，但emmet-monaco-es这个库却并没有提供可配置的方式。那怎么办呢？遇到这类问题，我们通常有以下途径： 1. 寻找其他可替代的库。 2. 给仓库提feature request或pull request，请作者提供一个可配置的方式。 3. 像上面汉化插件那样，写一个Vite插件注入代码。 4. 通过pnpm patch，手动修改源码，给其打个补丁。 1是我没找到可替代的库，2也不太考虑，先不说作者会不会回应，就算愿意理你，也不是一时半会能解决的，3倒是个可行的方案，但我要改的代码总共也没几行，特意通过插件来解决感觉很没必要。所以我最终采用的是最后一种方案，我改动代码如下：[eb-code/patches/emmet-monaco-es@5.3.2.patch](https://github.com/taiyuuki/eb-code/blob/main/patches/emmet-monaco-es@5.3.2.patch) ```diff diff --git a/dist/emmet-monaco.esm.js b/dist/emmet-monaco.esm.js index 27db3ee035ab7fa3f627ee715305eea5886012fd..1699d2a9c978475ada3545fb566669612b496396 100644 --- a/dist/emmet-monaco.esm.js +++ b/dist/emmet-monaco.esm.js @@ -2341,6 +2341,7 @@ function selfClose(config) { switch (config.options['output.selfClosingStyle']) { case 'xhtml': return ' /'; case 'xml': return '/'; + case 'html': return '/'; default: return ''; } } @@ -4796,7 +4797,7 @@ const defaultOptions$1 = { 'required', 'reversed', 'selected', 'typemustmatch' ], 'output.reverseAttributes': false, - 'output.selfClosingStyle': 'html', + 'output.selfClosingStyle': 'xhtml', 'output.field': (index, placeholder) => placeholder, 'output.text': text => text, 'markup.href': true, @@ -4831,6 +4832,7 @@ const defaultConfig = { * Default per-syntax config */ const syntaxConfig = { + html: 'xhtml', markup: { snippets: parseSnippets(markupSnippets), }, @@ -6016,7 +6018,7 @@ function registerProvider(monaco, languages, syntax) { } const providers = languages.map((language) => monaco.languages.registerCompletionItemProvider(language, { triggerCharacters: LANGUAGE_MODES[MAPPED_MODES[language] || language], - provideCompletionItems: (model, position) => isValidLocationForEmmetAbbreviation(model, position, syntax, language) + provideCompletionItems: (model, position) => syntax === 'html' ? doComplete(monaco, model, position, syntax, DEFAULT_CONFIG) : undefined, })); ``` 这样一来，代码提示就完成了，且标签都是自闭合的。 ![eb23.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f8d113fceee4b9fa2cbdc0127abb19f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1130&h=735&s=189498&e=gif&f=70&b=021629)