Highlightjs line numbers: adding line numbers to highlightjs and style it for line color (no table)

Highlightjs-line-color-hover.css

ul.code-lines {
	list-style : decimal;
	padding    : 0;
}

li.line {
	display : block;
	padding : 0;
}

ul.code-lines li:nth-child(odd) {
	background-color : rgba(200, 200, 200, .1);
}

li.line:hover {
	background-color : rgba(200, 200, 200, .4) !important;
}

li.line i {
	width        : 30px;
	border-right : 1px solid #ddd;
	display      : inline-block;
	font-size    : 12px;
	text-align   : right;
	padding      : 0 5px 0 0;
	color        : #999;
	user-select  : none;
}

Highlightjs-line-numbers.js

function highlightjs_line_numbers() {
	var elements = jQuery( 'pre code' ).not( ':has(.code-lines)' );
	elements.each( function() {

		var wholeText = jQuery( this ).html().trim();
		var splitText = wholeText.split( '\n' );

		if ( splitText.length > 1 ) {

			var line_number = 0;

			var newHtml = '<ul class="code-lines">';
			for ( var j = 0; j < splitText.length; j ++ ) {
				line_number ++;
				newHtml += '<li class=\'line\'><i>' + line_number + '</i> ' + splitText[j] + '</li>';
			}
			newHtml += '</ul>';

			jQuery( this ).html( newHtml );
		}
	} );
}