Monaco-editor: Is is possible to add padding between the gutter and code?

[JKillian]

monaco-editor npm version: 0.6.1

I have monaco styled similarly to below:

Is there a way to add a few pixels of padding between the edge of the gutter and the start of the code?

I noticed I could adjust the left CSS value of .monaco-scrollable-element, but it seems that most of the widths throughout the editor are computed, and I'm worried about changing inline styles like that.

[alexdima]

There is a gap between the line numbers and the content called lineDecorations -- not the best naming :).

So lineDecorationsWidth (an editor option), which I think is 10px by default can be increased. You could add the vertical line as a CSS image background to the margin-view-overlays div or perhaps you have more awesome CSS skills :).

[JKillian]

Thanks for the answer @alexandrudima! lineDecorationsWidth is a useful option to know about. Unfortunately for my use case, however, this adds space between the line numbers and the border instead of between the border and the code.

But like you said, perhaps lineDecorationsWidth combined with some CSS trickery can fix things, will give it a shot 😄

[ldewailly]

In case it helps, this has worked for me:

.monaco-editor .view-line {
    padding-left: 5px;
}

[svoboda-jan]

I think there should be an option for padding because since everything is calculated, there is no easy way to add it via css and cover all cases.

The following code was needed to cover all (until now) known cases:

/* padding between the gutter and code */
.monaco-editor .view-line {
  padding-left: 5px;
}

/* fix cursor location */
.monaco-editor .cursor {
  margin-left: 5px;
}

/* fix highlighted text selection */
.monaco-editor .selectionHighlight {
  margin-left: 5px;
}

/* fix highlighted brackets */
.monaco-editor .bracket-match {
  margin-left: 5px;
}

/* fix multiline text selection */
.monaco-editor .cslr.selected-text {
  margin-left: 5px;
}

/* fix multiline text selection */
.monaco-editor .bottom-left-radius, .monaco-editor .top-left-radius {
  margin-left: 5px;
}

[nicolaerusan]

We're also looking for this functionality if anyone's got a solution or there's something being added to the styling options. The solution @svoboda-jan suggested doesn't seem to work in our case (the cursor ends up not being where the actual text is being inserted).

N

[userkang]

@svoboda-jan
This may be more simple

.monaco-editor .view-line,
.monaco-editor .view-overlays,
.monaco-editor .cursor {
  margin-top: 10px;
}

[PeterShaws]

This was enough in my case:

.monaco-editor .lines-content {
    padding-left: 5px;
}