Нет подсветки синтаксиса с редактором React Monaco - PullRequest
Новая
       15

Нет подсветки синтаксиса с редактором React Monaco

1 голос
/ 22 февраля 2020

Только что установлен React Monaco Editor и, кажется, работает нормально, за исключением отсутствия подсветки синтаксиса. Я пытаюсь использовать "python" в качестве языка, но шрифт остается тем же серым цветом по умолчанию:

enter image description here

Любые идеи о том, как исправить проблему?

Вот мой код. js, где я запускаю Monaco Editor: 

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

Ответы [ 2 ]

1 голос
/ 25 февраля 2020

Не удалось настроить CSS для Monaco Editor в Webpack? Возможно, это проблема, поскольку все остальное выглядит хорошо. 


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

{
  test: /\.css$/,
  include: MONACO_DIR,
  use: ['style-loader', 'css-loader'],
}
0 голосов
/ 22 апреля 2020

Если вы используете редактор Monaco с create-react-app, вам понадобится другой подход, если вы не хотите извлекать приложение (чтобы разрешить ручное редактирование файла конфигурации веб-пакета). Этот абзац описывает его довольно хорошо:

Самый простой способ использовать реактив-монако-редактор с create-реагировать-приложение - это использовать проект реагировать-приложение-перемонтированный. Для его настройки необходимо выполнить следующие шаги:

  • Установить response-app-rewired: npm установить -D activ-app-rewired
  • Заменить реагирующие сценарии на реагирование -app-rewired в разделе скриптов ваших пакетов. json
  • Создайте переопределения конфигурации. js в каталоге root вашего проекта со следующим содержимым: 
require('monaco-editor-webpack-plugin');

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

Для получения дополнительной информации ознакомьтесь с документацией о реактивном приложении-rewired здесь .

Мне не нужно было указывать что-либо еще, чтобы это работало. Нет необходимости указывать загрузчики для веб-пакета вручную.

...