如何在CodeMirror 6中扩展@codemirror/theme-one-dark主题并增大字体？

方案一：CSS全局覆盖 #

直接通过自定义CSS调整编辑器字体大小，适合快速全局修改：

/* 调整所有CodeMirror编辑器的字体大小 */
.cm-editor {
  font-size: 16px; /* 根据需求修改数值，比如18px */
}

/* 仅针对特定编辑器调整（给编辑器容器添加自定义类后使用） */
.my-specific-editor .cm-editor {
  font-size: 16px;
}

如果遇到样式优先级冲突，可临时添加!important（优先通过更精准的CSS选择器解决，尽量少用!important）。

方案二：通过CodeMirror主题扩展API实现（推荐） #

利用CodeMirror 6的主题扩展机制，在原有One Dark主题基础上追加自定义样式，更符合框架设计规范：

import { oneDark } from "@codemirror/theme-one-dark";
import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";

// 创建仅包含字体大小设置的自定义主题扩展
const customFontTheme = EditorView.theme({
  "&": {
    fontSize: "16px" // 设置目标字体大小
  }
}, { dark: true }); // 匹配One Dark的深色主题属性

// 初始化编辑器时，同时加载One Dark主题和自定义扩展
const editorView = new EditorView({
  state: EditorState.create({
    extensions: [
      oneDark,
      customFontTheme,
      // 其他必要扩展（如基础编辑功能、语言支持等）
    ]
  }),
  parent: document.getElementById("editor-container")
});

内容的提问来源于stack exchange，提问作者atomkirk