如何在可编辑的div上显示每行旁边的行号

<div class="editor-container">
  <div class="line-number-container"></div>
  <div contenteditable="true" class="editable-div"></div>
</div>

.editor-container {
  position: relative;
  display: flex;
}

.line-number-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px; /* 调整宽度以适应行号的长度 */
  padding: 5px;
  font-family: monospace; /* 使用等宽字体以保持对齐 */
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
}

.editable-div {
  flex: 1;
  padding: 5px;
  font-family: monospace; /* 使用等宽字体以保持对齐 */
  border: 1px solid #ccc;
  overflow: auto;
}

const editableDiv = document.querySelector('.editable-div');
const lineNumberContainer = document.querySelector('.line-number-container');

editableDiv.addEventListener('scroll', updateLineNumbers);

function updateLineNumbers() {
  const scrollTop = editableDiv.scrollTop;
  const lineHeight = parseInt(getComputedStyle(editableDiv).lineHeight);
  const firstVisibleLine = Math.floor(scrollTop / lineHeight) + 1;
  const lastVisibleLine = firstVisibleLine + Math.floor(editableDiv.clientHeight / lineHeight) - 1;

  let lineNumbersHtml = '';
  for (let i = firstVisibleLine; i <= lastVisibleLine; i++) {
    lineNumbersHtml += `<div>${i}</div>`;
  }
  lineNumberContainer.innerHTML = lineNumbersHtml;
}