|
| © The Web Trick | Double Click to Copy Syntax Codes |
Hello! Welcome to The Web Trick Blog.
You might have used Syntax Highlighter to deliver codes to your visitors if you post coding-related articles on your site. You must read this article if you want your visitors to be able to copy the contents of your website to their clipboard.
We'll add Double Click to Copy Pre Content to any Blogger website in this article. This will make it easier for your visitors to copy the contents of the <pre> tag. They no longer need to pick and copy the codes; they can simply double-click on the Syntax Highlighter to copy its contents to the clipboard.
How to add Double Click to Copy Syntax Highlighter Content?
Adding Double Click to Copy Syntax Highlighter Content to Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Important!Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always restore it later.
Step 1: On the Blogger Dashboard, click Themes
Step 2: Click icon on the Customize button
Step 3: Choose Edit HTML, you will be redirected to editing page.
Step 4: Next search the ]]></b:skin> code and paste the CSS code just above the ]]></b:skin> code.
If your template contains a dark mode function, and you want it to be a different colour when it's turned on, you can change the codes to suit your needs. Each template may have a different dark mode class, so please adjust accordingly. You can replace the marked class with the dark mode class from your template.
/* Toast Notification by The Web Trick */
.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}}
.drK .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
If you're using the latest version of Median UI, Fletro Pro, or the iMagz Template, you can add the following CSS immediately below the above CSS.
.pre:not(.tb):hover::before{content:'Double click to Copy'}
Step 5: Paste the following HTML code just below the <body> tag. Look for the tag usually at the bottom of the template and paste the Javascript code below right before the <body>tag.
<!--[ Toast Notification by The Web Trick ]--> <div id='toastNotif' class='tNtf'></div>
Step 6: Now add the following Javascript code just above the </body> tag.
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ /* Pre Content Copy Script by The Web Trick */ 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>
Change the part marked in the code above with the suitable text.
Step 7: Finally, Save your theme by clicking icon at the top right of HTML editor.
That's it! Your visitors can now copy the Syntax Highlighter contents by double clicking on it.
Demo
You can check out directly from here before adding the Double Click to Copy Syntax Highlighter Content to your website. Let's have a peek!
Conclusion
The purpose of this tutorial is to show you How to Add Double Click to Copy Syntax Highlighter Content to your Blogger website. I hope you find this information interesting. Please share this article with your friends and family. And if you have any questions or encounter any difficulties in any aspect, please ask them in the comment section.