Cara Mudah Membuat Syntax HighLighting Pembungkus Kode

Membuat Syntax HighLighting atau Pembungkus Kode dengan defer Js. Hai Sobat. Kali Ini saya akan membahas cara membuat syntax highlighting atau bahasa kerennya Pembungkus Kode.

Sebelum, saya membahas artikel ini, Apakah Kalian Tahu apa itu syntax HighLighting ?

Syntax HighLighting atau Penyorotan sintaks adalah fitur editor teks yang digunakan untuk pemrograman, script, dan bahasa markup, seperti HTML.

Lah, Fungsi Nya untuk apa, YOS ?

ketika kamu ingin mengetik sebuah kumpulan kode/ Script, pasti itu akan terbaca oleh sistem Blogspot sebagai HTML biasa. Nah, Fungsi Syntax Highlighting itu adalah membungkus kumpulan kode/script agar tidak terbaca oleh sistem blogspot sebagai HTML biasa tapi sebagai HTML Special

Okelah, Tanpa Basa Basi Lagi, Berikut Cara Membuat Syntax Highlighting atau pembungkus kode.

1. Login Lah Terlebih Dahulu Ke akun blogger kalian.

2. Setelah Login, Masuk ke menu Template Trus Ke Edit HTML

3. Cari Kode </body>, Jika Sudah ketemu, Masukkan Script Di bawah ini tepat di atas kode
    </body> 

<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Masih Di Edit HTML, Carilah Kode </head>

Jika Sudah Ketemu, Salin Lah Kode Di Bawah ini Diatas </head>

<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{-moz-user-select:none;display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre[data-codetype="tamvanCSS"]:before,pre[data-codetype="tamvanHTML"]:before,pre[data-codetype="tamvanJS"]:before,pre[data-codetype="tamvanJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.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}
</style>
<br />

Sampai Di sini, Peletakan Script Sudah Selesai. Sekarang, Kita Tinggal Menerapkannya di postingan blog. Lalu, Bagaimana Cara Menerapkannya ?

1. Masuk ke postingan yang ingin dipasang Syntax HighLighting, Lalu Pilih Tab HTML dan salin kode pembungkus dibawah ini sesuai kode yang ingin kalian tampilkan

Kode Pembungkus HTML
<pre data-codetype="tamvanHTML" title="HTML">
<code>
<!--Letakkan Kode Kalian Di Sini-->
</code>
</pre>


Kode Pembungkus CSS
<pre data-codetype="tamvanCSS" title="CSS">
<code>
<!--Letakkan Kode Kalian Di Sini-->
</code>
</pre>


Kode Pembungkus Javascript
<pre data-codetype="tamvanJS" title="Javascript">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus CSS
<pre data-codetype="tamvanCSS" title="CSS">
<code>
<!--Letakkan Kode Kalian Di Sini-->
</code>
</pre>


Kode Pembungkus jQuery
<pre data-codetype="tamvanJQ" title="JQuery">
<code>
<!--Letakkan Kode Kalian Di Sini-->
</code>
</pre>

Jika kalian ingin mempublikasikan HTML Javascript JQuery sebaiknya kode kalian diparse terlebih dahulu, agar scriptnya tampil... untuk memparse kodenya, Kalian Bisa Menggunakan Tool Ini
Ohh ya, Pada Bagian ini <!--Letakkan Kode Kalian Di Sini--> ganti dengan kode kalian

4. Nah Jika Sudah Selesai, Kalian  Tinggal Save Dan Publikasikan

5. Selesai.

Dan Taraaa, Sekarang Kalian Sudah Bisa Membuat Syntax Highlighting atau Pembungkus Kode.

Terimakasih

Share this post