仅通过 css 为代码添加行号 | code line number with CSS only

效果图：

完整代码：

<style>
pre > code{
	display:block;
	color:#fff;
	background:#282c34;
	
	/*
	font-size: 18px;
    line-height: 22px;

	
	border-radius:20px;
	width:80%;
	margin:0 auto;
	
	height:100%;
	overflow-y: scroll;
	*/
	
	padding:10px 20px;
	word-wrap: break-word;
    white-space: pre-wrap;
}

/* code line number
https://webtips.dev/add-line-numbers-to-html-textarea
*/
pre{counter-reset: linenumber;}
pre > code > span::before{
	content: counter(linenumber, decimal-leading-zero) " ";
	counter-increment: linenumber;
	color:#506882;
}
/*
pre > code > span{display: block;}
*/
</style>

<pre>
  <code>$ cat ./code/w.step2.FigureS22.MAIT_Tex.R
<br>
<span># This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. </span>
<span>library("Seurat")</span>
<span></span>
<span>RhpcBLASctl::omp_set_num_threads(1)</span>
<span>doParallel::registerDoParallel(cores=8)</span>
<span>options(stringsAsFactors=F)</span>
<span></span>
<span>oDir = "./OUT_FigS22"</span>
<span>dir.create(oDir, F, T)</span>
  </code>
</pre>