Javascript 无实例加载主题

我正在创建一个使用Monaco编辑器的web应用程序。因为已经加载了它，所以我决定也使用Monaco来突出显示静态代码块的语法

基于，我设法将语法高亮显示添加到静态代码块（添加了元素和类名）

问题是，只有在创建摩纳哥编辑器实例时，才会加载相关CSS，这发生在不同的页面上。这意味着，只有在包含摩纳哥编辑器实例的页面上，相关CSS才会工作

我使用下面的React组件添加语法高亮显示

从“摩纳哥编辑器”导入{editor}；
从“React”导入React、{ReactElement、useffect、useRef}；
接口代码块道具{
/**
*要渲染的代码。
*/
代码：字符串；
/**
*用于突出显示代码的语言。
*/
语言：字符串；
}
/**
*使用基于编辑器的语法高亮显示呈现代码块。
*/
导出默认函数CodeBlock（{code，language}:CodeBlockProps）：ReactElement{
const ref=useRef（）；
useffect（（）=>{
国际单项体育联合会（语文）{
colorizeElement（ref.current，{theme:'vs'}）；
}
}，[语文]；
返回(
{code}
);
}

---

如何在不创建编辑器实例的情况下加载CSS？

受本期报告启发：

我是这样做的：

import React from 'react';
import * as MonacoEditorApi from 'monaco-editor/esm/vs/editor/editor.api';
const { StaticServices } = require('monaco-editor/esm/vs/editor/standalone/browser/standaloneServices');
const { StandaloneThemeServiceImpl } = require('monaco-editor/esm/vs/editor/standalone/browser/standaloneThemeServiceImpl');

export const Viewer: React.FC<{ source: string }> = (props) => {
  // use a callback ref to get notified when the element has mounted
  const viewerRef = (ref: HTMLPreElement) => {
    if (ref) {
      MonacoEditorApi.editor.colorizeElement(ref, { theme: 'vs' });
      const themeService: typeof StandaloneThemeServiceImpl = StaticServices.standaloneThemeService.get();
      themeService.registerEditorContainer(ref);
    }
  };
  return (
    <pre data-lang="yaml" ref={viewerRef}>
      {props.source}
    </pre>
  );
};

从“React”导入React；
从“monaco editor/esm/vs/editor/editor.api”导入*作为MonaceditorAPI；
const{StaticServices}=require（'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'）；
const{StandaloneThemeServiceImpl}=require（'monaco-editor/esm/vs/editor/standalone/browser/StandaloneThemeServiceImpl'）；
导出常量查看器：React.FC=（道具）=>{
//当元素已装入时，使用回调引用获取通知
常量viewerRef=（ref:htmlprelement）=>{
如果（参考）{
colorizeElement（ref，{theme:'vs'}）；
const themeService:typeof StandaloneThemeServiceImpl=StaticServices.standaloneThemeService.get（）；
themeService.Registereditor容器（ref）；
}
};
返回(
{props.source}
);
};