monaco-editor/react 自定义高亮

iimo2025-03-11 17:09

前言

最近需要用 monaco-editor/react 自定义高亮日志信息，记录一下。

这是日志开始的样子，比较丑

这是日志改造后的样子

步骤

贴一下相关代码

html 复制代码

<Editor
   loading={loading}
   value={logList.join('\n')}
   height="500px"
   onMount={handleEditorDidMount} // 加上初始化
   options={{
     minimap: { enabled: false },
     scrollBeyondLastLine: false,
     automaticLayout: true,
     readOnly: true,
     padding: { top: 10, bottom: 20 },
     wordWrap: 'on',
   }}
/>

加上初始化以后，只需要简单再写个初始化函数即可

js 复制代码

// 编辑器初始化时设置高亮
  const handleEditorDidMount = (editorInstance: any, monaco: any) => {
    setEditor(editorInstance);

    // 注册新语言
    monaco.languages.register({ id: 'log-language' });

    // 定义标记提供者
    monaco.languages.setMonarchTokensProvider('log-language', {
      tokenizer: {
        root: [
          // 匹配时间戳格式 [YYYY-MM-DD HH:MM:SS]
          [/\[\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\]/, 'timestamp'],
          // 匹配INFO, ERROR, WARNING等日志级别
          [/\b(INFO|ERROR|WARNING|DEBUG)\b/, 'loglevel'],
        ],
      },
    });

    // 设置主题
    monaco.editor.defineTheme('log-theme', {
      base: 'vs-dark',
      inherit: true,
      rules: [
        { token: 'timestamp', foreground: '#a0cded', fontStyle: 'bold' },
        { token: 'loglevel', foreground: '#00a700' },
      ],
      colors: {},
    });

    // 应用主题和语言
    monaco.editor.setTheme('log-theme');
    editorInstance.getModel().setLanguage('log-language');
  };

需要什么规则，先将其正则匹配出来并标记为 tokenizer，然后样式直接往 rules 里塞就行。