Welcome to My UI. Test Link
Home
Code

How To Install Syntax Highlighter with Copy Button on Blogger Website




Friends, today's topic is how to apply Blogger Code Box With Copy to Clipboard Button because if you have a website on your blogger and there you provide any kind of html or any script code to your visitor then if we use that code normally. If you paste it there, then it does not look good.

You must have also seen some blogs where you get to see a box and in that box they provide their code but the old box which was used in blogger did not have any option of copy to clipboard whereas you have to use wordpress. There are many types of plugins available in this, with the help of which you can add Code Box With Copy to Clipboard Button in your post, which is also nice to see.

But in today's post, I am going to tell you how you can add the same type of Blogger Code Box With Copy to Clipboard Button to your blogger's website so that any of your visitors can click on the copy button. Can copy the code in 1 click.

So friends, to add Blogger Code Box With Copy to Clipboard Button, you have to follow some steps :-


1. First of all you have to log in to your blogger and go to the theme section, after that you have to open your theme's coding by clicking on edit html, after that you have to press CTL+F and you have to add  in your theme. You have to search </body> and just above it you have to paste the code given below.



<b:if cond='data:blog.pageType == "item"'> <script src='https://cdn.statically.io/gh/Aslori/file/master/highlight.min.js'></script> <script src='https://cdn.statically.io/gh/Aslori/file/master/clipboard.min.js'></script> <script type='text/javascript'> //<![CDATA[ "use strict";!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e,!0):function(e){if(!e.document)throw new Error("A window with a document is required");return o(e)}:o(e)}("undefined"!=typeof window?window:this,function(y,e){if("boolean"!=typeof o)var o=!1;function t(e){var o,m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function t(){m.loadDelay?setTimeout(n,loadDelay):n()}function n(){if(!document.querySelector(m.templateSelector)){var e=document.createElement("div");e.innerHTML=function(){for(var e=["<style>","@media print {"," .code-badge { display: none; }","}"," .dark-mode .code-badge {"," background: rgba(78,95,109,.10);"," }"," .code-badge-pre {"," position: relative;"," }"," .code-badge {"," display: flex;"," flex-direction: row;"," white-space: normal;"," background: rgba(88,101,111,.63);"," color: #333;"," font-size: 0.875em;"," opacity: 0.5;"," transition: opacity linear 0.5s;"," border-radius: 0 4px 0 4px;"," padding: 5px 8px 5px 8px;"," position: absolute;"," right: 0;"," top: 0;"," }"," .code-badge.active {"," opacity: 0.8;"," }",""," .code-badge:hover {"," opacity: .95;"," }",""," .code-badge a,"," .code-badge a:hover {"," text-decoration: none;"," }",""," .code-badge-language {"," margin-right: 10px;"," font-weight: 600;"," color: goldenrod;"," }"," .fa.text-success:{ color: limegreen !important }","</style>",'<div id="CodeBadgeTemplate" style="display:none">',' <div class="code-badge">',' <div class="code-badge-language" >{{language}}</div>',' <div id="copyy" title="Salin Code">',' <i class="{{copyIconClass}}"></i></i></a>'," </div>"," </div>","</div>"],o="",t=0;t<e.length;t++)o+=e[t]+"\n";return o}();var o=e.querySelector("style"),t=e.querySelector(m.templateSelector);document.body.appendChild(o),document.body.appendChild(t)}for(var n=document.querySelector(m.templateSelector).innerHTML,c=document.querySelectorAll("pre>code.hljs"),a=0;a<c.length;a++){var r=c[a];if(!r.querySelector(".code-badge")){for(var d="",l=0;l<r.classList.length;l++){var i=r.classList[l];if("language-"===i.substr(0,9)){d=r.classList[l].replace("language-","");break}if("lang-"===i.substr(0,5)){d=r.classList[l].replace("lang-","");break}if(!d)for(var s=0;s<r.classList.length;s++)if("hljs"!=r.classList[s]){d=r.classList[s];break}}"ps"==(d=d?d.toLowerCase():"text")?d="powershell":"cs"==d?d="csharp":"js"==d?d="javascript":"ts"==d?d="typescript":"fox"==d&&(d="foxpro");var p=n.replace("{{language}}",d).replace("{{copyIconClass}}",m.copyIconClass).trim(),u=document.createElement("div");u.innerHTML=p,u=u.querySelector(".code-badge");var g=r.parentElement;g.classList.add("code-badge-pre"),m.copyIconContent&&(u.querySelector(".code-badge-copy-icon").innerText=m.copyIconContent),g.insertBefore(u,r)}}document.querySelector(m.contentSelector).addEventListener("click",function(e){return e.srcElement.classList.contains("code-badge-copy-icon")&&(e.preventDefault(),e.cancelBubble=!0,function(e){var o=e.srcElement.parentElement.parentElement.parentElement,t=o.querySelector("pre>code"),n=t.textContent||t.innerText;m.onBeforeCodeCopied&&(n=m.onBeforeCodeCopied(n,t));var c=document.createElement("textarea");c.value=n.trim(),document.body.appendChild(c),c.style.display="block",y.document.documentMode?c.setSelectionRange(0,c.value.length):c.select();document.execCommand("copy"),document.body.removeChild(c),function(e){var o=m.copyIconClass.split(" "),t=m.checkIconClass.split(" "),n=e.querySelector(".code-badge-copy-icon");n.innerText=m.checkIconContent;for(var c=0;c<o.length;c++)n.classList.remove(o[c]);for(c=0;c<t.length;c++)n.classList.add(t[c]);setTimeout(function(){n.innerText=m.copyIconContent;for(var e=0;e<t.length;e++)n.classList.remove(t[e]);for(e=0;e<o.length;e++)n.classList.add(o[e])},2e3)}(o)}(e)),!1})}o=e,Object.assign(m,o),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",t):t()}y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()}); document.addEventListener("DOMContentLoaded", (event) => { var pres = document.querySelectorAll("pre>code"); for (var i = 0; i < pres.length; i++) { hljs.highlightBlock(pres[i]); } var options = { contentSelector: ".post-body", loadDelay:0, copyIconClass: "code-badge-copy-icon", checkIconClass: "code-badge-check-icon", onBeforeTextCopied: function(text, codeElement) { return text; } }; window.highlightJsBadge(options); }); function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.statically.io/gh/Aslori/file/master/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1,document.getElementById("btnInfo").style.display="none",document.getElementById("button-link").style.display="none"}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),d=document.getElementById("opt4"),o=document.getElementById("opt5"),u=document.getElementById("opt10"),t=t.replace(/\t/g," ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),d.checked&&(t=t.replace(/</g,"&lt;")),o.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='pre'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),d=document.getElementById("opt4"),o=document.getElementById("opt5"),u=document.getElementById("opt11"),t=t.replace(/\t/g," ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),d.checked&&(t=t.replace(/</g,"&lt;")),o.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='code'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function imgConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6"),t=t.replace(/\t/g," ");c.checked&&(t=(t=t.replace(/^/,"<i rel='img'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function videoConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7"),t=t.replace(/\t/g," ");c.checked&&(t=(t=t.replace(/^/,"<i rel='video'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function quoteConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt8"),t=t.replace(/\t/g," ");c.checked&&(t=(t=t.replace(/^/,"<b rel='quote'>")).replace(/$/,"</b>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}; var clipboard = new Clipboard(".button-link"); clipboard.on("success", function (o) { console.log(o), document.getElementById("btnInfo") .style.display = "block", document.getElementById("codes") .value = "" }), clipboard.on("error", function (o) { console.log(o) }); //]]> </script> </b:if>




2. After this you have to search ]]></b:skin> or <b:skin><![CDATA[ and just above it you have to pest the code given below.



<b:if cond='data:blog.pageType == "item"'> <style> /* Sytax Highlighter */ .hljs,.hljs-subst,.hljs-tag{color:#eaebec}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f15a5a}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e} article.post pre code:hover::-webkit-scrollbar-thumb {display:block} article.post pre code::-webkit-scrollbar-thumb {display:none;background-color:rgba(65,72,67,.53)} mark{padding:1px 6px;border-radius:2px;font-family:'Fira Mono', monospace;font-size: 15px} code mark{font-size: 13px;margin: 2px;display: inline-block;} pre code mark{margin:0;padding:0;border-radius:2px} mark .hljs, mark .hljs-subst, mark .hljs-tag, mark .hljs-addition, mark.hljs-built_in, mark .hljs-builtin-name, mark .hljs-selector-attr, mark .hljs-selector-id, mark .hljs-selector-pseudo, mark .hljs-string, mark .hljs-attr, mark .hljs-template-variable, mark .hljs-type, .hljs-variable, mark .hljs-attribute,mark .hljs-symbol,mark .hljs-bullet,mark .hljs-link,mark .hljs-literal,mark .hljs-number,mark .hljs-quote,mark .hljs-regexp{color:#000} .code-badge-copy-icon { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect height='13' rx='2' ry='2' width='13' x='9' y='9' fill='none' stroke='%23c6c9ce' stroke-width='1.6'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1' fill='none' stroke='%23c6c9ce' stroke-width='1.6'%3E%3C/path%3E%3C/svg%3E");background-size: 55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px;} .code-badge > .code-badge-check-icon { background: green; } .code-badge-check-icon { cursor: pointer; padding: 0 7px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4='); background-size: 100% 100%; } div#copyy i.code-badge-copy-icon:before {content:'Copy Code';font-style:normal;position:absolute;display:block;top:-20px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;visibility:hidden;opacity:0;transition:all .2s ease} div#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px} div#copyy i.code-badge-copy-icon:after{content:'';position:absolute;top:0;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;opacity:0;visibility:hidden;transition:all .2s ease} div#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px} div#copyy i.code-badge-check-icon:before {content:'Code Copied!';font-style:normal;position:absolute;display:block;top:-33px;width:max-content;background:rgba(0,0,0,.57);color:#fff;border-radius:3px;right:0;padding:2px 6px;transition:all .2s ease} div#copyy i.code-badge-check-icon:after{content:'';position:absolute;top:-9.8px;right:13px;border-left:solid transparent 4px;border-right:solid transparent 4px;border-top:solid rgba(0,0,0,.57) 4px;transition:all .2s ease} .dark-mode div#copyy i.code-badge-copy-icon:before, .dark-mode div#copyy i.code-badge-check-icon:before{background:rgba(255,255,255,.06)} .dark-mode div#copyy i.code-badge-copy-icon:after, .dark-mode div#copyy i.code-badge-check-icon:after{border-top:solid rgba(255,255,255,.06) 4px} .Blog pre{font-size:13px;position:relative;width:100%;background-color:#262a2d;color:rgba(255,255,255,.9);border-radius:4px;margin:25px auto;-moz-tpab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-family: 'Fira Mono', monospace;line-height:1.5em} .Blog pre code{display:block;padding:20px;white-space:pre;font-family: 'Fira Mono', monospace;overflow-x:auto;} .Blog pre span.block{color:#fff;background:#3a7bd5} @media screen and (min-width:768px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.45)}} </style> </b:if>



3. Now you have to save your theme and come back to your blogger's dashboard.

4. Now after this you have to open your post in which you want to add this Blogger Code Box With Copy to Clipboard Button and you have to open your post in html view and where you want to provide your code There you have to paste the code given below.



<pre><code class="html"> <!-- Enter all HTML code here --> </code></pre> <pre><code class="css"> <!-- Enter all CSS code here --> </code></pre> <pre><code class="javascript"> <!-- Enter all Javascript code here --> </code></pre>



5. Now in this code where Paste Your Code this area only is written, instead you have to paste your code which you want to provide in your post, after that you have to publish your post, friends, we have done our The box has been added to your post.

All Done......

Post a Comment