Cara Membuat Syntax Highlighter Keren Menggunakan Javascript di Blogspot

Kali ini kita akan membahas seputar dunia blogging. Kalian pasti pernah memposting artikel yang di dalamnya memuat code-code pemrograman. Saya rasa jika code-code tersebut di letakkan bersamaan dengan tulisan lain yang bukan code kelihatan kurang begitu rapi. Sebab style nya tidak bisa dibedakan. Lebih bagus lagi jika kita berikan style berbeda pada code-code tersebut agar mirip seperti saat kita membuka code menggunakan aplikasi Code Editor. Bagaimana cara membuatnya? Itulah yang akan kita bahas kali ini yang disebut dengan Syntax Highlighter. Yaitu membuat code-code kita mempunyai style berwarna-warni yang terhimpun dalam kotak yang mempunyai properti CSS overflow juga otomatis menyeleksi seluruh text codenya dengan double click. Oke kita langsung saja ke cara membuatnya.

Silahkan login dulu ke akun blogspot kalian masing-masing. Masuk ke menu Tema lalu pilih edit HTML. Tambahkan kode di bawah ini letakkan sebelum ]]></b:skin> atau </style> atau kalian bisa membuatnya sendiri apit kodenya menggunakan <style>kodenya</style> dan meletakkannya sebelum </head>.

pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {

    border-radius: 4px;
    border: 1px solid #43ce8e;
    position: relative;
   background-color: #43ce8e;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #f6f6f6;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
} 

Di atas tadi adalah kode CSSnya. Sekarang kita tambahkan kode javascript yang nantinya akan memberi style warna-warni pada code-code kita. Letakkan sebelum tag </body> 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Selanjutnya kita tambakan kode javascript lagi supaya saat double click otomatis menyeleksi semua text kodenya agar lebih mudah saat user ingin mengcopy. Letakkan tepat setelah kode di atas tadi sebelum tag </body>.

<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Selanjutnya tinggal save. Untuk menggunakannya kalian masuk ke menu HTML pada postingan yakni tempat kalian menuliskan artikel lalu apit code-code kalian seperti berikut ini. 

<pre class='code code-html'><label>HTML</label><code>
Masukan Kode HTML Anda Di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Masukan Kode CSS Anda Di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Masukan Kode Javascript Anda Di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Masukan Kode Jquery Anda Di Sini
</code></pre>

Tapi sebelum itu, alangkah lebih baik jika kalian memparse dulu code-codenya. Silahkan kalian searching tools parsenya banyak website yang menyediakan tools tersebut. Kalau saya pribadi biasa menggunakan tools parsenya di sini.

Selanjutnya silahkan ganti text yang berwarna merah sesuai bahasa code-code kalian. Save lalu lihat hasilnya. Selamat kalian sudah berhasil membuat Syntax Highlighter yang akan membuat postingan kalian lebih keren jika di dalamnya memuat beberapa code pemrograman.

Oke sekian dulu semoga bermanfaat. Untuk berlangganan agar kalian selalu dapat notifikasi saat ada update artikel baru, silahkan masukkan email kalian di form berlangganan di bawah. Terima kasih sudah berkunjung di Blog kami 😊.