React Monaco Editor不突出显示语法

问题描述 投票:0回答:1

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

enter image description here

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

这是我运行摩纳哥编辑器的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']
    })
  ]
};
reactjs monaco-editor
1个回答
0
投票

您是否未能在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'],
}

© www.soinside.com 2019 - 2024. All rights reserved.