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

Question

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

我想做两件事。

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

2. 会有一个复制代码sn-p按钮。点击它，用户可以复制代码。

我担心我的代码中是否有</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

或者，您可以使用Syntax Highlighters，如prismjs

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>