javascript - 将内容添加到每一行的开头，就像::before 对第一行所做的那样

Question

我正在尝试设计我的 <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 方法。

Answer 1

这是一个纯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 作为字符串，拆分 字符串为行数组，过滤 空行并通过将每一行包装在一个 span 中来加入这些行。