Hi everybody, welcome to TechandFunZone in this post I will show you How to install syntax highlighter with copy button.
Syntax Highlighter is a text editor that highlights writing markup code on a web page aimed at making it easier for visitors to recognize the whole code, be it from the color code or the structure and font. '
We can implement the syntax highlighter on website pages, online forums, and blogs and are widely used to make it easier for visitors to markup CSS, HTML, Javascript, and other programming languages. In general, this highlighter syntax can make letters into many color variants depending on the markup code. but in this tutorial, we will only create one color and only use CSS. if you want to install it please follow the tutorial below.
What Is Syntax Highlighter
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 copying 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. So They Can copy the code in 1 click.
There are many ways on how to create syntax highlighter in blogger website. One of them is like the tutorial below. If you want to follow this tutorial, it will look like the following screenshot:
Follow These Steps To Add Syntax Highlighter to your Blogger Website:
Tips
It should be noted that if you have previously installed Syntax Highlinter or have already coded CSS .post-body preand .post-body pre code, please delete them first so they don't clash.
1. How To Add Syntax Highlighter JavaScript Code in Blogger Website —
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> Tag 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,"&")),l.checked&&(t=t.replace(/'/g,"'")),n.checked&&(t=t.replace(/"/g,""")),d.checked&&(t=t.replace(/</g,"<")),o.checked&&(t=t.replace(/>/g,">")),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,"&")),l.checked&&(t=t.replace(/'/g,"'")),n.checked&&(t=t.replace(/"/g,""")),d.checked&&(t=t.replace(/</g,"<")),o.checked&&(t=t.replace(/>/g,">")),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. How To Add Syntax Highlighter CSS Code in Blogger Website
Again 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 </head> tag and just above it, you have to paste the code given below.
<b:if cond='data:blog.pageType == "item"'>
<style>
/* Syntax 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. How To Use Syntax Highlighter in Blogger Website
For how to apply a syntax highlighter in a blogger Website post, you just need to call it using the code <pre> and <code> like in the example below. you can use this code only in blogger posts.
<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>
Important Note👇👇
Please replace the sentence Written Enter all HTML, CSS & JavaScript Code above with Your Css, Html, Javascript or Jquery code that you want to add. Don't forget to parse the codes first before adding them. For example you can use this Parse Tool site to parse it. you can only parse Html and javascript not css.
Conclusion
So this is the tutorial of How to Install Syntax Highlighter in Blogger with Copy Button. I hope this will be helpful for you guyzz. This Tutorial is working properly in all Blogger Theme. If you face any problem and error you can put up your comment in to comment section or Contact us.
© Tech & Fun Zone