logo标签列表

为<pre>标签设置样式

htmlcsspre
6
在我的网站文档中，我有一些代码应该被显示出来，以建议用户如何通过遵循显示的代码改变网站的外观和感觉。我不想在pre标签内使用背景图像，但希望对其进行一些样式设置，例如每行代码都应具有交替的背景颜色。我已经链接了灵感图片。

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

4
将行高固定为特定像素数，然后为背景创建一个重复线性渐变。 - Mr Lister
3个回答
13

正如 @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>

9

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

background-position: 0 14px;

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

解决方案1：使用linear-gradient

在现代浏览器中，linear-gradient被广泛支持（>93%无前缀，>94%有前缀）。对于linear-gradient，起始和结束颜色停靠点被假定为最近的断点相同，因此您只需要声明：

  1. 两个断点，颜色A和颜色B均为50％（中间）
  2. 将背景高度设置为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非常类似，但需要记得声明所有颜色停止点（起始和结束点不会被默认声明）：

  1. 在0像素处（起点）设置颜色A
  2. 在24像素处（行高的1倍）设置颜色A
  3. 在24像素处（行高的1倍）设置颜色B
  4. 在48像素处（行高的2倍）设置颜色B

即：

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>

-2
如其他人所述，您可以使用 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\">$1</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\">$1</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>

1
#2f2f2f 太暗了，无法看到文本... 请尝试 运行代码片段。 - jww
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接