Table of Content

Beranda
Blogger
Design Blog

Cara Mudah Membuat Syntax Highlighter di Blog ( Berwarna )

Membuat syntax highlighter di blog apakah penting?..Pada artikel kali ini kita akan membahas tentang cara membuat syntax highligther di blog (b
Membuat syntax highlighter di blog apakah penting?..Pada artikel kali ini khairpedia akan membahas tentang cara membuat syntax highligther di blog (blogspot).

namun sebelumnya taukah kamu fungsi dan keuntungan memasang syntax highlighter di blog?, simak penjelasan singkat berikut ini.


Table Of Contents
  1. Fungsi Syntax Highlighter
  2. Keuntungan Membuat Syntax Highlighter
  3. Cara Membuat Syntax Highlighter di Blog
    1. Cara Menggunakan Syntax Highlighter

1 Fungsi Syntax Highligther

Sebelum kita masuk ke tahapan cara membuat syntax highlighter di blog ada baiknya memahami fungsi dari syntax highlighter ini.

Fungsi utama syntax highlighter adalah sebagai tempat memasang sebuah kode baik berupa html, css, java atau kode yang lainnya. Nah tugas dari syntax higlighter disini adalah sebagai wadah kode tersebut agar posisi kode tadi teratur dan tidak berantakan saat postingan di publish.

2 Keuntungan Membuat Syntax Highlighter

Membuat syntax highlighter di blog sudah menjadi kewajiban kamu sebagai blogger terkhususnya lagi kepada kamu yang mempunyai blog dengan topik koding,, maka kamu wajib memasang syntax higlighter ini di blogmu. Selain hal diatas berikut keuntungan memasang syntax higlighter,
  1. Tampilan kode tersusun rapi.
  2. Kombinasi warna dapat ditambahkan kedalam kode menjadikannya lebih hidup.
  3. Blog kamu akan terlihat lebih profesional.
  4. Kombinasi tombol copy kode.

3 Cara Membuat Syntax Highlighter di Blog

Jadi apakah kamu sudah siap membuat syntax highlighter di blog mu?. Simak panduan singkat dibawah ini.
  1. Silahkan masuk ke dashboard blogger kamu.
  2. Sebelumnya ada baiknya backup template agar disaat kamu salah memasukkan kode bisa di restore ulang.
  3. Pilih menu Tema dan buka tampilan Edit HTML
  4. Cari kode ]]></b:skin> setelah ketemu masukkan kode dibawah ini diatas kode ]]></b:skin> tadi ( tekan copy css agar lebih mudah menyadi kode dibawah ini )
    5. /* syntax highlighter */
.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}
.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}
  5. Jika sudah, cari kembali kode </body> dan masukkan kode dibawah ini diatas kode </body> tersebut.
    6. <b:if cond='data:view.isPost'>
<script>
//<![CDATA[
/* highlight.js badge */
"use strict";!function(e,o){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?o(e):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){var o;function t(e){var m={templateSelector:"#CodeBadgeTemplate",contentSelector:"body",loadDelay:0,copyIconClass:"fa fa-copy",copyIconContent:"",checkIconClass:"fa fa-check text-success",checkIconContent:"",onBeforeCodeCopied:null};function o(){m.loadDelay?setTimeout(t,loadDelay):t()}function t(){var e,o,t;document.querySelector(m.templateSelector)||((e=document.createElement("div")).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: 13px;","        line-height: 1.5em;","        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}(),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(c){return c.srcElement.classList.contains("code-badge-copy-icon")&&(c.preventDefault(),c.cancelBubble=!0,function(){var e=c.srcElement.parentElement.parentElement.parentElement,o=e.querySelector("pre>code"),t=o.textContent||o.innerText;m.onBeforeCodeCopied&&(t=m.onBeforeCodeCopied(t,o));var n=document.createElement("textarea");n.value=t.trim(),document.body.appendChild(n),n.style.display="block",y.document.documentMode?n.setSelectionRange(0,n.value.length):n.select(),document.execCommand("copy"),document.body.removeChild(n),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)}(e)}()),!1})}Object.assign(m,e),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",o):o()}"boolean"!=typeof o&&(o=!1),y.highlightJsBadge=t,y.module&&y.module.exports&&(y.module.exports.highlightJsBadge=t),o&&t()});

/* Highlight.js */
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 downloadJSAtOnloadz(){var e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnloadz,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnloadz):window.onload=downloadJSAtOnloadz;
//]]>
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js'/>
</b:if>
  6. Apabila semua kode sudah terpasang dengan benar silahkan kamu klik simpan.
  7. Jika kamu penasaran dengan tampilan syntax highlighter diatas, kamu dapat melihatnya sendiri pada blog saya ini. Karena saya menggunakan syntax highlighter yang sama.

3.1 Cara Menggunakan Syntax Highlighter

Setelah kita berhasil membuat syntax highlighter di blog, kamu akan belajar sedikit cara menerapkannya pada postingan blog. Caranya tidak terlalu sulit namun sebelumnya kamu harus memparse kode yang ingin kamu posting di blog. berikut cara singkat penggunaannya.
  1. Jika kamu sudah memiliki kode yang ingin di posting/diparse, silahkan kamu buka HTML Parse di google atau kamu bisa menggunakan Html Parse 
  2. Jika sudah berada di tampilan HTML Parsenya silahkan kamu masukkan kode yang ingin di parse pada box / kotak yang disediakan dan klik Parse Code.
    3. parse kode

  3. Apabila kode sudah diparse maka tampilannya akan seperti berikut.

    4. parse kode

  4. Setelah itu silahkan kamu copy tersebut dan masukkan kedalam postingan blog dengan tag kode seperti berikut.
Nah biasanya kita disaat menggunakan syntax highlighter pasti menggunakan tag ini
<pre><code>
Kode yang sudah diparse
</code></pre>
Namun untuk menggunakan syntax highlighter yang saya buat ini kamu perlu menambahkan class kedalam tag tersebut. berikut contohnya
<pre><code class="Css">
Masukkan Kode CSS yang sudah diparse
</code></pre>

<pre><code class="html">
Masukkan Kode HTML yang sudah diparse
</code></pre>

<pre><code class="js">
Masukkan Kode Javascript yang sudah diparse
</code></pre>

Contoh Penulisan Syntax Dalam Bentuk HTML 

<pre><code class="html">
//---Penulisan Kode HTML Yang Sudah di Parse---//
&lt;body oncontextmenu=&#039;return false;&#039; onkeydown=&#039;return false;&#039; onmousedown=&#039;return false;&#039; ondragstart=&#039;return false&#039; onselectstart=&#039;return false&#039; style=&#039;-moz-user-select: none; cursor: default;&#039;&gt;
</code></pre>

Contoh Penulisan Syntax Dalam Bentuk CSS 

<pre><code class="css">
//---Penulisan Kode CSS Yang Sudah di Parse---//
.llyv {
	background-color: #000;
	margin-bottom: 20px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden
}

.llyv img {
	width: 100%;
	top: -16.82%
}

.llyv .llyv-play-btn {
	width: 100px;
	height: 60px;
	background-color: #282828;
	z-index: 1;
	border-radius: 9px
}

</code></pre>

Contoh Penulisan Syntax Dalam Bentuk Javascript 

<pre><code class="js">
<script>
//<![CDATA[
/*! llyv.js v0.1.0 */
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function()</script>
</code></pre>
Sekian tutorial singkat cara membuat syntax highlighter di blog, semoga artikel ini dapat membantu dan semakin meningkatkan kualitas blog kamu.

Posting Komentar