Monaco 编辑器与 Angular V18 - 自定义主题

Question

我想我错过了一些东西，但我似乎无法弄清楚，这变得令人沮丧......

我尝试做的事情：在 Angular V18 应用程序中实现 Monaco 编辑器以插入 C# 代码。没那么难，因为我在其他网站上见过很多次了。可悲的是，事实并非如此。

由于 Monaco 默认情况下没有 C# IntelliSense，我了解到有不同的方法。其中有一个语言服务器...现在没心情，所以我想添加一个自定义主题，其中包含一些在 Angular 中定义的关键字。有很多例子，但似乎没有一个在我的机器上运行。

这是我的app.module.ts：

    monaco.languages.register({ id: 'csharp' });

// Set Monarch tokenization rules for C# language
monaco.languages.setMonarchTokensProvider('csharp', {
  keywords: ['public', 'void', 'if', 'else', 'for', 'while', 'return', 'using'],
  typeKeywords: ['Console', 'string', 'int', 'bool', 'double'],
  operators: ['=', '>', '<', '!', '==', '!=', '+', '-', '*', '/', '&&', '||'],
  symbols: /[=><!~?:&|+\-*\/\^%]+/,
  tokenizer: {
    root: [
      // Match identifiers
      [/[A-Z][\w$]*/, {
        cases: {
          '@typeKeywords': 'type',    // Types like Console (green)
          '@default': 'identifier'    // Other identifiers
        }
      }],
      // Match keywords
      [/[a-zA-Z_]\w*/, {
        cases: {
          '@keywords': 'keyword',     // C# keywords (blue)
          'hello': 'helloToken',      // Custom token for "hello"
          '@default': 'identifier'    // Default identifier
        }
      }],
      // Recognize strings
      [/".*"/, 'string'],
      // Match brackets, operators, etc.
      [/[{}()\[\]]/, '@brackets'],
      [/@symbols/, { cases: { '@operators': 'operator' } }]
    ]
  }
});

export const customTheme: monaco.editor.IStandaloneThemeData = {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: '', foreground: '2A2C2D' },
    { token: 'hello', foreground: '#66ff66' },
    { token: 'string.key.json', foreground: '7b3814' },
    { token: 'string.value.json', foreground: '0F6980', fontStyle: 'bold' }
  ],
  colors: {
    'editor.background': '#ff0000',
    'editor.lineHighlightBackground': '#ff0000',
    'editorCursor.foreground': '#ff0000',
    'editor.selectionBackground': '#ff0000',
    'editor.inactiveSelectionBackground': '#ff0000',
  }
};


const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: 'assets', // configure base path for monaco editor. Starting with version 8.0.0 it defaults to './assets'. Previous releases default to '/assets'
  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used
  onMonacoLoad: () => {
    monaco.editor.defineTheme('customTheme', customTheme);
  },
  monacoRequire: (<any>window).monacoRequire,
  requireConfig: { preferScriptTags: true }
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    MonacoEditorModule.forRoot(monacoConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'monaco-test4';

  editorOptions = { theme: 'customTheme', language: 'csharp' };
  code: string = `public void x() {
    Console.WriteLine("hello world");
    hello; // This should be highlighted
  }`;
}

和app.component.html：

<div style="height: 100vh; display: flex; flex-direction: column;">
    <h1>{{ title }}</h1>
    <ngx-monaco-editor
      [options]="editorOptions"
      [(ngModel)]="code"
      style="flex: 1; margin-top: 20px;"
    ></ngx-monaco-editor>
  </div>

我尝试加载自定义主题并将“hello”一词设为绿色。但无论我做什么，它仍然是黑色的。改变其他颜色也没有多大作用。

我尝试做的事情：

• 搜索堆栈溢出
• 询问 ChatGPT（那是一场噩梦！为什么人们“喜欢”这个？？）
• 阅读不同的博客
• 对着我的笔记本电脑尖叫

我做错了什么？

Answer 1

我也有同样的问题。 你如何让“摩纳哥”来定义主题？ 似乎您需要注册主题，而不是从摩纳哥编辑器导入，但这样 ` 声明 let monaco:any;

export const monacoCustomLanguageConfig: NgxMonacoEditorConfig = {
    onMonacoLoad: monacoCustomLanguagesLoad
}

export function monacoCustomLanguagesLoad() {
    monaco.languages.register({id: ‘csharp’});
    monaco.editor.defineTheme(‘csharpTheme’, yourCSharpTheme);
    monaco.languages.setMonarchTokensProvider(‘csharp’, yourCsharpSyntaxLanguage);
}

`