Membuat Syntax Highlighter pada Website

Syntax highlighter merupakan fitur editor teks yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, script, atau markup, seperti HTML, CSS, JavaScript dan lainnya. Fitur ini menampilkan kode script dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri, tujuannya pun agar mudah dibaca oleh manusia supaya terlihat rapih dan keren.

Lalu bagaimana cara memasang Syntax Highlighter pada Website atau Blog?

Untuk memasukan kode program pada website, kita bisa menggunakan tag pada HTML, namun tidak memiliki warna seperti syntax highlighter sehingga cukup sulit untuk dibaca. Pada tutorial ini, syntax highlighter yang digunakan adalah HighlightJs. Untuk cara proses pemasangannya pun cukup mudah, kita hanya perlu memasukkan beberapa baris kode untuk memanggil CSS dan JS dari Syntax Highlighter tersebut.

Langkah Pertama, tambahkan kode untuk memanggil CSS dan JS highlightjs, taruh sebelum tag </head> :

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js">

Langkah Kedua, tambahkan kode berikut persis dibawah kode Langkah Kedua untuk mengaktifkan highlightjs :

<script type="text/javascript">
    $(document).ready(function() {
      $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });
</script>

Langkah Keempat, silahkan coba masukan kode diantara tag <pre></pre> untuk menggunakan syntak highlighter.

Mungkin cukup sekian tutorial tentang Cara Memasang Syntax Highlighter di Website, jika bermanfaat silahkan share keteman-teman kalian supaya mereka tau apa yang kalian tau. Jika ada kesulitan silahkan tinggalkan komentar.