author Ahmad Muhardian

Cara Menggunakan highlight.js di Blogger


higlight.jsTemplate baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna.

Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger.

1. Memasang higlight.js

Kita akan memanfaatkan CDN (content delivery network) nutuk memasang highlight.js, karena blogger tidak menyediakan tempat untuk hosting file. Silahkan masuk ke edit html template. Kemudian masukkan kode berikut ini ke dalam tag <head>:
<!– Syntax highlighter –>
<link href=’//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/>
<script src=’//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/>
<script>hljs.initHighlightingOnLoad();</script>
<!– end Syntax highlighter –>
Versi higlight.js yang digunakan adalah versi 9.0.0. Bila ada versi yang lebih baru lagi, anda tinggal mengganti angka itu saja. Kemudian github.min.css adalah kode CSS tema yang digunakan. Anda bisa menggunakan tema lain. Daftar tema bisa dilihat di github.

2. Menggunakan higlight.js

Cara menggunakan highlight.js sangat mudah. Kita hanya perlu mengapit kode dengan tag <pre> dan <code> yang diberikan atribut kelas dengan nilai sesui dengan nama bahasa pemrogramannya. Contoh:

Bahasa pemrograman Java
<pre><code class=“java”>
Class Contoh{
    public static void main(String[] args){
        System.out.println(“Hello World!”);
    }
}
</code></pre>
Hasilnya:
Class Contoh{
    public static void main(String[] args){
        System.out.println(“Hello World!”);
    }
}
Bahasa pemrograman C++
<pre><code class=“cpp”>
#include <iostream>

using namespace std;

int main(){
    cout << “Hello World!” << endl;
    return 0;
}
</code></pre>
Hasilnya:
#include <iostream>

using namespace std;

int main(){
    cout << “Hello World!” << endl;
    return 0;
}
Bagaimana kalau kode bahasa pemrogramannya ada lebih dari satu? Misalnya html, css, javascript, dan PHP. Jawabanya tinggal memanggil nama kelas-kelasnya jadi satu, dipisah dengan spasi. Contoh
<pre><code class="html css js php">
&lt;html&gt;
&lt;head&gt;
&lt;style type=‘text/css’&gt;
.body{
&nbsp; &nbsp; background: #008080;
&nbsp;&nbsp;&nbsp; color: white;
}
&lt;/style&gt;
&lt;script type=‘text/javascript’&gt;
console.log(“javascript dijalankan”);
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;?php echo “&lt;h2&gt;Hello World&lt;/h2”; ?&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
Untuk kode HTML, kita perlu meng-encode karater < (lebih kecil) menjadi &lt;, > (lebih besar) menjadi &gt;, dan spasi menjadi &nbsp; Hasilnya:
<html>
<head>
<style type=‘text/css’>
.body{
    background: #008080;
    color: white;
}
</style>
<script type=‘text/javascript’>
console.log(“javascript dijalankan”);
</script>
</head>

<body>
<?php echo “<h2>Hello World</h2”; ?>
</body>
</html>
Mudah bukan? selamat mencoba.

Referensi: https://highlightjs.org/usage/

Baca Juga ini

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Tutorial CSS #02: Cara Menulis CSS di HTML

Giaman sih cara menulis CSS di dalam HTML. Mari kita Pelajari 3 cara menulis CSS di HTML.

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Belajar HTML #07: Cara Membuat Link untuk Menghubungkan Halaman Web

Panduan lengkap cara membuat link di HTML. Pada tutorial ini, kita akan belajar membuat link menggunakan tag a dan mengenal atribut-atribut yang biasanya digunakan untuk membuat link.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaanya.

Belajar Javascript: Apa itu Objek? dan Bagaimana Cara Membuatnya?

Belajar Javascript: Apa itu Objek? dan Bagaimana Cara Membuatnya?

Artikel ini membahas tentang cara menggunakan objek pada Javascript. Apa saja dasar-dasar objek di Javascript yang harus kamu ketahui...