Membuat Highlighter Berwarna di Blog dengan highlight.js

Cara membuat sintaks highlight di blogger, menggunakan highlight js pada blogspot, membuat kode berwarna di postingan blog

Implementasi Penggunaan Tag Video HTML 5

Kumpulan Tag HTML Lengkap dengan Keterangan dan Fungsinya

Syntax Highlighter umumnya digunakan oleh para mastah yang suka share koding-koding tutorial dengan berbagai bahasa pemrograman untuk mempercantik tampilan kodingnya. Jika kalian melihat thumbnail di atas, itu merupakan tampilan dari text editor "Sublime Text 3" yang mana sintak penulisannya mirip dengan highlight yang akan kita bahas dalam postingan ini.

Lantas untuk apa, kita yang bukan seorang ahli koding tapi menggunakan syntax highlight ? Jika kalian tidak membutuhkan yaa maaf  haha. Sejatinya, dengan kalian masuk ke postingan ini berarti kalian calon-calon programmer nih.

Belajar bukan berarti kalian harus menjadi ahli, tapi belajar adalah proses menghilangkan keresahan dan kegundahan. ~Guru Kudet

Membuat tag <pre> dan <code> menjadi lebih menarik dengan diberikan sentuhan warna, selain enak dilihat, kode juga akan lebih mudah di pahami. Berikut contoh penggunaanya:

<form action="check-login.php" class="inner-login" method="post">
<h3 class="text-center title-login">SMK WITAR </h3>
<div class="form-group">
   <input type="text" class="form-control" name="username" placeholder="Username">
</div>

<div class="form-group">
   <input type="password" class="form-control" name="password" placeholder="Password">
</div>

<input type="submit" class="btn btn-block btn-custom-green" value="LOGIN" />
                
<div class="text-center forget">
<p>Forgot Password ?</p>
                    
   </div>
</form>

Nah, diatas merupakan contoh penerapan sintaks highlight-nya. Sejauh ini, paham kan ya yang dimaksud highlighter itu seperti apa.

Cara Membuat Syntax Highlight dengan highlight.js

highlight.js merupakan sebuah modul yang berfungsi untuk membuat tampilan kode menjadi berwarna, untuk mempelajari lebih jauh terkait highlight.js bisa langsung menuju web resminya.

1. Memasang hightlight.js di Blogspot

Karena di blogger tidak menyediakan tempat menyimpan file (hosting), jadi kita ambil modul highlight.js yang disediakan oleh situs resminya

Buka Blogger > Edit Template > Cari kode </body> pastekan kode di bawah ini tepat di atas tag </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/agate.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

versi terbaru highlight.js adalah 9.15 (ketika artikel ini ditulis). Jika ingin merasakan versi terbaru kalian tinggal ganti angka 9.12.0 dengan versi terbaru saja brader.

2. Cara menggunakan highlight.js

Tak ada aturan yang rumit untuk menggunakan syntax highlight ini, cukup apit text kode dengan tag <pre><code> teks kalian </code></pre> . Kode yang diapit tersebut akan diidentifikasi berdasarkan bahasa pemrograman yang digunakan dan diberikan sentuhan warna.

Contoh dalam mode HTML

<pre><code> &lt;video&gt; . . . &lt;/video&gt;</code></pre>

Tampilan dalam mode Compose

<video> . . . </video>

Penulisan tag <pre><code> . . . </code></pre> di mode HTML dan koding yang ingin kalian tampilkan harus sudah di parse. Tools untuk parse HTML banyak bersebaran di internet ya. Contoh parse HTML seperti di atas yang tadinya kurung siku (<) menjadi &lt;

3. Cara Membuat Scroll pada Syntax Highlight

Umumnya banyak di temukan di blog-blog tutorial berupa koding yang panjang dan menyita ruang sekali, alternatif yang bisa di gunakan adalah memberikan atribut overflow untuk menambahkan scrolling pada teks highlight. Contoh penggunaan Scrolling pada Syntax Highlight.

Tambahkan CSS berikut pada postingan kalian di mode HTML

<style>
#id {
 width: 100%;
  height: 110px;
  overflow: scroll;}
</style>

atau simpan pada template sobat di atas kode ]]></b:skin> tanpa tag <style> . . . </style>.

Pemanggilan CSS-nya

<pre><code id="id"> &lt;video&gt; . . . &lt;/video&gt;</code></pre>

Untuk merubah tinggi atau lebarnya cukup ubah value nya saja ya.

Cara mudah menulis kode berwarna pada postingan blog dirasa cukup mudah bukan, jangan lupa jika ada yang saya tulis dirasa keliru ditunggu kritik yang membangunnya.