Javascript 在Docusaurus网站MDX中嵌入自定义编辑器

我有一个网站建立使用

现在，我想在一个页面中嵌入一种语言，我将向该编辑器注册一种语言。我可以在一个新的react网站上通过

react monaco editor

、

monaco languageclient

和

vscode languageserver

实现这一点，但我不知道如何将其添加到Docusaurus

首先，我将这些包添加到Docusaurus网站的

package.json

，然后我尝试制作一个组件

App

，以便添加

有人知道怎么做才能让它工作吗？
这里的问题似乎是关于CSS无法通过webpack加载。您需要通过插件为webpack添加CSS加载程序

您可以尝试在网站中添加摩纳哥编辑器，并点击“游乐场”尝试使用编辑器

在此处使用可能更好，因为它可以帮助您添加必要的加载程序，例如当前设置中缺少的CSS加载程序。
我不知道我们可以接受并更新投票答案。。。刚刚投了赞成票。
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";

./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'