Reactjs 没有语法突出显示与编辑器

刚刚安装，似乎功能正常，但没有语法突出显示。我尝试使用“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;

---

您是否未能在网页包中为Monaco Editor配置CSS？也许这就是问题所在，因为其他一切看起来都很好

const path=require（'path'）；
const monago_DIR=path.resolve（_dirname，'./node_modules/monago editor'）；
{
测试：/\.css$/,，
包括：摩纳哥，
用法：['style-loader'，'css-loader']，
}

解决方案 问题不在于配置，而在于配置的位置。

---

要在React CRA样板文件中自定义网页包，您必须弹出应用程序，或者如果不想弹出，请使用自定义CRA，然后进行配置。OP here configured webpack inside

node modules/

，这根本不适合配置您的webpack。使用

react-app-rewired

和

customize cra

如果您使用的是带有

create-react-app

的Monaco编辑器，如果您不想弹出应用程序（允许手动编辑网页包配置文件），则需要另一种方法。描述得很好：

将react编辑器与create react app一起使用的最简单方法是使用react app rewired项目。要进行设置，需要执行以下步骤：

• 重新布线安装react应用程序：npm安装-D react应用程序重新布线
• 将react脚本替换为packages.json脚本部分中重新布线的react应用程序
• 在项目的根目录中创建具有以下内容的config-overrides.js：

const MonacoWebpackPlugin=require（'monaco-editor-webpack-plugin'）；
module.exports=函数重写（配置，环境）{
config.plugins.push（新MonacoWebpackPlugin({
语言：['json']
}));
返回配置；
}

有关更多信息，请查看react应用程序重新布线的文档

---

我不需要指定任何其他东西来实现它。无需手动为网页包指定加载程序。

对我来说，上述两个答案都不起作用-不确定它是否与Codesandbox有关，或者我犯了错误

但是，使用是在不改变CRA设置的情况下进行的

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

onchange

不起作用

要拥有一个受控组件，只需从“@MonacoEditor/react”中使用

导入{ControlledEditor as monaceditor}。需要稍微修改
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}
    />
  );
};

import React，{useState}来自“React”；
从“@MonacoEditor/react”导入{ControlledEditor as MonacoEditor}；
导出常量编辑器=（）=>{
const[code，setCode]=useState（`const greeting=（）=>{
警报（“你好世界”）；
}`);
常量选项={
小地图：{
已启用：false
}
};
常量changeHandler=（evt，newText）=>{
设置代码（新文本）；
};
const EditordMount=（摩纳哥编辑）=>{
log（“editorddmount”，编辑器）；
};
返回(
);
};

选项
可用于修改编辑器。就我而言，我不想显示小地图。可以在中找到所有可用选项

你可以在这里找到工作演示

我发现唯一不起作用的是如下所述的撤销/重做。没有触发任何更改事件，但我稍后会检查这一点-目前我对此很满意。
尝试将其添加到中，但似乎没有任何效果。也没有错误。我用插入文件顶部的内容更新了上面的网页代码。我插错东西了吗？@StackUnderFlow您用的是哪个锅炉板？您确定该网页包正常工作吗？使用Create React App并从以下路径编辑webpack.config文件：/node\u modules/React scripts/config/webpack.config.js配置您的网页包完全不合适。使用react应用程序与customize-cra重新布线。这现在就很有意义了，可与重新布线+cra一起使用。谢谢使用
@monaco editor/react
在一定程度上对我有效-我没有得到突出显示。
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}
    />
  );
};