Search code examples
monaco-editor

adding a padding to monaco editor area (lines content)

how can I add a padding to code area in monaco editor? I went through the editor construction options but couldn't find anything related.

I tried with tweaking css of lines-content, margin, editor-scrollable etc. It seems not the correct approach as tweaking them results in crazy behaviour of cursor position.

Solution

  • TL;DR: put some padding in the line numbers via option:

    lineNumbers: (ln) => '<span style="padding-rigth:4px">'+ln+'</span>'

    Via CSS you were quite close, try adding a margin to the background:

    .monaco-editor .lines-content.monaco-editor-background {
  margin-left: 4px;
}

    That will do it for all editors. If you want it for an instance in specific, first add an extra className to such editor and edit the previous style accordingly. This does not mess with the cursor, but it does with content widgets and other features.

    There are two ways to separate line numbers from text: (1) to enable code folding (folding:true), which creates a nice separation between line number and line text; and (2) use a custom lineNumbers renderer:

    const options = {
  lineNumbers: function(lineNumber){
        return `<span style="padding-right:4px">${lineNumber}</span>`;
  }
  // more options...
}
monaco.editor.create(anElement, options);

    If you really want to go nuts with the padding, you will need to increase its available space with lineNumbersMinChars, since the line number overflows behind the line's text.