背景
筆者開源了一個小項目code-run，類似codepen的一個工具，其中代碼編輯器使用的是微軟的Monaco Editor耕拷，這個庫是直接從VSCode的源碼中生成的种樱，只不過是做了一點修改讓它支持在瀏覽器中運行，但是功能基本是和VSCode一樣強大的腕巡，所以在筆者看來Monaco Editor等于VSCode的編輯器核心玄坦。
另外筆者是一個顏控，不管做什么項目绘沉，都熱衷于配套一些好看的皮膚煎楣、主題，所以Moncao Editor僅僅內(nèi)置了三種主題是遠遠滿足不了筆者需求的车伞，況且還都很丑择懂，于是結(jié)合Monaco Editor和VSCode的關系就很自然的想到，能不能直接復用VSCode的主題另玖，接下來就給大家介紹一下筆者的探索之路困曙。
ps.想直接了解如何實現(xiàn)的可以跳轉(zhuǎn)到【具體實現(xiàn)】小節(jié)。
基本使用
先看一下Monaco Editor的基本使用日矫，首先安裝：
npm install monaco-editor
然后引入：
import * as monaco from 'monaco-editor'
// 創(chuàng)建一個js編輯器
const editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript',
theme: 'vs'
})
這樣就可以在container元素上創(chuàng)建一個js語言的編輯器赂弓，并且使用了內(nèi)置的vs-dark主題。如果遇到報錯或者語法提示不生效哪轿，那么可能需要配置一下worker文件的路徑盈魁，可以參考官方示例browser-esm-webpack。
自定義主題
Monaco Editor支持自定義主題窃诉，方法如下：
// 定義主題
monaco.editor.defineTheme(themeName, themeData)
// 使用定義的主題
monaco.editor.setTheme(themeName)
themeName是要自定義的主題名稱杨耙，比如OneDarkPro，themeData是一個對象飘痛，即主題數(shù)據(jù)珊膜，基本結(jié)構(gòu)如下：
{
base: 'vs',// 要繼承的基礎主題，即內(nèi)置的三個：vs宣脉、vs-dark车柠、hc-black
inherit: false,// 是否繼承
rules: [// 高亮規(guī)則，即給代碼里不同token類型的代碼設置不同的顯示樣式
{ token: '', foreground: '000000', background: 'fffffe' }
],
colors: {// 非代碼部分的其他部分的顏色，比如背景竹祷、滾動條等
[editorBackground]: '#FFFFFE'
}
}
rules里面就是用來給代碼進行高亮的谈跛，常見的token有string（字符串）、comment（注釋）塑陵、keyword（關鍵詞）等等感憾，完整的請移步themes.ts，這些token是怎么確定的呢令花，Monaco Editor內(nèi)置了一個語法著色器Monarch阻桅，本質(zhì)是通過正則表達式來匹配，然后給匹配到的內(nèi)容命名為一個token兼都。
可以直接在編輯器中查看代碼某塊對應的token嫂沉，按F1或鼠標右鍵點擊Command Palette，然后再找到并點擊Developer: Inspect Tokens俯抖，接下來鼠標點哪一塊代碼输瓜，就會顯示對應的信息，包括token類型芬萍，當前應用的顏色等尤揣。
踩坑
最開始的想法很簡單，直接找到VSCode的主題文件柬祠，然后通過自定義主題來使用北戏。
獲取VSCode主題文件
有兩種方法，如果某個主題已經(jīng)在你的VSCode里安裝并正在使用的話漫蛔，那么可以按F1或Command/Control + Shift + P或鼠標右鍵點擊Command Palette/命令面板嗜愈，接著找到并點擊Developer:Generate Color Theme From Current Setting/開發(fā)人員:使用當前設置生成顏色主題，然后VSCode就會生成一份json數(shù)據(jù)莽龟，保存即可蠕嫁。
如果某個主題沒有安裝的話，那么可以去vscode主題商店搜索該主題毯盈，進入主題詳情頁面后點擊右側(cè)的Download Extension按鈕即可下載該主題剃毒，下載完成后找到剛才下載的文件，文件應該是以.vsix結(jié)尾的搂赋，直接把該后綴改成.zip赘阀，然后解壓縮，最后打開里面的/extension/themes/文件夾脑奠，里面的.json文件即主題文件基公，打開該文件復制json數(shù)據(jù)即可。
把VSCode主題轉(zhuǎn)換成Monaco Editor主題格式
上一步過后你應該可以發(fā)現(xiàn)VSCode主題的格式是這樣的：
{
"$schema": "vscode://schemas/color-theme",
"type": "dark",
"colors": {
"activityBar.background": "#282c34"
},
"tokenColors": [
{
"scope": "variable.other.generic-type.haskell",
"settings": {
"foreground": "#C678DD"
}
}宋欺，
{
"scope": [
"punctuation.section.embedded.begin.php",
"punctuation.section.embedded.end.php"
],
"settings": {
"foreground": "#BE5046"
}
}
]
}
跟Monaco Editor的主題格式有一點區(qū)別轰豆，那是不是可以寫一個轉(zhuǎn)換方法把它轉(zhuǎn)換成下面這樣呢：
{
base: 'vs',
inherit: false,
rules: [
{ token: 'variable.other.generic-type.haskell', foreground: '#C678DD' },
{ token: 'punctuation.section.embedded.begin.php', foreground: '#BE5046' },
{ token: 'punctuation.section.embedded.end.php', foreground: '#BE5046' }
],
colors: {
"activityBar.background": "#282c34"
}
}
當然可以胰伍，這也不難，但是最后當你使用這個自定義的主題后會發(fā)現(xiàn)秒咨，沒有效果喇辽，為什么呢，去Monarch看一下對應語言的解析配置后就會發(fā)現(xiàn)雨席，壓根就沒有VSCode主題里定義的這些token，有效果才奇怪吠式，那怎么辦呢陡厘，自己擴展這個解析的配置嗎，筆者最開始就是這么做的特占，寫正則表達式嘛糙置，應該也不是很難，為此是目，筆者還把Monarch文檔完整翻譯了一遍Monarch中文谤饭，但是當筆者在VSCode里看到如下效果時：
果斷放棄，這顯然是要進行語義分析才行懊纳，否則誰知道abc是個變量揉抵。
其實在VSCode里語法高亮使用的是TextMate，而在Monaco Editor里使用的是Monarch嗤疯，兩者壓根不是一個東西冤今，為什么Monaco Editor不使用TextMate，而是要開發(fā)一個新的東西呢茂缚，原因是VSCode使用的是vscode-textmate來解析TextMate語法戏罢，這個庫依賴一個Oniguruma正則表達式庫，而這個正則表達式庫是使用C語言開發(fā)的脚囊，當然不支持在瀏覽器上運行龟糕。
退而求其次
既然VSCode的主題不能直接使用，那么就只能能用多少用多少悔耘，因為Monaco Editor內(nèi)置的主題token就只有那么多讲岁，那么把它所有的token顏色換成VSCode的主題顏色不就行了嗎，雖然語義高亮沒有淮逊，但是總比默認主題好看催首。實現(xiàn)也很簡單，首先colors部分的基本可以直接使用泄鹏，而token部分可以通過上面介紹的方法Developer: Inspect Tokens在VSCode里找到對應代碼塊的顏色郎任，復制到Monaco Editor主題的對應token上即可，比如筆者轉(zhuǎn)換后的OneDarkPro的實際效果如下：
在VSCode里的效果如下：
只可粗看备籽，不要細究舶治。
這個事情也有人已經(jīng)做了分井，可以參考這個倉庫monaco-themes，里面幫你轉(zhuǎn)換了一些常見的主題霉猛，可以拿來直接使用尺锚。
新的曙光
就在筆者已經(jīng)放棄在Monaco Editor中直接使用VSCode主題的想法后，無意間發(fā)現(xiàn)codesandbox和leetcode兩個網(wǎng)站中的編輯器主題效果和VSCode中基本一致惜浅，而且可以明顯的看到在leetcode中切換主題請求的文件：
基本和VSCode主題格式是一樣的瘫辩，這就說明在Monaco Editor中使用VSCode主題是可以實現(xiàn)的，那么問題就變成了怎么實現(xiàn)坛悉。
實現(xiàn)
不得不說伐厌，這方面資料真的很少，相關文章基本沒有裸影，百度搜索結(jié)果里只有一兩個相關的鏈接挣轨，不過也足以解決問題了，相關鏈接詳見文章尾部轩猩。
主要使用的是monaco-editor-textmate這個工具（所以除了百度谷歌之外卷扮，github也是一個很重要的搜索引擎啊）均践，先安裝：
npm i monaco-editor-textmate
npm應該會同時幫你再安裝monaco-textmate晤锹、onigasm、monaco-editor這幾個包浊猾，monaco-editor自不必說抖甘，我們自己都裝了，其他兩個可以自行檢查一下葫慎，如果沒有的話需要自行安裝衔彻。
工具介紹
簡單介紹一下這幾個包。
onigasm
這個庫就是用來解決上述瀏覽器不支持C語言編寫的Oniguruma的問題偷办，解決方法是把Oniguruma編譯為WebAssembly艰额，WebAssembly是一種中間格式，可以把非js代碼編譯成.wasm格式的文件椒涯，然后瀏覽器就可以加載并運行它了柄沮，WebAssembly已經(jīng)是WEB的標準之一了，隨著時間的推移废岂，相信兼容性也不是問題祖搓。
monaco-textmate
這個庫是在VSCode使用的vscode-textmate庫的基礎上修改的， 以便讓它在瀏覽器上使用湖苞。主要作用是解析TextMate語法拯欧，這個庫依賴前面的onigasm。
monaco-editor-textmate
這個庫的主要作用是幫我們把monaco-editor和monaco-textmate關聯(lián)起來财骨，內(nèi)部首先會加載對應語言的TextMate語法文件镐作，然后調(diào)用monaco.languages.setTokensProvider方法來自定義語言的token解析器藏姐。
看一下它的使用示例：
import { loadWASM } from 'onigasm'
import { Registry } from 'monaco-textmate'
import { wireTmGrammars } from 'monaco-editor-textmate'
export async function liftOff() {
await loadWASM(`path/to/onigasm.wasm`)
const registry = new Registry({
getGrammarDefinition: async (scopeName) => {
return {
format: 'json',
content: await (await fetch(`static/grammars/css.tmGrammar.json`)).text()
}
}
})
const grammars = new Map()
grammars.set('css', 'source.css')
grammars.set('html', 'text.html.basic')
grammars.set('typescript', 'source.ts')
monaco.editor.defineTheme('vs-code-theme-converted', {});
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'html, body {',
' margin: 0;',
'}'
].join('\n'),
language: 'css',
theme: 'vs-code-theme-converted'
})
await wireTmGrammars(monaco, registry, grammars, editor)
}
具體實現(xiàn)
看完前面的使用示例后，接下來我們詳細看一下如何使用该贾。
加載onigasm
首先我們要做的是加載onigasm的wasm文件羔杨，這個文件需要首先被加載，且加載一次就可以了杨蛋，所以我們在編輯器初始化前進行加載：
import { loadWASM } from 'onigasm'
const init = async () => {
await loadWASM(`${base}/onigasm/onigasm.wasm`)
// 創(chuàng)建編輯器...
}
init()
onigasm.wasm文件可以在/node_modules/onigasm/lib/目錄下找到兜材，然后復制到項目的/public/onigasm/目錄下，這樣可以通過http進行請求六荒。
創(chuàng)建作用域映射
接下來創(chuàng)建語言id到作用域名稱的映射：
const grammars = new Map()
grammars.set('css', 'source.css')
其他語言的作用域名稱可以在各種語言的語法列表這里找到护姆，比如想知道css的作用域名稱，我們進入css目錄掏击，然后打開package.json文件，可以看到其中有一個grammars字段：
"grammars": [
{
"language": "css",
"scopeName": "source.css",
"path": "./syntaxes/css.tmLanguage.json",
"tokenTypes": {
"meta.function.url string.quoted": "other"
}
}
]
language就是語言id秩铆，scopeName就是作用域名稱砚亭。常見的如下：
const scopeNameMap = {
html: 'text.html.basic',
pug: 'text.pug',
css: 'source.css',
less: 'source.css.less',
scss: 'source.css.scss',
typescript: 'source.ts',
javascript: 'source.js',
javascriptreact: 'source.js.jsx',
coffeescript: 'source.coffee'
}
注冊語法映射
再接著注冊TextMate的語法映射關系，這樣可以通過作用域名稱來加載并創(chuàng)建對應的語法：
import {
Registry
} from 'monaco-textmate'
// 創(chuàng)建一個注冊表殴玛，可以從作用域名稱來加載對應的語法文件
const registry = new Registry({
getGrammarDefinition: async (scopeName) => {
return {
format: 'json',// 語法文件格式捅膘，有json、plist
content: await (await fetch(`${base}grammars/css.tmLanguage.json`)).text()
}
}
})
語法文件和前面的作用域名稱一樣滚粟，也是在各種語言的語法列表這里找寻仗，同樣以css語言為例，還是看它的package.json的grammars字段：
"grammars": [
{
"language": "css",
"scopeName": "source.css",
"path": "./syntaxes/css.tmLanguage.json",
"tokenTypes": {
"meta.function.url string.quoted": "other"
}
}
]
path字段就是對應的語法文件的路徑凡壤，我們把這些json文件復制到項目的/public/grammars/目錄下署尤，這樣就可以通過fetch來請求到。
定義主題
前面介紹過亚侠，Monaco Editor的主題格式和VSCode的格式是有點不一樣的曹体，所以需要進行轉(zhuǎn)換，轉(zhuǎn)換可以自己實現(xiàn)硝烂，也可以直接使用monaco-vscode-textmate-theme-converter這個工具箕别，它可以同時轉(zhuǎn)換多個本地文件：
// convertTheme.js
const converter = require('monaco-vscode-textmate-theme-converter')
const path = require('path')
const run = async () => {
try {
await converter.convertThemeFromDir(
path.resolve(__dirname, './vscodeThemes'),
path.resolve(__dirname, '../public/themes')
);
} catch (error) {
console.log(error)
}
}
run()
運行node ./convertTheme.js命令后，就會把你放在vscodeThemes目錄下所有VSCode的主題文件轉(zhuǎn)換成Monaco Editor的主題文件并輸出到public/themes目錄下滞谢，然后我們在代碼里直接通過fetch來請求主題文件并使用defineTheme方法定義主題即可：
// 請求OneDarkPro主題文件
const themeData = await (
await fetch(`${base}themes/OneDarkPro.json`)
).json()
// 定義主題
monaco.editor.defineTheme('OneDarkPro', themeData)
設置token解析器
經(jīng)過前面這些準備工作串稀，最后一步要做的是設置Monaco Editor的token解析器，默認使用的是內(nèi)置的Monarch狮杨，我們要換成TextMate的解析器母截，也就是monaco-editor-textmate做的事情：
import {
wireTmGrammars
} from 'monaco-editor-textmate'
import * as monaco from 'monaco-editor'
let editor = monaco.editor.create(document.getElementById('container'), {
value: [
'html, body {',
' margin: 0;',
'}'
].join('\n'),
language: 'css',
theme: 'OneDarkPro'
})
await wireTmGrammars(monaco, registry, grammars, editor)
問題1
上一步后應該可以看到VSCode的主題在Monaco Editor上生效了，但是多試幾次可能會發(fā)現(xiàn)偶爾會失效禾酱，原因是Monaco Editor內(nèi)置的語言是延遲加載的微酬，并且加載完后也會同樣注冊一個token解析器绘趋，所以會把我們的給覆蓋掉，詳見issue：setTokensProvider unable to override existing tokenizer颗管。
一種解決方法是去除內(nèi)置的語言陷遮，這可以使用monaco-editor-webpack-plugin。
安裝：
npm install monaco-editor-webpack-plugin -D
Vue項目配置如下：
// vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: []
})
]
}
}
languages選項用來指定要包含的語言垦江，我們直接設為空帽馋，啥也不要。
然后修改Monaco Editor的引入方式為：
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
最后需要手動注冊我們需要的語言比吭，因為所有內(nèi)置語言都被去除了嘛绽族，比如我們要使用js語言的話：
monaco.languages.register({id: 'javascript'})
這種方法雖然可以完美解決該問題，但是很大的一個副作用是語法提示不生效了衩藤，因為只有包含了內(nèi)置的html吧慢、css、typescript時才會去加載對應的worker文件赏表，沒有語法提示筆者也是無法接受的检诗，所以最后筆者使用了一種比較low的hack方式：
// 插件配置
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'less', 'pug', 'scss', 'typescript', 'coffee']
})
// 注釋掉語言注冊語句
// monaco.languages.register({id: 'javascript'})
// 當worker文件被加載了后再wire
let hasGetAllWorkUrl = false
window.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
hasGetAllWorkUrl = true
if (label === 'json') {
return './monaco/json.worker.bundle.js'
}
if (label === 'css' || label === 'scss' || label === 'less') {
return './monaco/css.worker.bundle.js'
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return './monaco/html.worker.bundle.js'
}
if (label === 'typescript' || label === 'javascript') {
return './monaco/ts.worker.bundle.js'
}
return './monaco/editor.worker.bundle.js'
},
}
// 循環(huán)檢測
let loop = () => {
if (hasGetAllWorkUrl) {
Promise.resolve().then(async () => {
await wireTmGrammars(monaco, registry, grammars, editor)
})
} else {
setTimeout(() => {
loop()
}, 100)
}
}
loop()
問題2
筆者遇到的另外一個問題是，轉(zhuǎn)換后有些主題的默認顏色并未設置瓢剿，所以都是黑色逢慌，很丑：
這個問題的解決方法是可以給主題的rules數(shù)組添加一個空的token，用來作為沒有匹配到的默認token：
{
"rules": [
{
"foreground": "#abb2bf",
"token": ""
}
]
}
foreground的色值可以取colors選項里的editor.foreground的值间狂，要手動修改每個色值比較麻煩攻泼，可以在之前的轉(zhuǎn)換主題的步驟里順便進行，會在下一個問題里一起解決鉴象。
問題3
monaco-vscode-textmate-theme-converter這個包本質(zhì)算是nodejs環(huán)境下的工具忙菠，所以想在純前端環(huán)境下使用不太方便，另外它對于非標準json格式的VSCode主題轉(zhuǎn)換時會報錯炼列，因為很多主題格式是.jsonc只搁，內(nèi)容是帶有很多注釋的，所以都需要自己先進行檢查并修改俭尖，不是很方便氢惋，基于這兩個問題，筆者fork了它的代碼稽犁，然后修改并分成了兩個包焰望，分別對應nodejs和瀏覽器環(huán)境，詳見https://github.com/wanglin2/monaco-vscode-textmate-theme-converter已亥。
所以我們可以替換掉monaco-vscode-textmate-theme-converter熊赖，改成安裝筆者的：
npm i vscode-theme-to-monaco-theme-node -D
使用方式基本是一樣的：
// 只要修改引入為筆者的包即可
const converter = require('vscode-theme-to-monaco-theme-node')
const path = require('path')
const run = async () => {
try {
await converter.convertThemeFromDir(
path.resolve(__dirname, './vscodeThemes'),
path.resolve(__dirname, '../public/themes')
);
} catch (error) {
console.log(error)
}
}
run()
現(xiàn)在就可以直接轉(zhuǎn)換.jsonc文件，而且輸出統(tǒng)一為.json文件虑椎，另外內(nèi)部會自動添加一個空的token作為沒有匹配到的默認token震鹉，效果如下：
最佳實踐
VSCode主題除了代碼主題外俱笛，一般還包含編輯器其他部分的主題，比如標題欄传趾、狀態(tài)欄迎膜、側(cè)邊欄、按鈕等等浆兰，所以我們也可以在頁面應用這些樣式磕仅，達到整個頁面的主題也能隨編輯器代碼主題一起切換的效果，這樣能讓頁面整體更加協(xié)調(diào)簸呈，具體的實現(xiàn)上榕订，我們可以使用CSS變量，先把頁面所有涉及到的顏色都定義成CSS變量蜕便，然后在切換主題時根據(jù)主題的colors選項里的指定字段來更新變量即可劫恒，具體使用哪個字段來對應頁面的哪個部分可以根據(jù)實際情況來確定，VSCode主題的所有可配置項可以在theme-color這里找到轿腺。效果如下：
總結(jié)
本文完整詳細的介紹了筆者對于Monaco Editor編輯器主題的探索兼贸，希望能給有主題定制需求的小伙伴們一點幫助，完整的代碼請參考本項目源碼：code-run吃溅。
參考鏈接
文章：monaco使用vscode相關語法高亮在瀏覽器上顯示
