2020-06-06 1540

The first version works! I'm still rather new to React so this version is just written in vanilla.js. The js is pretty simple, which makes me curious why you don't see this implemented more frequently. But I'm also guessing there is a cleaner way that doesn't rely on line-height.

Next, it porting it to React 🤞🏻, but you can play with the vanilla.js version on Glitch.

function countLines() {
  var codeBlock = document.getElementById("content");
  var divHeight = codeBlock.offsetHeight;
  var lineHeight = parseInt(codeBlock.style.lineHeight);
  var lines = divHeight / lineHeight;

  console.log(lines);
  for (var i = 1; i < lines; i++) {
    const lineNumber = document.createElement("p");
    lineNumber.classList.add("numbers");
    lineNumber.innerText = i + ".";

    const lineNumbersDiv = document.getElementById("linenumbers");
    lineNumbersDiv.insertAdjacentElement("beforeend", lineNumber);
  }
}