Adds line numbers to code blocks on the web page - version 2

add-line-numbers-to-code.js

/**
 * Adds line numbers to code blocks on the page.
 */
function addLinesToCode () {
  // Select all <pre><code> elements on the page
  document.querySelectorAll('pre code')
    .forEach(container => {
      // Get code lines
      const lines = (container.textContent.match(/\n/g)||[]).length + 1

      // Skip containers with only one line
      if (lines <= 1) {
        return
      }

      // Add class .line-numbers to parent node <pre>
      container.parentNode.classList.add('line-numbers')

      // Populate the line numbers
      let numbers = ''
      for (let i = 1; i <= lines; i++) {
        numbers += `${ i }\n`
      }

      // Create a container for line numbers
      const div = document.createElement('div')
      div.setAttribute('aria-hidden', 'true')
      div.classList.add('line-numbers-col')
      div.textContent = numbers

      // Insert the container before the code
      container.insertAdjacentElement('beforebegin', div)
    })
}