Cara Membuat Syntax Highlighter Berwarna + Tombol Copy

syntax highlighter adalah fitur teks editor yang digunakan untuk menyaring syntax dari berbagai jenis bahasa pemrograman, skrip, atau markup
Cara Membuat Syntax Highlighter Berwarna + Tombol Copy

Hallo semua sahabat ngoding, masih pada sehat kan? Kali ini saya akan membagikan tutorial gimana sih cara membuat syntax highlighter berwarna dengan tombol copy code di blogger.

Tapi sebelum lanjut, mungkin ada yang belum tahu apa itu Syntax Highlighter.

Jadi, syntax highlighter adalah fitur teks editor yang digunakan untuk menyaring syntax dari berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya.

Umumnya syntax highlighter di temukan pada blog yang berniche tutorial yang berurusan dengan perkodingan seperti blog Siap Ngoding yang selalu menyisipkan kode di dalam postingan.

Sebelum kita bahas lebih lanjut, alangkah baiknya kalian harus tahu dulu apa kelebihan dan kekurangana memasang syntax highlighter pada blog.

Kelebihan Memasang Syantax Highlighter

  1. Mempermudah dalam penyotiran kode yang akan ditulis
  2. Postingan terlihat lebih rapi dan profesional
  3. Mempermudah pengunjung melihat dan menyalin kode yang telah di bagikan

Kekurangan

Kekurangan syntax highlighter ini hanya 1 yaitu loading blog akan terbebani karena menggunakan javascript internal dan external, jadi buat kalian yang ingin memasang sebaiknya di pertimbangkan dulu.

Apbila blog kalian bukan berniche tutorial tentang kode atau niche random yang hanya sesekali membagikan kode, syntax highlighter ini sangat tidak cocok karena hanya akan membebani blog kalian saja.

Dan apa bila blog kalian sudah berat sebaiknya menggunakan syntax highlighter yang lebih simple yang hanya menggunakan CSS, pada postingan berikutnya akan saya buatkan.

Jika kalian sudah mempertimbangkan dengan cukup matang dan ingin tetap mencobanya mari simak caranya di bawah ini.


Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code Di Blog

Pertama kalian masuk ke Dasboard blogger pilih tema > edit html. Kemudian salin kode css di bawah ini dan letakkan di atas kode ]]></b:skin>


.post-body pre{position:relative;width:100%;background-color:#262a2d;border-radius:4px;margin:25px auto;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
.post-body pre code{color:rgba(255,255,255,.9);display:block;padding:20px;white-space:pre;font-family:monospace;font-size:14px;overflow-x:auto;line-height:1.5em}
.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}
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 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M391.89,450H163a50.17,50.17,0,0,1-50.11-50.11V98.11A50.17,50.17,0,0,1,163,48h150.1a15,15,0,0,1,10.61,4.39L437.61,166.27A15,15,0,0,1,442,176.88v223A50.17,50.17,0,0,1,391.89,450ZM163,78a20.13,20.13,0,0,0-20.11,20.11V399.89A20.13,20.13,0,0,0,163,420H391.89A20.13,20.13,0,0,0,412,399.89V183.09L306.91,78Z' fill='%23c6c9ce'/%3E%3Cpath d='M427,191.88H348.23a50.17,50.17,0,0,1-50.11-50.11V63a15,15,0,0,1,30,0v78.77a20.13,20.13,0,0,0,20.11,20.11H427a15,15,0,0,1,0,30Z' fill='%23c6c9ce'/%3E%3C/svg%3E");background-size:55% 55%;background-repeat:no-repeat;background-position:center;cursor:pointer;padding:7px 15px;margin:-5px -8px -5px -14px}
.code-badge > .code-badge-check-icon{background:green}
.code-badge-check-icon{cursor:pointer;padding:0 7px;margin:-5px 0 -5px -5px;background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=');background-size:100% 100%}
#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}
#copyy:hover i.code-badge-copy-icon::before{visibility:visible;opacity:1;top:-33px}
#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}
#copyy:hover i.code-badge-copy-icon::after{visibility:visible;opacity:1;top:-9.8px}
#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}
#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}

Selanjutnya silakan salin kode javascript di bawah ini dan letakkan di atas kode </body>. Jika kalian tidak menemukannya kemungkinan telah di parse shingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;


<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js'/>
<script>/*<![CDATA[*/
!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-content",
    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://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
/*]]>*/</script>

Sampai di sini kita sudah berhasil membuat Syntax Highlighter berwarna + copy, jangan lupa untuk klik simpan, berikut cara penggunannya di bawah ini.


<pre><code class="html">
kode html yang sudah di parse di sini
</code></pre>


<pre><code class="css">
kode css yang sudah di parse di sini
</code></pre>


<pre><code class="javascript">
kode javascript yang sudah di parse di sini
</code></pre>

Kalian juga bisa menggunakan kode seperti di bawah ini tanpa harus menulis class dari nama kode tersebut, karena akan secara otomatis terdeteksi.


<pre><code>
kode html yang sudah di parse di sini
</code></pre>

Jika kalian ingin memberi tanda (block) pada sebuah kode, kalian bisa menggunakan <mark>kode yang akan di tandai di sini</mark>. Untuk demonya akan tampak seperti di bawah ini.


<pre><code>
Ini kode di tandai kalian yang sudah di parse di sini
</code></pre>

perlu di ingat kode yang akan di sisipkan ke dalam postingan harus di parse terlebih dulu, kalian bisa menggunakan Tools Parse yang ada pada blog ini.

Penutup

Oke cukup di sini tutorial kita tentang Cara membuat syntax highlighter + tombol copy kali ini, semoga bermanfaat dan Terimakasih.

Referensi:
https://www.wendycode.com/2021/03/syantax-highlighter-berwarna-dengan-css.html

Cara Membuat Syntax Highlighter Berwarna + Tombol Copy
Blog ini dibuat dengan tujuan untuk berbagi kepada semua orang yang membutuhkannya.

You May Like These

Ikuti blog Siap Ngoding untuk mendapatkan notifikasi terbaru!