如何通过monaco-editor-webpack-plugin使antdesignpro中的react-monaco-editor代码高亮

要通过 `monaco-editor-webpack-plugin` 实现 `antdesignpro` 中的 `react-monaco-editor` 代码高亮，可以按照以下步骤进行操作：

1. 安装 `monaco-editor-webpack-plugin`

   npm install monaco-editor-webpack-plugin --save-dev

2. 在 `webpack.config.js` 中添加 `monaco-editor-webpack-plugin` 配置

   const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

   module.exports = {
     // ...其他配置
     plugins: [
       new MonacoWebpackPlugin({
         // 语言配置
         languages: ['javascript', 'typescript', 'css', 'html', 'json'],
         // 特定模块的语言配置
         features: ['coreCommands', 'find'],
       }),
     ],
   };

3. 在 `react-monaco-editor` 中引入语言

   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
   import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
   import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
   import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
   import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
   import 'monaco-editor/esm/vs/basic-languages/json/json.contribution';

   // 在组件的 constructor 中初始化 monaco.languages
   constructor(props) {
     super(props);
     this.editorRef = React.createRef();
     monaco.languages.register({ id: 'html' });
     monaco.languages.register({ id: 'css' });
     monaco.languages.register({ id: 'javascript' });
     monaco.languages.register({ id: 'typescript' });
     monaco.languages.register({ id: 'json' });
   }

如果需要使用更多的语言，可以在 `monaco-editor-webpack-plugin` 的配置中添加对应的语言配置，并在 `react-monaco-editor` 中引入。

   // webpack.config.js
   new MonacoWebpackPlugin({
     languages: ['javascript', 'typescript', 'css', 'html', 'json', 'python'],
     features: ['coreCommands', 'find'],
   });

   // index.js
   import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
   monaco.languages.register({ id: 'python' });

4. 在 `react-monaco-editor` 中指定语言

   <MonacoEditor
     language="javascript"
     options={{ minimap: { enabled: false }, scrollBeyondLastLine: false }}
     onChange={this.handleChange}
     editorDidMount={this.handleEditorDidMount}
     value={this.state.code}
     height={this.state.height}
   />

注意，这里的 `language` 属性需要和 `monaco.languages.register` 中的 `id` 属性保持一致。

完成上述步骤后，`react-monaco-editor` 就可以正确的实现代码高亮了。