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

Question

我有一个使用 Docusaurus 2 构建的网站。

现在，我想在一个页面中嵌入一个 Monaco Editor，我将向那个 Monaco 编辑器注册一种语言。我可以在新的 React 网站中使用 react-monaco-editor、monaco-languageclient 和 vscode-languageserver 实现此目的，但我不知道如何将其添加到 Docusaurus。

首先，我将这些包添加到我的 Docusaurus 网站的 package.json，然后我尝试制作一个组件 App，以便我可以将 <App /> 添加到 Docusaurus 页面。

在组件的一个文件中，我有：

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'

有谁知道如何让它发挥作用？

Answer 1

这里的问题似乎与 CSS 无法被 webpack 加载有关。您需要通过插件为 webpack 添加 CSS 个加载程序。

您可以参考这个 Pull Request on the Hermes website 将 Monaco 编辑器添加到网站，您可以通过单击 "Playground".

来尝试编辑器

在这里使用 monaco-editor-webpack-plugin 可能更好，因为它可以帮助您添加必要的加载程序，例如您当前设置中缺少的 CSS 加载程序。

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

Embed a custom Monaco Editor in a Docusaurus website MDX

javascript

webpack

monaco-editor

docusaurus