Cara membuat syntax highlighter blogger

Syntax Highlighter sangat berguna untuk menyisipkan coding ke dalam postingan blog, namun diluar sana banyak yang membagikan cara membuat nya saja.

Disini agak sedikit beda, saya akan membagikan cara membuatnya lengkap dengan fitur click to copy, jadi anda tinggal klik dua kali maka otomatis kode yang ada di dalam syntax highlighter akan tercopy.

Bagaimana sudah tidak sabar dengan tutorial ini, mari kita praktek kan.

Membuat syntax highlighter dengan fungsi click to copy di blogger

Pertama silahkan anda cari kode <body> dan letakkan kode berikut tepat di bawahnya.

<!-- pre code copy -->
<div class='copyCode' id='cpCode'/>

Selanjutnya tambahkan javascript berikut tepat di atas </body>

<b:if cond='data:view.isPost'>
<!-- PRE CODE -->    
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
//]]>
</script> 
<script>/*<![CDATA[*/ 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("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>  </b:if>

Langkah terakhir menambahkan CSS untuk mempercantik tampilan.

/* Copy Code*/.copyCode 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){.copyCode 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 .copyCode span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* Font: Source code, Fira Mono(Latin) by Google */ @font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format("woff2;"),url(https://fonts.gstatic.com/s/firamono/v14/N0bX2SlFPv1weGeLZDtQIg.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Syntax */ pre{background:#2b2b2b;color:#2f3337;direction:ltr;position:relative;overflow:hidden;margin:1.7em auto;font-family:'Fira Mono',Consolas,Monaco,Lucida Console;display:block;font-size:13px;border-radius:10px;padding:35px 5px 5px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}code{display:inline;padding:5px;font-size:13px;border-radius:3px;line-height:inherit;color:#2f3337;background:#f2f3f5;font-family:';Fira Mono',Consolas,Monaco,Lucida Console}pre code{background:none;padding:0;display:block;padding:.5em;overflow-x:auto}pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:inherit;color:#aaa;font-size:10px;padding:0 10px;z-index:2;line-height:30px}pre.html::before{content:'.html'}pre.css::before{content:'.css'}pre.js::before{content:'.js'}pre.xml::before{content:'.xml'}pre:hover::before{content:'Double click to copy | </>'}pre.html:hover::before{content:'Double click to copy | .html'}pre.css:hover::before{content:'Double click to copy | .css'}pre.js:hover::before{content:'Double click to copy | .js'}pre.xml:hover::before{content:'Double click to copy | .xml'}
/* hljs */.hljs{display:block;overflow-x:auto;padding:.5em;background:#2b2b2b;color:#d1d9e1}.hljs-comment,.hljs-quote{color:#969896;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-addition{color:#c9c}.hljs-number,.hljs-selector-attr,.hljs-selector-pseudo{color:#f99157}.hljs-string,.hljs-doctag,.hljs-regexp{color:#8abeb7}.hljs-title,.hljs-name,.hljs-section,.hljs-built_in{color:#b5bd68}.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-class .hljs-title{color:#fc6}.hljs-section,.hljs-name,.hljs-strong{font-weight:700}.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-link{color:#f99157}.hljs-deletion{color:#dc322f}.hljs-formula{background:#eee8d5}.hljs-attr,.hljs-attribute{color:#81a2be}.hljs-emphasis{font-style:italic}

Kemudian simpan tema. 

Sampai disini anda sudah berhasil membuat syntax highlighter dengan fungsi click to copy.

Format penulisan kode syntax highlighter

Untuk cara atau format penulisan agar sesuai dengan kode di atas, contohnya seperti di bawah ini.

<pre><code> KODE DISINI </code></pre>

Tambahkan class pada tag pre agar menyesuaikan dengan kode. Misalnya kode untuk css maka penulisannya seperti ini

<pre class="css">

Disini disediakan 4 macam, yaitu css, js, xml, dan html. Silahkan disesuaikan dengan kebutuhan.

Untuk mempermudah penulisan gunakan Tool parse koding post blog ini.

www.dionzi.com