javascript - 将符号附加到每一行

Question

我正在尝试在我的网站上制作一种代码框，我希望每行首先出现一个符号。示例:

$ sudo apt-get update
$ sudo apt-get install john

这是我想要在每一行中首先出现的 $ 符号。我设法用这个短的 css 行将它至少放在每个 block 的第一行:

pre code.terminal:before {
    content: '$ ';
}

这是 HTML

<pre><code class="language-terminal">cp /mnt/etc/passwd ~/Desktop/crack
cp /mnt/etc/shadow ~/Desktop/crack</code></pre>

我想我需要使用 JS 为每一行附加 $ 符号，但我不确定如何，有什么建议吗？

Answer 1

处理这个客户端的一个好方法是把它放在一个特殊的 <script> 中。在运行时对其进行标记和标记。然后可以将 CSS 样式应用于每个标记。

这里唯一的标记是一行:

document.querySelectorAll("script[type=bash]").forEach(ele => {
  var pre = document.createElement("pre"),
      code = document.createElement("code"),
      lines = ele.textContent.trim().split("\n").map(l => l.trim());
      
  lines.forEach(l => {
    var line = document.createElement("span");
    line.classList.add("line");
    line.textContent = l;
    code.appendChild(line);
  });
  
  pre.appendChild(code);
  pre.classList.add("bash");
  ele.parentNode.replaceChild(pre, ele);
});

.bash .line{
  display: block;
}

.bash .line::before{
  content: "$ ";
}

<script type="bash">
cp /mnt/etc/passwd ~/Desktop/crack
cp /mnt/etc/shadow ~/Desktop/crack
</script>