styling a <pre> tag

In my website documentation, I have some code that should be displayed like to suggest the user how they can change the look and feel of the website by following the displayed code. I don't want to use the background image inside this pre tag but want some styling for it. like every line of code should have an alternate background color. I've linked the inspiration image.

  pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
}

<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>