CODEWITHSUNDEEP
javascriptcssfontscodemirror
nullmn
nullmn

Reputation: 607

How to change font for the CodeMirror editor

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?

Upvotes: 19

Views: 22138

Answers (5)

igorludi
igorludi

Reputation: 1581

For CM6 I've used:

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

Upvotes: 0

Ondrej Kvasnovsky
Ondrej Kvasnovsky

Reputation: 4643

Or, like this if you want to do it from JavaScript:

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

Upvotes: -1

Богуслав Павлишинець
Богуслав Павлишинець

Reputation: 1105

Or add an extension

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

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

Upvotes: 5

shuckster
shuckster

Reputation: 5427

Just to follow-up on the accepted answer, the version of CodeMirror I'm using (5.55.0 at the time of posting) requires a wildcard:

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

Upvotes: 14

user9019817
user9019817

Reputation:

Try setting the CSS on:

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

This selects the element that contains all the formatted code.

Upvotes: 54

Related Questions