刚刚安装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']
})
]
};
您是否未能在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'],
}