Kamis, 13 April 2017

Cara Membuat Syntax Highlighter Cantik di Blog

Cara Membuat Syntax Highlighter Cantik di Blog - Syntax highlighter pasti dibenak kalian langsung mengarah ke kode-kode atau source code. Syntax highlighter ini memang digunakan dalam berbagai pemrogaman dan lain-lain. Kalau ngoding kode-kodenya berwarna putih doang pasti kita merasa bosan dan apalagi kalau error bikin pusing. Nah saya akan bahas se-simple mungkin apa itu syntax highlighter? Cekidot.........

Cara Membuat Syntax Highlighter Cantik di Blog

Syntax Highlighter


Syntax highlighter adalah fitur adalah proses pemindahan bahasa pemrogaman tertentu dengan tulisan, warna, serta posisi sama persis dengan bahasa pemrogaman untuk dipindahkan ke dalam bentuk lain agar mempermudah kita dalam membaca dan mepelajarinya. Selain itu fitur Syntax highlighter ini juga mempercantik tampilan kode sehingga menarik untuk dibaca dan dipelajari.


Cara Membuat Syntax Highlighter Cantik pada Blog


1. Blogger > Template > Edit HTML
2. Masukan kode CSS dibawah ini sebelum ]]></b:skin> atau </style>

/* CSS Highlighter */
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2c3641;color:#fff}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#e67e22;color:#fff}

3. Setelah menambahkan CSS selanjutnya tambahkan kode JavaScript di bawah ini sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
// Double Click
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>


4. Setelah semuanya selesai > Simpan Template.


Cara Penggunaan Syntax Highlighter di Blog


Gunakan markup penulisan di bawah ini. Pada postingan kalian dengan cara masuk mode HTML (Bukan Compose). Oke....

<pre><code>
Isi dengan kode HTML atau lainnya disini yah....
</code></pre>

Artikel Terkait

Saya ini seorang blogger dari Indonesia yang masih nubie :v , salam kenal dan sehat selalu.