将内容添加到每行的开头，例如第一行的 ::before

Add content to the beginning of every line, like ::before does for the first line

本文关键字：before 一行 添加 开头      更新时间：2023-09-26

我正在尝试设置我的<code>/<pre>标签样式，而不会阻止用户正确突出显示和复制代码。

我希望这样做的方式（见下文）仅适用于第一行，并且永远不会重复。

我确信这可以使用JavaScript来工作，但我不确定在没有大量处理的情况下做到这一点的最佳方法是什么。

body {
  font-family: sans-serif;
}
code, pre {
  background: #e5f3ff;
}
code.styled,
pre.styled {
  display: block;
  padding: 8px;
  margin: 8px 0;
  overflow-x: auto;
}
code.styled::before,
pre.styled::before {
  content: "–";
  padding-right: 8px;
}
<p>This is an example of using <code>::before</code> to add content,<br>
and still being able to highlight/copy text without copying prefix.</p>
<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

我可以达到类似效果的最佳方法是什么，但跨越每条线？如果可能的话，我正在寻找一种普通的JavaScript方法。

这是一个纯粹的JavaScript解决方案

var _pre = document.querySelector("pre.styled");
_pre.innerHTML="<span class='line'>"+(_pre.textContent.split("'n").filter(Boolean).join("</span>'n<span class='line'>"))+"</span>";
body {
  font-family: sans-serif;
}
code, pre {
  background: #e5f3ff;
}
code.styled,
pre.styled {
  display: block;
  padding: 8px;
  margin: 8px 0;
  overflow-x: auto;
}
code.styled .line::before,
pre.styled .line::before {
  content: "–";
  padding-right: 8px;
}
<p>This is an example of using <code>::before</code> to add content,<br>
and still being able to highlight/copy text without copying prefix.</p>
<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

工作原理：我们从pre中检索textContent作为字符串，将字符串split成一个行数组，filter出空行，并通过将每个行包装在span中将行重新join在一起。

如果您不想将每一行都包装在自己的标签中，您可以尝试类似于以下答案的背景图像技术：

使用 CSS 在 pre 中设置每一行的样式

http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM

更新：添加的代码示例

body {
  font-family: sans-serif;
}
code, pre {
  background: #e5f3ff;
}
code.styled,
pre.styled {
  display:block;
  font:normal 12px/22px Monaco,Monospace !important;
  color:#000;
  background-color:#e5f3ff;
  background-image: radial-gradient(circle at 50%, #333 0%, #333 10%, #e5f3ff 20%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='3' fill='green' stroke='black' stroke-weight='1' /></svg>");
  background-size: 22px 22px;
  background-repeat: repeat-y;
  padding:0em 20px;
  overflow:auto;
}
<pre class="styled">
adb wait-for-device
adb reboot-bootloader
fastboot devices
</pre>
<p>Note: You can copy the code without having to worry about the prefix.</p>

不如

使用一些javascript来用span来包装每一行并设置它们的样式：

$('pre.newline').each( function() {
  var text = $(this).text().split(''n');
  $(this).html('')
  for(var i = 0; i <  text.length; i++) {
    $(this).append( $('<span>').html( text[i] ) );
  }
  $(this).html(html)
})

并设置跨度display:block样式 

pre.newline span::before {
  content: "–";
  padding-right: 8px;
}
pre.newline span {
  display: block;
}
相关文章：