React Monaco Editor不突出显示语法

Question

bounty到期在7天内。该问题的答案有资格获得+ 200声望赏金。StackUnderFlow正在寻找规范答案。

刚刚安装React Monaco Editor，并且似乎没有语法突出显示，但似乎正常运行。我正在尝试使用“ python”作为语言，但字体保持相同的默认灰色：

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

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

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的顶部：

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']
    })
  ]
};

Answer 1

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

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

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