设置 <pre> 标签的样式

Question

在我的网站文档中，我有一些应该显示的代码，建议用户如何按照显示的代码更改网站的外观。我不想在这个 pre 标签内使用背景图片，但想要一些样式。就像每一行代码都应该有一个替代的背景颜色。我已经链接了灵感图片。

  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>

Answer 1

正如@Mr Lister 所说，使用渐变。

.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>

Answer 2

正如上面的评论所提到的，你将不得不使用线性渐变。由于您实际上声明了顶部和底部填充（当与您的行高不同时，将干扰文本相对于渐变的相对偏移），您将必须设置背景图像的 y 位置：

background-position: 0 14px;

...假设您的顶部填充是 14px（如您的示例中所述）。

解决方案 1：使用 `linear-gradient`

linear-gradient is actually very widely supported 在当今的现代浏览器中（>93% 无前缀，>94% 有前缀）。对于linear-gradient，假定开始和结束颜色停止点与最近的断点相同，因此您需要声明的是：

两个断点，颜色A和颜色B都在50%（中间）
将背景高度设置为行高的 2 倍

即：

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>

解决方案 2：使用 `repeating-linear-gradient`

使用 repeating-linear-gradient 与 linear-gradient 非常相似，但请记住声明所有颜色停止（不假定开始和结束停止）：

0 像素处的颜色 A（开始）
颜色 A 为 24 像素（1× 行高）
颜色 B 为 24px（1× 行高）
颜色 B 为 48px（2× 行高）

即：

background-image: repeating-linear-gradient(
    180deg,
    #eee 0px,
    #eee 24px,
    #fff 24px,
    #fff 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 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>

Answer 3

如其他人所述，您可以使用 linear gradiant

pre {
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  background-color: #2f2f2f;
  background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding: 0em 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

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

简单的方法，

$("pre").html(function (index, html) {
    return html.replace(/^(.*)$/mg, "<span class=\"line\"></span>")
});

pre {
  counter-reset: line-numbering;
  background: #2c3e50;
  padding: 12px 0px 14px 0;
  width: 600px;
  color: #ecf0f1;
  line-height: 100%;
}

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  padding-left: 8px;
  width: 1.5em;
  text-align: right;
  opacity: 0.5;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>

有行号，

$("pre").html(function(index, html) {
  return html.replace(/^(.*)$/mg, "<span class=\"line\"></span>")
});

pre {
  counter-reset: line-numbering;
  background: #2c3e50;
  font-size: 20px;
  border: 2px solid grey;
  width: 450px;
  border-left: 12px solid green;
  border-radius: 5px;
  padding: 14px;
  background-color: #2f2f2f;
  background-image: -webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: -o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image: repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding: 0em 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre .line::before {
  content: counter(line-numbering);
  counter-increment: line-numbering;
  padding-right: 1em;
  /* space after numbers */
  padding-left: 8px;
  width: 1.5em;
  text-align: right;
  opacity: 0.5;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
.header-inner {
 width: 1200px;
 margin: 0 auto;
 text-align: center;
 font-size: 24px;
 font-family: 'lato', sans-serif;
}
</pre>

设置 <pre> 标签的样式

styling a <pre> tag

html

css

pre

解决方案 1：使用 `linear-gradient`

解决方案 2：使用 `repeating-linear-gradient`

设置 <pre> 标签的样式

styling a <pre> tag

html

css

pre

解决方案 1：使用 linear-gradient

解决方案 2：使用 repeating-linear-gradient

解决方案 1：使用 `linear-gradient`

解决方案 2：使用 `repeating-linear-gradient`