向摩纳哥编辑器区域添加填充（行内容）

Question

如何在 monaco 编辑器中向代码区域添加填充？我浏览了编辑器构造选项，但找不到任何相关内容。

我尝试调整 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 来增加其可用 space，因为行号在行文本后面溢出。

向摩纳哥编辑器区域添加填充（行内容）

adding a padding to monaco editor area (lines content)

monaco-editor