JSFiddle - React, Tailwind, and code Playground

HTML

<pre class="code">
<code>erste Zeile</code>
<code>   eingerückt</code>
<code>Einzelnes Leerzeichen in der nächsten Zeile</code>
<code> </code>
<code>komplett leere Zeile folgt</code>
<code></code>
<code>Leerzeichen am Ende: </code>
<code>&#9;und tabs vorne und hinten&#9;</code>
<code>wie sieht es mit zweistellen Zeilennummern aus?</code>
<code>elf</code>
<code>12</code>
<code>dreiundzwölfzig</code>
</pre>

CSS

pre.code {
  white-space: pre-wrap;
  margin-left: 8em;
}

pre.code:before {
  counter-reset: listing;
}

pre.code code {
  counter-increment: listing;
  text-align: left;
  float: left;
  clear: left;
  height: 1em;
}

pre.code code:nth-child(even) {
  background-color:lightgray;
  width:500px;
}

pre.code code:nth-child(odd) {
  background-color:lightgreen;
  width:500px;
}

pre.code code::before {
  content: counter(listing) ". ";
  display: inline-block;
  float: left;
  height: 1em;
  padding-left: auto;
  margin-left: auto;
  text-align: right;
  color:blue;
  width:30px;
}
pre.code code::after {
  content: "|";
  display: inline-block;
  float: left;
  height: 1em;
  padding-left: auto;
  margin-left: auto;
  text-align: right;
  color:blue;
}