如何在Monaco Editor顶部添加编程语言名称并显示行号？

1. 开启代码行号 #

Monaco Editor的行号显示是内置配置，初始化编辑器时，通过IEditorOptions中的lineNumbers参数设置为"on"即可开启：

const editor = monaco.editor.create(document.getElementById('container'), {
  value: '// 示例代码',
  language: 'javascript',
  lineNumbers: 'on', // 开启行号
  // 其他配置项
});

2. 添加顶部编程语言名称 #

Monaco Editor本身没有内置该配置，需通过自定义DOM元素结合样式实现：

步骤1：调整HTML结构 #

用父容器包裹编辑器，预留语言名称标签的位置：

<div class="editor-wrapper">
  <div class="language-label">JavaScript</div>
  <div id="container"></div>
</div>

步骤2：添加样式对齐 #

通过CSS让语言标签与编辑器视觉对齐，模拟内置栏目的效果：

.editor-wrapper {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  width: 800px;
  height: 600px;
}

.language-label {
  padding: 4px 12px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

#container {
  width: 100%;
  height: calc(100% - 30px); /* 减去标签高度 */
}

步骤3：动态同步语言（可选） #

如果需要根据编辑器当前语言自动更新标签文本，可监听语言变更事件：

editor.onDidChangeLanguage(() => {
  const languageId = editor.getModel().getLanguageId();
  document.querySelector('.language-label').textContent = 
    languageId.charAt(0).toUpperCase() + languageId.slice(1);
});

这样就能实现和示例图一致的效果，同时保留行号显示功能。

内容的提问来源于stack exchange，提问作者Non404