How to Create Syntax Highlighter with Copy Button Script for Blogger [ Hiddne Trick ]

Hello Friends! Welcome to your Hiddne Trick blog. And in today's article, you'll learn about Syntax Highlighter with Copy Button Script. Or say how you inserted a Blogger blog title with a Copy Box Copy Button.

So in this post, we will give you all the information. However, from the article to the YouTube Video Tutorial will be available online. But when it comes to live demo shows, all the videos are left behind.

Syntax Highlighter with copy button

Most friends may know the name Syntax Highlighter? So I want to tell you that the source code is made available in any blog post. And the format added to the post is known as Syntax Highlighter.

But now, in time, everything moves forward. In that case, the Normal Syntax Highlighter has now been upgraded as well. Now this time you also get to see the Syntax Highlighter with a copy button. And the advantage of this is that without selecting it, you can easily copy all the code to the Text Area Box with the click of a button.

More Article,

• How to Add Professional Sitemap Widget In Blogspot Blogs

Syntax Highlighter with Copy Button Script for Blogger

Now I have given you below this Syntax Highlighter Copy Button Script Blogger. With the help of this, you can make your blogger posts more attractive.

<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 100%;">   {----Enter You Code Here----}   </textarea>   <button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">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>   <br /><br />

Note: You must set your code {—-Enter You Code Here—-}.

Conclusion: So friends, how you liked this Syntax Highlighter article with Blogger Copy Button Script. Let us know by commenting below. And share this post with friends on social media!