Question

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

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

$ 符号首先出现在我想要的每一行上。我设法通过这个简短的css线至少获得每个块的第一行：

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

正如我所评论的那样，在pre / code中的每一个新行之后添加美元符号。

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

https://jsfiddle.net/ruppf1n6/

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

在每行附加符号

1 个答案: