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.
Baca Juga:
Gagas Sangga Pratama Kamis, 25 April 2019 2.375 View Website
Rief Ganz
Selasa, 14 Juli 2020Pak Tag pre Bisa Di Ganti Dengan Tag Lain gak pak ? Atau pake id atau class gitu? Mohon dijawab pak dan berikan solusina
Gagas Sangga Pratama
Rabu, 15 Juli 2020Mas rief ganz, bisa dicoba dibagian $('pre').each(function(i, block) kalimat pre bisa diganti #id atau .class mas