Change inlay hints style in monaco editor

user_9906694 0
Viewed 402

I registered an inlay hint provider which is added in monaco editor 0.26, and I want to make the style of it consistent with other editors. But I can't change anything other than font size and font family of them. I can add some new CSS rules but class name is machine generated and cryptic so it is probably not the intended way.

What is the best way to change style of inlay hints? I precisely want to remove padding, remove background color, and change the foreground color.

Edit: I found that changing foreground and background color of inlay hints is possible via a theme like this:

monaco.editor.defineTheme('myTheme', {
    base: 'vs',
    inherit: true,
    rules: [],
    colors: {
        'editorInlayHint.foreground': '#00FF00',
        'editorInlayHint.background': '#FF00FF',
    }
});

But still I can't remove the padding of inlay hints: padding in inlay hints

How I can change/remove this padding? I guess these are added for the round corners. Because I removed the background color of inlay hints, I don't really need rounded corners.

monaco-editor css
1 Answers

To change the style of the editor, you can use its API at the following address.

Monaco Editor Options

this is my editor options:

editorOptions: {
    theme: string,
    language: string,
    fontFamily: string,
    fontSize: number,
    automaticLayout: boolean,
    padding: { top: number, bottom: number }
  } | undefined;

and my custom options:


this.editorOptions = {
      theme: this.theme,
      language: langObject.monacoValue,
      // add some styles
      fontFamily: 'Operator Mono',
      fontSize: 16,
      automaticLayout: true,
      padding: {
        top: 10,
        bottom: 5
      }
    };

I use that with Angular and Typescript

user_136098780
Related