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

add-line-numbers-to-code.js

/**
 * Adds line numbers to code blocks on the page.
 */
function addLineNumbersToCode () {
  // Select all <pre><code> elements on the page
  document.querySelectorAll('pre code')
    .forEach(container => {
      // Get code lines
      const lines = container.innerHTML.split('\n')

      // Skip containers with only one line
      if (lines.length <= 1) {
        return
      }
  
      // Add line numbers to each line of code
      let newCode = lines
        .map((line, i) => `<span class='line-number'>${ i + 1 }</span>${ line }`)
        .join('\n')
        
      // Update the container with the new code
      container.innerHTML = newCode;
    })
}

// Call the addLinesToCode function when the window finishes loading
window.addEventListener('load', addLinesToCode)

Thank You. Very Helpful.