Assign line numbers to code blocks

/**
 * コードブロックに行番号
 */

.code-line {
  counter-increment: linenumber
}

.code-line::before {
  content: counter(linenumber);
  display: inline-block;
  color: #ccc;
  text-align: left;
  width: 30px;
  padding: 0 5px 0 0
}

.code-line:nth-child(even) {
    background-color: #E8E9F2;
    width: 100%;
    display: inline-block;
}

<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>

/**
 * コードブロックに行番号
 */

var codeBlocks = document.getElementsByClassName( 'code' );
[].forEach.call( codeBlocks, function( e )
{
    if ( !/lang/.test( e.className ) )
    {
        return;
    }
    var lines = e.innerHTML.split( /\n/ );
    var codeBlock = "";
    lines.forEach( function( line )
    {
        if ( line != "" )
        {
            codeBlock += '\n<span class="code-line">' + line + '</span>'
        }
    } )
    e.innerHTML = codeBlock;
} );