Code box with copy button using HTML, CSS and Javascript.

Hello readers ! I am back with a new article. I have uploaded many other articles regarding many other blogging tips . You can explore them by the link given.

In this era many run the blogs regarding technology and  regarding coding. Many blogs contains  codes for different projects . The codes will be very lengthy for big projects.

If that big code is placed in the post or article the post might get very lengthy and difficult for the readers to read and understand the article 😔 . So placing the code in a block which can be scrollable would be better so that entire code can be read inside the box by scrolling inside the box.

You may like these:

• What do when contact form is not working in blogger.
• How to convert horizontal navbar (menu) into dropdown in mobile view.

If u don't understand the code here is our Youtube video.

Here is the Code.

In the below mentioned code in the code box only 20 rows will be displayed on opening and by attribute rows="20" . You can change the rows value so that the text box height(no of rows) will be increased or decreased.

HTML:

<textarea cols="100" id="htmlText" readonly="" rows="20" style="height: auto; resize: none; width: 100%;"> code here (close the textarea tag) <button id="htmlBtn" onclick="copyHTML()" style="border: 1px solid grey; cursor: pointer; font-size: 20px; padding: 5px 15px;">Copy</button> <script> function copyHTML() { const text = document.querySelector("#htmlText"); const btnText = document.querySelector("#htmlBtn"); text.select(); document.execCommand("copy"); btnText.textContent = "Copied"; setTimeout(function(){ btnText.textContent = "Copy"; }, 5000); } </script>

In the above code replace 'your code here ' with your code.

Note: Type space before starting "code here"

For the copy button a javascript must be used must be used to copy the code that will be written in the code box.

Here the button name is named as 'Copy' you can change into whatever you need. btnText.textContent = "Copied" specifies what should the the button name should be changed after you click the button(after copying the code).

Just paste both the codes in the html view of your web hosting site (blogger) and the code box is ready.

That's it your job is done!!

Note : If you want more than one code box in the same post you must change 'id' in HTML code and 'onclick','id' in the css code to any name you want. Remember to change the names wherever they are present in all the code.

Demo:

See the Pen jOqOzoQ by Baba shankar (@babashankarsn) on CodePen.

Stay tuned for many interesting articles.

Thanks for reading.