How to add space in a code area using HTML CSS

Question

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.

I want to add spaces in the code area like shown below. The space between different lines is to make code friendly to users.
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>

Lalji Tadhani · Accepted Answer · 2022-02-07 13:07:20Z

1

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>

answered Feb 7, 2022 at 13:07

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samjunior · Accepted Answer · 2022-02-07 13:20:25Z

1

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

answered Feb 7, 2022 at 13:20

Samjunior

7431 gold badge6 silver badges15 bronze badges

1 Comment

Samjunior Over a year ago

It has functionality like Copy To Clipboard prismjs.com/plugins/copy-to-clipboard

Collectives™ on Stack Overflow

How to add space in a code area using HTML CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related