I'm building a widget. So users have to copy-paste a code from my website into their HTML.

I want to do 2 things.

1. I want to add spaces in the code area like shown below. The space between different lines is to make code friendly to users.

2. There will be a copy code snippet button. On clicking on it users can copy the code.

I'm worried if I have </br> in the code that will get copied along as well. Which I don't want.

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

CodePudding user response：

Use <pre> Tag

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

CodePudding user response：

Alternatively, you can use Syntax Highlighters like 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 >
        (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>