如何更改CodeMirror编辑器的字体

Question

我正在尝试更改 CodeMirror 编辑器的字体系列和字体大小。我尝试通过设置相应的 CSS 属性来更改它，但它似乎对我不起作用：

.codemirror-textarea {
    font-family: Arial, monospace;
    font-size: 16px;
}

我是否必须导入某些内容才能实现此目的，或者我是否必须直接编辑库 CSS 文件？我做错了什么？

Answer 1

尝试将 CSS 设置为：

.CodeMirror {
font-family: Arial, monospace;
font-size: 16px;
}

这将选择包含所有格式化代码的元素。

Answer 2

为了跟进已接受的答案，我正在使用的 CodeMirror 版本（发布时为 5.55.0）需要通配符：

.CodeMirror * {
/*          ^
*/
  font-family: Arial, monospace;
  font-size: 16px;
}

Answer 3

或者添加扩展

const customTheme = EditorView.theme({
    '&': {
        font:"'JetBrains Mono', monospace",
    }
})

const startState = EditorState.create({
    doc: page.text,
    extensions: [
        customTheme,
        // ...
    ]
})

Answer 4

对于 CM6 我用过：

.cm-content {
  font-family: IosevkaSlabWEB, 'Liberation Mono', Menlo, Courier, monospace; 
}

Answer 5

或者，如果您想通过 JavaScript 执行此操作，请像这样：

editor.getWrapperElement().style["font-size"] = size+"px";
editor.refresh();