Memasang Syntax Highlighter Pada Blog atau Website


Pada text editor seperti Notepad++, Sublime atau Dreamweaver, sudah sering kita jumpai baris kode yang warna-warni, itu disebut Syntax Highligher.
Syntax highlighter bisa dibilang sebagai tempat atau wadah untuk menaruh kode (sintak) bahasa pemorgraman yang biasanya berisi fungsi, variabel, atau sintak lainnya yang dibedakan dengan warna-warna. Tujuannya agar mempermudah saat membaca baris kode dari bahasa pemrograman tersebut.

Lalu bagaimana jika kita ingin terapkan pada blog atau website?

Untuk menaruh kode program pada website/blog, kita bisa menggunakan tag <pre></pre> pada HTML, namun tidak memiliki warna seperti syntax highlighter sehingga cukup sulit untuk dibaca. Maka dari itu berikut adalah cara memasang atau membuat syntax highlighter pada blog atau website.
Pada kali ini, syntax highlighter yang digunakan adalah HighlightJs. Installasinya cukup mudah, hanya perlu memasukkan beberapa baris kode seperti untuk memanggil CSS dan JS. Dan untuk pemanggilannya, kita hanya perlu memasukkan kode program yang ingin ditampilkan dalam tag html <pre></pre>.

Langkah pertama:

Tambahkan kode untuk memanggil CSS highlightjs, anda bisa menaruhnya sebelum tag </head>:
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
Banyak pilihan style untuk warna dari highlighterjs, anda bisa mengunjungi https://highlightjs.org/static/demo/ untuk demonya, dan cari nama dari style yang dipilih pada link berikut https://cdnjs.com/libraries/highlight.js/ untuk mendapatkan css nya.

Langkah kedua:

Tambahkan kode untuk memanggil JS highlightjs, anda bisa menaruhnya sebelum tag </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js'/>

Langkah ketiga:

Lalu tambahkan kode berikut pada bagian bawahnya (langkah kedua) untuk mengaktifkan highlightjs
<script type='text/javascript'>
  //<![CDATA[
    $(document).ready(function() {
      $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
      });
    });
  //]]>
</script>

Langkah keempat:

Silahkan coba dengan menggunakan tag PRE pada kode yang ingin ditampilkan dengan syntax highlighter
<pre>(kode dari bahasa pemograman atau lainnya)</pre>


Semoga tutorial kali ini membantu anda dalam memasang atau menerapkan syntax highlighter pada blog/website anda. Jika ada yang ingin ditanyakan, tinggalkan komentar dibawah.
Share on Google Plus
Seorang blogger yang juga web designer dan web developer. Mempunyai hobi menggonta-ganti hobi tapi tidak jauh dari hobi mengenai TI/Web/Robotic/Internet. 
[ f ] : /riloaw   [ t ] : @Riloaw

0 komentar :

Posting Komentar

Tinggalkan Komentar Yang Baik.