在摩纳哥编辑区添加填充（行内容）

Question

如何在摩纳哥编辑器中向代码区域添加填充？我浏览了编辑器构建选项，但无法找到任何相关内容。

我尝试调整行内容，边距，编辑器可滚动等css​​。似乎不正确的方法因为调整它们会导致游标位置的疯狂行为。

Answer 1

TL; DR ：通过选项lineNumbers:(ln)=>'<span style="padding-rigth:4px">'+ln+'</span>'在行号中添加一些填充。

通过CSS你非常接近，尝试在背景中添加一个边距：

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

这将适用于所有编辑。如果您希望将其用于特定实例，请先向此类编辑器添加extra className并相应地编辑以前的样式。这不会影响光标，但它与内容小部件和其他功能有关。

有两种方法可以将行号与文本分开：（1）启用代码折叠（folding:true），这样可以在行号和行文本之间创建一个很好的分隔; （2）使用自定义lineNumbers渲染器：

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

如果您真的想要填充，请使用lineNumbersMinChars增加可用空间，因为行号溢出了该行的文本。