Changing the Font Size of CM6

v6
1

There is a similar thread to this, however it doesn’t solve my problem. I would like to change the font size and font family of the editor text using CM6. The solutions I can find online only apply to CM5 and below. Since I can’t hack the CSS manually, are there any editor methods for setting the styles I need?
Thanks.

2

Create a small theme that sets a font size on the wrapper or the content element, and add it to your configuration.

3

Here is such a minimal example, to get people started:

import { Extension } from "@codemirror/state";
import { EditorView } from "@codemirror/view";

const FontSizeTheme = EditorView.theme({
  $: {
    fontSize: "11pt"
  }
});

const FontSizeThemeExtension: Extension = [FontSizeTheme];
1 Like
4

I updated from 0.17.1 to 0.18.2, and it seems my Theme stopped working. Any clues?

The theme:

const Theme = EditorView.theme({
  $: {
    fontSize: "10.5pt",
    border: "1px solid #c0c0c0"
  },
  $content: {
    fontFamily: "Menlo, Monaco, Lucida Console, monospace",
    minHeight: "200px"
  },
  $gutter: {
    minHeight: "200px"
  },
  $scroller: {
    overflow: "auto",
    maxHeight: "600px"
  }
});

// Theme is used directly in the Extension list

Thanks!

5

The input format for EditorView.theme changed. See the release notes for @codemirror/view 0.18.0.

6

Thanks Marijn.

For the record, this is an updated version of the theme posted before, that works with v0.18.2:

const Theme = EditorView.theme({
  "&": {
    fontSize: "10.5pt",
    border: "1px solid #c0c0c0"
  },
  ".cm-content": {
    fontFamily: "Menlo, Monaco, Lucida Console, monospace",
    minHeight: "200px"
  },
  ".cm-gutters": {
    minHeight: "200px"
  },
  ".cm-scroller": {
    overflow: "auto",
    maxHeight: "600px"
  }
});
4 Likes
7

@larsp Thanks, but how to set the font size dynamically (e.g. based on user choice)?
It would be nice to capture Ctrl-+ and Ctrl-- for this.

8

Well, I have

            "&": {
                color: "#DDD",
                fontSize: "110%",
                fontFamily: "'Roboto Mono',Consolas,monospace"
            },

and change font size on the <body> or the editor container.
Hope it helps
mario

9

Thank you very much

10

Hi, on the same issue.
It seems like codemirror is using ‘monospace’ as its default font.
We can change by defining a custom theme like so.

export const oneDarkTheme = EditorView.theme(
  {
    ".cm-content": {
      fontFamily: "some font family",
  }

But if I use some new font on body, I can not directly inherit this font family in codemirror but have to explicitly set it. Instead what I want is to use

{
    ".cm-content": {
      fontFamily: "inherit",
  }

to inherit the body’s font. How can I achieve this?

11

".cm-scroller": {fontFamily: "inherit"} should work

1 Like
12

Thank you, it worked.

13

having the same question, how can we do that