Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code di Blog

 

Halo Sobat Warkasa1919.com gimana kabarnya? Semoga sehat dan baik - baik saja semuanya ya. Awal tahun 2023 ini aku ingin berbagi tutorial tentang  caramembuat syntax highlighter berwarna dengan tombol copy code di blog, mana tau ada diantara Sobat pembaca blog gado - gado ini yang sedang membutuhkan tutorial seperti ini untuk mempercantik tampilan blog-nya. Tutorial ini juga aku dapatkan dari salah satu blogger yang konsisten menerbitkan artikel-artikel khusus tentang widget.

Beberapa hari ini aku memang asyik menjelajahi blog wendy code dan beberapa tutorial yang diterbitkan memang sebagian besar berhasil kupraktekan, salah satunya adalah yang membahas tentang syntax highlighter ini. Syntax highlighter sendiri adalah fitur teks editor yang bisa digunakan untuk menyortir berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan lain sebagainya. 

Pada umumnya syntax highlighter di temukan pada blog yang ber-niche tutorial yang memang selalu menyisipkan kode - kode di dalam postingannya. Namun begitu, sebelum kita menerapkan beberapa kode yang akan aku tampilkan di postingan kali ini, aku akan coba memberikan gambaran tentang kelebihan dan kekurangannya jika kita memasang syantax highlighter pada blog kita.

Sobat warkasa1919.com berikut ini adalah kelebihan dan kekurangan memasang syantax highlighter pada blog.

Kelebihan Memasang Syantax Highlighter

• Salah satu kelebihan yang kita dapatkan ketika di blog kita terpasang syantax highlighter adalah dapat memudahkan pengguna dalam menyortir kode yang ditulis.
  
• Selanjutnya dengan memasang syantax highlighter maka postingan yang ada di blog terlihat lebih rapi dan profesional.
• Selain itu salah satu kelebihan yang didapat adalah dapat mempermudah visitor untuk melihat dan menyalin kode yang telah dibagikan oleh penulisnya, khususnya pada blog - blog yang memasang kode script anti copas di blog nya.

 

Kekurangan Memasang Syantax Highlighter

Jika tadi sudah dijelaskan beberapa kelebihan yang di dapat ketika memasang syantax highlighter di blog, maka sekarang aku juga akan menyampaikan beberapa kekurangannya dari menggunakan syntax highlighter ini. kekurangan yang paling terasa adalah pada saat loading, Biasanya blog yang memasang syntax highlighter ini cendering sedikit lelet karena blog terbebani akibat menggunakan javascript internal dan external.

Itulah kelebihan dan kekurangan yang bisa Sobat jadikan sebagai bahan pertimbangan jika  memasangkan syantax highlighter pada blog. Jadi silahkan pertimbangkan sesuai kebutuhan, dan apabila blog blog milik Sobat memang berniche tutorial dan sering membagikan kode, maka syntax highlighter ini tentu sangat cocok untuk blog Sobat tadi. Namun jika blog milik Sobat adalah jenis blog yang jarang membagikan kode maka sebaiknya tidak usah memasangnya, sebab hanya akan memberatkan blog saja.

Bagi Sobat sekalian yang ingin syntax highlighter berwarna dengan tombol copy code di blog, silahkan di simak cara dan langkah-langkah berikut ini.

 

Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code Di Blog

Untuk memasang syntax highlighter berwarna dengan tombol copy code di blog, silakan masuk ke menu blogger, lalu pilih tema dan edit html, selanjutnya silahkan salin 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}

 

Setelah berhasil memasang kode di atas, selanjut silakan Sobat salin javascript di bawah ini dan letakkan di atas kode  </body> dan jika Sobat tidak menemukannya, kemungkinan telah di parse sehingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

</body>

Silahkan salin kode dibawah ini :

<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>

 

Setelah berhasil memasang dua kode tadiampai di sini jika sudah selesai jangan lupa untuk klik simpan, dan berikut ini adalah cara penggunaannya, selengkapnya kode bawah ini.

<pre class='html'><code>untuk kode jenis html</code></pre>

<pre class='css'><code>untuk kode jenis css</code></pre>

Sobat juga bisa menggunakan seperti di bawah ini tanpa harus menulis nama kode, karena akan otomatis terdeteksi nama kodenya.

<pre class='js'><code>untuk kode jenis javascript</code></pre>

Jika ingin menandai sebuah kode Sobat bisa menggunakan <mark>kode yang akan di tandai di sini</mark> untuk demonya akan tampak seperti di bawah ini.

<pre class='js'><code>untuk kode jenis javascript</code></pre>

 

 

Itulah cara membuat syntax highlighter berwarna dengan tombol copy code di blog, semoga bermanfaat ya. Oh iya, ada satu hal yangperlu di ingat, kode yang akan di sisipkan ke dalam postingan harus di parse terlebih dulu, dan untuk itu Sobat bisa menggunakan tools parse yang ada di sini. Salam.

 

 

Referensi: 

https://www.wendycode.com/2021/01/cara-membuat-syntax-highlighter-berwarna-dengan-tombol-copy-code-di-blog.html

 Kembali

Halaman

1

Mau donasi lewat mana?

Bank Transfer Paypal

Bank BNI - An.warkasa / Rek - 0223432494

Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas