How to change font for the CodeMirror editor

Question

I am trying to change font-family and font-size of my CodeMirror editor. I tried changing it by setting the according CSS attributes but it does not seem to work for me:

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

Do I have to import something in order to achieve this or might I have to edit the libraries CSS file directly? What am I doing wrong?

Answer 1

Or add an extension

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

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

Answer 2

Try setting the CSS on:

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

This selects the element that contains all the formatted code.