Membuat Syntax Highlighter pada Website

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   Gagas Sangga Pratama Kamis, 25 April 2019 2.375 View Website

RR
Rief Ganz
Selasa, 14 Juli 2020

Pak Tag pre Bisa Di Ganti Dengan Tag Lain gak pak ? Atau pake id atau class gitu? Mohon dijawab pak dan berikan solusina grin

GG
Gagas Sangga Pratama
Rabu, 15 Juli 2020

Mas rief ganz, bisa dicoba dibagian $('pre').each(function(i, block) kalimat pre bisa diganti #id atau .class mas tongue laugh

Komentar
grinLOLcheesesmilewinksmirkrolleyesbig surprise
tongue laughohhgrrroh ohdownerred facesickshut eye
hmmmmadangrykisscool smirkcool mad