关于reactjs：React Monaco Editor不会突出显示语法


No syntax highlighting with React Monaco Editor

仅安装了React Monaco Editor，除了没有突出显示语法外，它似乎运行正常。我正在尝试使用" python"作为语言，但是字体保持相同的默认灰色：

enter image description here

关于如何解决此问题的任何想法？

这是我运行摩纳哥编辑器的Code.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from"react";
import MonacoEditor from"react-monaco-editor";

class Code extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: 'print("Hello, World!")'
    };
  }
  editorDidMount(editor, monaco) {
    console.log("editorDidMount", editor);
    editor.focus();
  }
  onChange(newValue, e) {
    console.log("onChange", newValue, e);
  }
  render() {
    const code = this.state.code;
    const options = {
      selectOnLineNumbers: true,
      fontSize: 18,
      colorDecorators: true
    };
    return (
      <MonacoEditor
        width="800"
        height="600"
        language="python"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={this.onChange}
        editorDidMount={this.editorDidMount}
      />
    );
  }
}

export default Code;

我也将此代码添加到webpack.config.js的顶部：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['python']
    })
  ]
};

const APP_DIR = path.resolve(__dirname, './src');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

module.exports = {
  test: /\\.css$/,
  include: APP_DIR,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      namedExport: true,
    },
  }],
}, {
  test: /\\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}

如果您将Monaco编辑器与create-react-app结合使用，并且不想退出该应用程序(允许手动编辑webpack配置文件)，则将需要另一种方法。本段对其进行了很好的描述：

The easiest way to use the react-monaco-editor with create-react-app is to use the react-app-rewired project. For setting it up, the following steps are required:

  • Install react-app-rewired: npm install -D react-app-rewired
  • Replace react-scripts by react-app-rewired in the scripts section of your packages.json
  • Create a config-overrides.js in the root directory of your project with the following content:
1
2
3
4
5
6
7
8
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {  
    config.plugins.push(new MonacoWebpackPlugin({
        languages: ['json']
    }));
    return config;
}

For more information checkout the documentation of react-app-rewired
here.

我无需指定其他任何内容即可使其正常运行。无需手动为webpack指定加载程序。

对我来说，以上两个答案均不起作用-不确定它是否与Codesandbox有关，或者我做错了。

但是使用@ monaco-editor / react可以对CRA设置进行任何更改。

用法上的唯一区别是默认导出不是受控组件-因此onchange无法正常工作。

要具有受控组件，只需使用import {ControlledEditor as MonacoEditor} from"@monaco-editor/react"。 onchange处理程序需要稍微修改，首先是事件

相关讨论

您是否无法在Webpack中为Monaco编辑器配置CSS？也许这是一个问题，因为其他一切看起来都很好。

1
2
3
4
5
6
7
8
const path = require('path');
const MONACO_DIR = path.resolve(__dirname, './node_modules/monaco-editor');

{
  test: /\\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}
相关讨论