monaco-editor实现语法高亮

monaco editor如果想做语法高亮的话，需要配置language，这里介绍下相关操作。

设置语言

如果是初始化时设置语言的话，操作如下

monaco.create(el, {
...
language: 'sol',
      })

如果是动态设置语言的话

const model = editor.getModel();
monaco.editor.setModelLanguage(model, 'json');

monaco内置的语言支持

内置了支持语法高亮的语言有哪些呢，可以通过以下几个方式明确。

1. 程序中获取。

const languages = monaco.languages.getLanguages();

注意，该方式获取的语言数量也是会包含业务中自定义注册的语言的，即并不仅仅局限于内置语言。

2. 访问 https://microsoft.github.io/monaco-editor/ ，直接查看language下拉选项即可。

   

3. 直接访问npm包 monaco-editor/esm/vs/basic-languages，内置的语言都是在此注册。

注意，每个文件夹的名字并不代表着语言名字，语言名字以ID为准。

按需打包语言文件

monaco editor内置的语言支持很多，如果全量打包未免过大，因此可以按需打包语言。

1.导入monaco editor方式是

# 正确做法
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

# 错误写法
import * as monaco from 'monaco-editor';

同时webpack配置如下

new MonacoWebpackPlugin({
      filename: 'monaco_[name].worker.[contenthash].js',
      languages: ['json', 'solidity', 'sql'],
    })

注意：webpack进行语言配置后，打包发现还是全量语言时，一般是因为导入monaco的方式不对。

写在最后

到此，我们就知道如何在实际项目中配置语言从而实现语法高亮了。