styling a <pre> tag

html css pre

16,809

Solution 1

As @Mr Lister said, use gradients.

.my-pre{
  line-height:1.2em;
  background:linear-gradient(180deg,#ccc 0,#ccc 1.2em,#eee 0);
  background-size:2.4em 2.4em;
  background-origin:content-box;
  
  /* some extra styles*/
  padding:0 20px;
  text-align:justify;
  font-family:calibri,arial,sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<pre class="my-pre">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Voluptate ab pariatur assumenda ipsum exercitationem tempore
  architecto, adipisci, id nihil culpa molestias rerum, dolore alias?
  Fugit eos doloribus dolore, expedita officiis.
</pre>
</body>
</html>

Solution 2

As the comments above have mentioned, you will have to use a linear gradient. Since you actually have a top and bottom padding declared (which, when different from your line-height, will interfere with the relative offset of text against the gradient), you will have to set the y position of the background-image:

background-position: 0 14px;

...assuming that your top-padding is 14px (as stated in your example).

Solution 1: Using `linear-gradient`

linear-gradient is actually very widely supported among modern browsers today (>93% unprefixed, >94% prefixed). For linear-gradient, the start and end color stops are assumed to be the same as the closest breakpoint, so all you need to declare is:

Two breakpoints, color A and color B both at 50% (middle)
Set your background height to 2× the line-height

i.e.:

background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
background-size: 100% 48px;

pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  
  /* Fixed line height */
  line-height: 24px;
  
  /* Use linear-gradient for background image */
  background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
  
  /* Size background so that the height is 2x line-height */
  background-size: 100% 48px;
  
  /* Offset the background along the y-axis by top padding */
  background-position: 0 14px;
}

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

Solution 2: Using `repeating-linear-gradient`

Using repeating-linear-gradient is very similar to linear-gradient, but remember to declare all color stops (the start and end stops are not assumed):

color A at 0px (start)
color A at 24px (1× line-height)
color B at 24px (1× line-height)
color B at 48px (2× line-height)

i.e.:

background-image: repeating-linear-gradient(
    180deg,
    #eee 0px,
    #eee 24px,
    #fff 24px,
    #fff 48px);

Here is an example:

pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  
  /* Fixed line height */
  line-height: 24px;
  
  /* Use repeating-linear-gradient for background image */
  background-image: repeating-linear-gradient(
      180deg,
      #eee 0px,
      #eee 24px,
      #fff 24px,
      #fff 48px);

  /* Offset the background along the y-axis by top padding */
  background-position: 0 14px;
}

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

16,809

Author by

Mohammed Wahed Khan

Student. Don't Stop when you're tired, Stop when you are Done.

Updated on August 03, 2022

Comments

Mohammed Wahed Khan almost 2 years
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>
```
- Mr Lister almost 7 years
  
  Fix the line-height to a specific number of pixels, then create a repeating-linear-gradient for the background.
jww about 6 years

#2f2f2f is so dark you can't see the text... Try Run code snippet.