Javascript 将符号附加到每行

我试图在我的网站上制作一种代码框，我希望在每一行中首先出现一个符号。例如：

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

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

我想在每一行中首先出现的是$符号。我设法让它至少在每个块上的第一行与这个简短的css行：

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

这是HTML

cp/mnt/etc/passwd~/Desktop/crack
cp/mnt/etc/shadow~/Desktop/crack

---

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

正如我在下面的问题中所评论的，在pre/code中的每一行之后添加美元符号

注意，我已经更新了CSS选择器，您使用了错误的类名

预编码。语言终端：前{
内容:"元";；
}
cp/mnt/etc/passwd~/Desktop/crack
cp/mnt/etc/shadow~/Desktop/crack

var el=document.getElementsByTagName（'code'）[0]； el.innerHTML=el.innerHTML.replace（“\n”，“\n$”）；

---

正如我在下面的问题中所评论的，在pre/code中的每一行新行后面添加美元符号

注意，我已经更新了CSS选择器，您使用了错误的类名

预编码。语言终端：前{
内容:"元";；
}
cp/mnt/etc/passwd~/Desktop/crack
cp/mnt/etc/shadow~/Desktop/crack

var el=document.getElementsByTagName（'code'）[0]； el.innerHTML=el.innerHTML.replace（“\n”，“\n$”）；

---

处理此客户端的一个好方法是将其放入一个特殊的

标记中，并在运行时对其进行标记。然后CSS样式可以应用于每个令牌

这里唯一的标记是一行：

document.querySelectorAll（“script[type=bash]”）。forEach（ele=>{
var pre=document.createElement（“pre”），
代码=document.createElement（“代码”），
lines=ele.textContent.trim（）.split（“\n”）.map（l=>l.trim（））；
lines.forEach（l=>{
var行=document.createElement（“span”）；
行。类列表。添加（“行”）；
line.textContent=l；
代码。追加子项（行）；
});
前附加子项（代码）；
pre.classList.add（“bash”）；
ele.parentNode.replaceChild（pre，ele）；
});
.bash.line{
显示：块；
}
.bash.line：：之前{
内容：“$”；
}

cp/mnt/etc/passwd~/Desktop/crack
cp/mnt/etc/shadow~/Desktop/crack
处理此客户端的一个好方法是将其放入一个特殊的
标记中，并在运行时对其进行标记。然后CSS样式可以应用于每个令牌

这里唯一的标记是一行：


document.querySelectorAll（“script[type=bash]”）。forEach（ele=>{
var pre=document.createElement（“pre”），
代码=document.createElement（“代码”），
lines=ele.textContent.trim（）.split（“\n”）.map（l=>l.trim（））；
lines.forEach（l=>{
var行=document.createElement（“span”）；
行。类列表。添加（“行”）；
line.textContent=l；
代码。追加子项（行）；
});
前附加子项（代码）；
pre.classList.add（“bash”）；
ele.parentNode.replaceChild（pre，ele）；
});
.bash.line{
显示：块；
}
.bash.line：：之前{
内容：“$”；
}

cp/mnt/etc/passwd~/Desktop/crack
cp/mnt/etc/shadow~/Desktop/crack
CSS不能在每行之前添加字符。可能的解决方案是在第一行前面添加一个字符：在第一行前面添加一个字符，用JS替换-
\n
的其他美元，因为
\n$
CSS不能在每行前面添加一个字符。可能的解决方案是在第一行前面添加一个字符：在第一行前面添加一个字符，在第一行前面添加另一个美元，用JS替换-
\n
对于
\n$
，我必须使用当前的方法，使用标签和
在里面添加。否则这会是一个好方法，我想我真的不明白你的意思，你必须使用当前的方法。代码只是从数据源为您生成
。@Condolent所需的html结构存在-您可以通过检查嵌入代码段生成的相关元素来验证这一点。因为我使用prismjs进行语法高亮显示，我必须将它添加到您的代码中，以便它能够正确地突出显示：
code.classList.add（'language-terminal'）。但是，它现在实际上不会执行换行操作：/@Condolent如果您使用的是Prism.js，您应该只使用它们的命令行前缀。。。我必须使用当前的方法，在它里面使用标签和
。否则这会是一个好方法，我想我真的不明白你的意思，你必须使用当前的方法。代码只是从数据源为您生成
。@Condolent所需的html结构存在-您可以通过检查嵌入代码段生成的相关元素来验证这一点。因为我使用prismjs进行语法高亮显示，我必须将它添加到您的代码中，以便它能够正确地突出显示：
code.classList.add（'language-terminal'）。但是，它现在实际上不会执行换行操作：/@Condolent如果您使用的是Prism.js，您应该只使用它们的命令行前缀。。。遗憾的是，这似乎不起作用。我想我做错了什么这似乎不起作用，很遗憾。我想我做错了什么
<style>
pre code.language-terminal:before {
    content: '$ ';
}
</style>

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

<script>
var el = document.getElementsByTagName('code')[0];

el.innerHTML = el.innerHTML.replace("\n", "\n$ ");
</script>