如何更改CodeMirror编辑器的字体

Question

我试图改变CodeMirror编辑器的字体和字号。我尝试通过设置相应的CSS属性来进行更改，但似乎对我不起作用。

我想改变CodeMirror编辑器的字体和字号。我尝试通过设置相应的CSS属性来进行更改，但似乎对我不起作用:

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

我是否需要导入某些内容才能实现这个目标，或者我是否需要直接编辑库中的CSS文件？我做错了什么吗？

- nullmn

Answer 1

尝试在此设置CSS：

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

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

- user9019817

---

非常感谢！这对我来说解决了问题。 - nullmn

我会尽快将其标记为答案。 - nullmn

有没有一种方法可以从文本区域继承类或样式？ - Gagich

字体族没有改变 - Daniel.V

我知道我来晚了，但是我使用的版本需要通配符：.CodeMirror * { ... } - shuckster

Answer 2

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

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

- shuckster

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();

- Ondrej Kvasnovsky