If you write coding articles on your blog, you might use Syntax Highlighter to show code to your readers. If you want to make it easy for them to copy the code, you should read this article.
In this article, we'll show you how to add a double-click feature to copy code on any Blogger website. This will let your visitors easily copy content inside `<pre>` tags. By double-clicking on the Syntax Highlighter, they can copy the code to the clipboard without needing to select it manually.
How To Add Double Click To Copy Pre Content In Blogger Website
Important!
Before adding the code to your XML, I recommend making a backup of your current theme. This way, if any problems occur, you can easily restore it later.
#1: Log in to your Blogger Dashboard.
#2: In the Dashboard, click on "Theme."
#3: Click the down arrow next to the "Customize" button.
#4: Select "Edit HTML" to go to the editing page.
#5: Search for the code ]]></b:skin> and paste the following CSS codes just above it.
If your template has a dark mode and you want different colors for it, you can customize the code as needed. Since each template may have a different dark mode class, please adjust it by replacing the marked class with your template's dark mode class.
/* Toast Notification by EduCodeLab */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
If you are using the latest version of the Median UI, Fletro Pro, or iMagz template, you can add the following CSS just below the previous CSS.
/* Double click to copy notify text by EduCodeLab */
.pre:not(.tb):hover::before{content:'Double click to copy | </>'}
.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}
.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}
.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}
#6: Paste the following HTML right below the <body> tag. If you don't see it, it might already be parsed as <body>.
<!--[ Toast Notification by EduCodeLab ]--> <div id='toastNotif' class='tNtf'></div>
#7: Add the following JavaScript code just above the </body> tag. If you don't see it, it might already be parsed as </body>.
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ /* Pre Content Copy Script by EduCodeLab */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>
#8: Finally, save the changes by clicking on this icon.
Syntax refers to the specific way in which something, like code or language, is structured and written.
<pre><code>Your_Code_Here</code></pre>
The writing format or syntax for the latest version of Median UI, Fletro Pro, and iMagz templates refers to how you should structure and write code or instructions specifically tailored for these templates.
<div class='pre html notranslate'> <pre>Your_Code_Here</pre> </div>
You can replace the marked class name with html, css, or js according to your specific codes.
Alternative Usage
You can use toast notifications with JavaScript to alert your visitors. Here's an example of how to notify them.
<button onclick='myFunction()'>Click me</button>
<div id='toastNotif' class='tNtf'></div>
<script>
function myFunction() {
document.getElementById('toastNotif').innerHTML = '<span>Notification Here</span>';
}
</script>
No need to add <div id='toastNotif' class='tNtf'></div> again, as we have already included it below the <body> tag.
Conclusion
That's all about adding the feature to copy code on your Blogger website. I hope you found this article helpful. Feel free to share it. If you encounter any issues or have questions, please ask in the comment box. Thank you!