Monaco editor set font size

Question

I am trying set the font size of the monaco editor by styling his surrounding div. That way is not working. So I have seen the monaco editor has an property font-size. So i tried it with this property. Unfortunately this also didn't work for me. The best way would be the way with CSS, because I am styling a few things simultaneously.

Answer 1

There is an API for setting font-size, font-family, etc, Try not to Hack in the DOM since that probably won't be compatible in the future.

In your case, try this:

var editor = monaco.editor.create(document.getElementById("container"), {
    value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
    language: "javascript",
    fontSize: "12px",
    lineNumbers: "off",
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: false,
    theme: "vs-dark",
});

Checkout the Monaco Editor Playground for Basic Editor Options and start typing properties. It will autocomplete and you will see all available configuration properties with descriptions - or alternatively go to the api docs reference. good luck

Answer 2

I'm not sure if it's possible to style the editor with CSS. However, you can use the fontSize property to change the editor's font size.

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "javascript",
    fontSize: 20
});