如何使用HTML CSS在代码区域中添加空间

Question

我正在构建一个小部件。因此，用户必须将我网站上的代码复制粘贴到HTML中。

我想做两件事。

1. 我想在代码区域中添加空格，如下所示。不同行之间的间隔是为了使代码对用户友好。

2. 将有一个复制代码片段按钮。点击它，用户就可以复制代码。

如果代码中有</br>，我很担心它会被复制以及。我不想要。

<code>{` <!-- Start of  client code snippet --> 

<script>
(function (w, d, s, o, f, js, fjs) {
w[o] =
w[o] ||
function () {
(w[o].q = w[o].q || []).push(arguments);
};
(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
js.id = o;
js.src = f;
js.async = 1;
fjs.parentNode.insertBefore(js, fjs);
})(window, document, "script", "_hw", "./widget.js");
_hw("init", { debug: true, clientID: "abcd" });

</script>
<!-- End of client code snippet -->

`} </code>

Answer 1

使用<pre>标记

<code>
<pre>
(function (w, d, s, o, f, js, fjs) {
w[o] =
w[o] ||
function () {
(w[o].q = w[o].q || []).push(arguments);
};
(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
js.id = o;
js.src = f;
js.async = 1;
fjs.parentNode.insertBefore(js, fjs);
})(window, document, "script", "_hw", "./widget.js");
_hw("init", { debug: true, clientID: "abcd" });
</pre>
</code>

Answer 2

或者，您可以像使用prismjs一样使用Syntax Highlighters

https://prismjs.com/

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism-okaidia.min.css" rel="stylesheet" />


<pre>
<code class="language-js">
(function (w, d, s, o, f, js, fjs) {
w[o] =
w[o] ||
function () {
(w[o].q = w[o].q || []).push(arguments);
};
(js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
js.id = o;
js.src = f;
js.async = 1;
fjs.parentNode.insertBefore(js, fjs);
})(window, document, "script", "_hw", "./widget.js");
_hw("init", { debug: true, clientID: "abcd" });
</code>
</pre>