auqriblog - Cara membuat kode syntax highlighter warna-warni dengan tombol copy code di blogger. Syntax Highligher adalah sebuah fitur yang mampu menampilkan sebuah potongan kode atau source code dalam berbagai warna, sehingga tampilan menjadi lebih menarik dan enak dilihat.
Jika kamu sering menulis program dalam sebuah tools kode editor pasti tidak akan asing dengan tampilan yang seperti ini.
Nah di artikel ini blog auqri akan memberikan panduan terkait cara membuat kode syntax editor warna-warni di blogger.
Untuk membuat tampilan syntax highlighter kita akan menggunakan highligher.js agar kodenya menjadi warna-warni dan tombol copy-nya menggunakan Clipboard.js. Kita akan mengkolaborasikan keduanya dalam satu fungsi.
Tampilan kode syntax highligher yang sudah dikolaborasikan dengan tombol copy to code dan otomatis menerjemahkan jenis kode yang ditulis, apakah itu javascript, css, html, ataupun jenis lainnya (lihat di pojok kanan atas).
Cara Membuat Syntax Highligher dengan Tombol copy code di Blogger
Silahkan simak langkah per langkah jangan sampai ada yang terlewat atau salah meletakkan kode, karena nanti hasilnya akan berbeda atau malah ada yang error. Berikut panduan cara membuat kode syntax editor warna-warni dengan tombol copy code di blogger:
Pertama, pasang kode CSS dibawah ini atas
/* pre */
.hljs-comment {
color: #656e77;
}
.hljs-attr,
.hljs-doctag,
.hljs-keyword,
.hljs-meta,
.hljs-meta-keyword,
.hljs-section,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-selector-tag {
color: #015692;
}
.hljs-attribute {
color: #803378;
}
.hljs-built_in,
.hljs-literal,
.hljs-name,
.hljs-number,
.hljs-quote,
.hljs-selector-id,
.hljs-template-tag,
.hljs-title,
.hljs-type {
color: #b75501;
}
.hljs-link,
.hljs-meta-string,
.hljs-regexp,
.hljs-selector-attr,
.hljs-string,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
color: #54790d;
}
.hljs-bullet,
.hljs-code {
color: #535a60;
}
.hljs-deletion {
color: #c02d2e;
}
.hljs-addition {
color: #2f6f44;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
.hljs-number {
color: #d36363;
}
.hljs-regexp {
color: #c6b4f0;
}
.post-body pre {
position: relative;
font-family: "Fira Mono", monospace;
line-height: 1.5em;
font-size: 13px;
}
.post-body code,
.post-body .comment-content i[rel="pre"] {
display: block;
white-space: pre;
font-size: 13px;
background-color: #f4f4f4;
border: 1px solid #d5d5d5;
color: #839496;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.07);
border-radius: 6px;
padding: 12px 10px 12px;
margin: 10px 0 25px;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
overflow: auto;
font-family: "Fira Mono", monospace;
line-height: 1.5em;
}
.post-body .code {
display: inline;
padding: 2px 4px;
font-size: 85%;
line-height: inherit;
color: #f15a5a;
background-color: rgba(0, 0, 0, 0.05);
font-family: "Fira Mono", monospace;
}
/* .post-body pre:before{content:'</>';position:absolute;right:0;color:#c5c8c6;font-size:10px;padding:0 15px;z-index:2;line-height:35px} */
.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='%23222222' 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='%23222222' 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, 0.57);
color: #fff;
border-radius: 3px;
right: 0;
padding: 2px 6px;
visibility: hidden;
opacity: 0;
transition: all 0.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, 0.57) 4px;
opacity: 0;
visibility: hidden;
transition: all 0.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, 0.57);
color: #fff;
border-radius: 3px;
right: 0;
padding: 2px 6px;
transition: all 0.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, 0.57) 4px;
transition: all 0.2s ease;
}Kedua, silahkan salin dan tempelkan script dibawah ini diatas
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js' type='text/javascript'/>
<script type="text/javascript">
// Pre Code Warna Warni
hljs.initHighlightingOnLoad();hljs.configure({useBR:false});$("div.code").each(function(e,t){hljs.highlightBlock(t)});
/* highlight.js | https://unpkg.com/highlightjs-badge@0.1.8/highlightjs-badge.min.js */
"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: #f4f4f4;"," }"," .code-badge-pre {"," position: relative;"," }"," .code-badge {"," display: flex;"," flex-direction: row;"," white-space: normal;"," background: #fff;"," 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);
});
</script>Terakhir, simpan template blog kamu.
Untuk penerapannya kamu hanya tinggal menuliskan
Fitur copy code dan Menerjemahkan jenis kode yang di tempel
Oiya tadi kamu seleksi atau salin code CSS dan script diatas apakah masih manual, padahal kamu hanya perlu menekan tombol copy code yang ada di pojok kanan atas dari potongan kode yang di tempel.
Lihat contohnya dibawah ini:
Bagaimana lebih menarik dan mudah banget bukan, semoga bisa bermanfaat terkait cara membuat kode syntax highligher dengan tombol copy code di blogger. Terima kasih sudah berkunjung.
Jaman kuliah dr smt 1 ampe lulus tiap hari bercengkrama ama coding macem ini, otak ampe kriting rasanya, badan ampe kurus karna mikir terus hahahha, lulus kuliah, bye, udah ga mau berurusan ama coding lagi, puyeng mas.
ReplyDeleteSkrg udah asing banget ama coding beginian, padahal 4th jadi makanan pokok pagi siang malem hahaha
Post a Comment
Tambahkan komentar Anda disini..