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

Question

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

我想做两件事。

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

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

我担心如果代码中有</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>

​