如何更改CodeMirror编辑器的字体

Question

我正在尝试更改codemirror编辑器的字体家庭和字体大小。我尝试通过根据CSS属性设置来更改它，但它似乎对我不起作用：

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

我必须导入一些东西才能实现这一目标，还是我必须直接编辑库CSS文件？我在做什么错？

Answer 1

尝试设置CSS ON：

.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

或，如果您想从javascript进行：

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