How to set monaco's font style?

Question

I need to display the words in italic within the editor. How can I do that? I didn't find how to set this in the IStandaloneEditorConstructionOptions options when passing it to create only how to specify that with defineTheme() like that:

monaco.editor.defineTheme('placeHolderTheme', {
    base: 'vs-dark',
    inherit: false,
    rules: [
        
        { 
            token: 'my-token',
            foreground: '#311b92',
            fontStyle: 'italic' 
        },
    colors: {
        "editor.background": "#2B2B2B",
        'editor.foreground': '#FFFFFF',
    }
});

but I do need to set the whole text at once. How can do that?

Answer 1

Font styles can only be set for syntax tokens in the editor. If you want to set a style for all tokens then define a token with empty match and set it there: https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors.

monaco.editor.defineTheme('myCustomTheme', {
    base: 'vs', // can also be vs-dark or hc-black
    inherit: true, // can also be false to completely replace the builtin rules
    rules: [
        { token: '', fontStyle: 'italic' },
        { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
        { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
        { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
    ],
    colors: {
        'editor.foreground': '#000000'
    }
});