React Monaco Editor 没有语法高亮

Question

刚刚安装 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 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'],
}

Answer 1

您是否在 Webpack 中为 Monaco Editor 配置 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'],
}

解决方案

问题不在于配置，而在于配置的地方。要在你的 React CRA 样板中自定义 webpack，你必须 弹出应用程序 或者使用 customize-cra 如果你不想弹出，并且做配置。 OP here configured webpack inside node-modules/, 你配置webpack根本不对啊。使用 react-app-rewired 和 customize-cra.

Answer 2

如果您将 Monaco 编辑器与 create-react-app 一起使用，如果您不想弹出应用程序（以允许手动编辑 webpack 配置文件），则需要采用不同的方法。 This paragraph 描述得很好：

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:
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 指定加载器。

Answer 3

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

但使用 @monaco-editor/react 时无需对 CRA 设置进行任何更改。

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

要有一个受控组件，只需使用import {ControlledEditor as MonacoEditor} from "@monaco-editor/react"。 onchange 处理程序需要稍微修改，首先是事件，然后是 newText - 只是实现中的一个小差异。

用法如下所示：

import React, { useState } from "react";
import { ControlledEditor as MonacoEditor } from "@monaco-editor/react";
export const Editor = () => {
  const [code, setCode] = useState(`const greeting = () => {
    alert("Hello world");
}`);

  const options = {
    minimap: {
      enabled: false
    }
  };

  const changeHandler = (evt, newText) => {
    setCode(newText);
  };

  const editorDidMount = (editor, monaco) => {
    console.log("editorDidMount", editor);
  };

  return (
    <MonacoEditor
      width="100%"
      height="100%"
      language="javascript"
      theme="vs-dark"
      value={code}
      options={options}
      onChange={changeHandler}
      editorDidMount={editorDidMount}
    />
  );
};

options可用于修改摩纳哥编辑器。就我而言，我不想显示小地图。所有可用的选项都可以在 editor api docs

中找到

您可以在此 Codesandbox 中找到工作演示。

我发现唯一不起作用的是 undo/redo，如下面 issue 所述。没有触发更改事件，但我稍后会检查 - 现在我很满意。

React Monaco Editor 没有语法高亮

No syntax highlighting with React Monaco Editor

reactjs

monaco-editor

解决方案