Cara Menampilkan Box Code Menggunakan Highlight JS

Cara Menampilkan Box Code Menggunakan Highlight JS

Cara Menampilkan Box Code Menggunakan Highlight JS - Syntax Highlighter adalah salah satu fitur untuk membuat kotak penulisan script code sehingga menampilkan tampilan papan code seperti teks editor. biasanya syntax highlighter ini digunakan dalam pembuatan artikel tentang pemrograman. Fitur syntax highlighter bertujuan untuk memudahkan pengunjung dapat lebih jelas dalam membaca coding seperti tampilan pada teks editor yang biasa digunakan. 

Syntax Highlighter akan membantu pengembang atau pembuat kode untuk mengirim potongan kode online dengan mudah dan membuatnya terlihat cantik. membuat syntax highlighter ini 100% berbasis Java Script dan tidak peduli apa yang Anda miliki di server Anda.

Fitur Syntax Highlighter JavaScript
  1. Mendukung berbagai format bahasa pemrograman.
  2. Support terhadap semua media browser seperti : Google Chrome, Mozilla FireFox, Internet Explorer, Opera dan lain sebagainya.
  3. Mudah untuk digunakan dan dikembangkan.100% dalam penggunaan tanpa adanya campur tangan server.
  4. Dan sangat ringan untuk digunakan. 

Bahasa Support Syntax Highlighter

No Language Aliases
1 C++ cpp, c, c++
2 C# c#, c-sharp, csharp
3 CSS Css
4 Delphi delphi, pascal
5 Java java
6 Java Script js, jscript, javascript
7 PHP php
8 Python py, python
9 Ruby rb, ruby, rails, ror
10 Sql sql
11 VB vb, vb.net
12 XML/HTML xml, html, xhtml, xslt

Dari tampilan form diatas itu adalah bahasa yang mendukung dalam membuat box code syntax highlight. saya akan menunjukkan cara menampilkannya di situs Blogger. Berikut ini adalah langkah-langkah yang dapat Anda lakukan untuk Cara Menampilkan Box Code Menggunakan Highlight JS :

Langkah Pertama Pergi ke halaman website di https://highlightjs.org dan pada halaman website highlightjs.org anda bisa memilih berbagai pilihan model yang ingin digunakan dalam membuat syntax highlight dengan mengklik tautan pada language dan style untuk mengatur tampilan yang digunakan. disini saya memilih Language: Java Style: github.

Langkah Kedua Setelah anda menentukan language dan style sesuai yang dibutuhkan selanjutnya submit pada Button Get Version.

Langkah Ketiga Pada halaman selanjutnya terdapat 3 pilihan yang di hosting oleh CDNs seperti cdnjs, jsdelivr, dan unpkg. diantara pilihan ketiganya pilih jsdelivr dan copy link yang ada di box pada jsdelivr seperti contoh di bawah ini.

Langkah Empat Selanjutnya pergi ke blogger dan edit tema html cari code <head> atau bisa menekan ctrl+f untuk mencari code agar lebih cepat dan pastekan di bawah <head> atau sebelum tag </head>.

Catatan : Pada saat anda menempatkan code link yang di copy dari web highlightjs ke edit tema HTML di blog jangan lupa tambahkan tag penutup di bagian akhir tag /> seperti di bawah ini.

Langkah Lima Kembali ke halaman highlightjs dan copy link code script. lalu pastekan code tersebut di atas tag</body>. Jangan lupa tambahkan tag /> penutup seperti di bawah ini.

Tambahkan code script di atas pada tag </body> kurang lebih posisi script seperti di bawah ini.

Langkah Enam Tambahkan dan salin kode di atas pada tag <script>isi kode</script> dan pastekan di atas </body> tepatnya seperti kode diatas lalu save edit HTML. sekarang anda bisa cek perubahan yang terjadi dengan menggunakan code yang sudah kita tambahkan dari web highlightjs.

Catatan : Pada saat anda coba membuat postingan baru tambahkan code <pre><code>isi script</code></pre> untuk membuat box script seperti dibawah ini.

Pada kode yang sudah kita tambahkan sudah bisa menghasilkan box code highlight tetapi ini belum selesai karena kita akan membuat box code nya seperti tampilan text editor pada umumnya.

Langkah Tujuh selanjutnya pergi ke website https://www.jsdelivr.com/ scrool ke bawah dan ketikkan pada keywoard (search all of npm) ketikkan pada keywoard "highlightjs" pada hasil pencarian yang dihasilkan klik highlight.js lalu pilih /npm/highlight.js@10.5.0/styles scroll ke bawah dan klik show all pilih /npm/highlight.js@10.5.0/styles/railscasts.css dan copy HTML. Setelah itu pergi ke blog edit HTML dan ganti code yang kita paste pertama kali tepat dibawah tag <head> dan ganti code tersebut dengan code yang baru kita salin dan pastekan disitu.

Catatan : Jangan lupa tambahkan tag penutup /> seperti yang sudah saya jelaskan di atas. dan save tema maka tampilan box akan berubah menjadi text editor pada umumnya.

Dan selanjutnya untuk membuat nomor pada baris script agar tampak lebih sempurna seperti teks editor yang harus dilakukan adalah kembali ke website jsdelivr dan ketikkan pada keywoard (kata kunci) hightlight line pilih atau klik highlightjs-line-numbers.js (https://www.jsdelivr.com/package/npm/highlightjs-line-numbers.js) dan copy HTML pada /npm/highlightjs-line-numbers.js@2.8.0/src/highlightjs-line-numbers.min.js lalu, pergi ke Blogger dan edit HTML pastekan tepat nya diatas tag </body> seperti contoh di bawah ini.

Catatan : Perlu diketahui sebelum anda memasukkan kode script jangan lupa parse terlebih dahulu kode yang ada di dalam tag <pre><code> disini kode hasil parse </code></pre> untuk menampilkan box code highlight agar hasilnya sempurna (work). Buat Parse code Klik disini.

Setelah itu publish postingan dan liat hasilnya. jadi begitulah Cara Menampilkan Box Code Menggunakan Highlight JS. Demikian artikel kali ini semoga bermanfaat untuk Anda yang memerlukan tampilan box code di blog yang membahas tentang kode-kode pemrograman.

Next Post Previous Post
No Comment
Add Comment
comment url