Sebelumnya saya memposting cara mudah menggunakan syntax highlighter dengan Highlight.js. Namun kini kita akan mencoba menggunakan highlighter bawaan Jekyll yaitu Rouge.

Secara default, Jekyll sudah dilengkapi dengan syntax highlighter untuk mempercantik tampilan kode di blog dengan Rouge yang mendukung sekitar 60 bahasa pemograman. Jadi untuk memeriksa apakah theme Jekyll yang Anda gunakan telah dilengkapi highlighter Rouge silahkan cek di _config.tml, pastikan di situ terdapat highlighter: rouge

Namun berbeda dengan Highlight.js yang dapat secara otomatis mengenali bahasa kode, dengan Rouge kita harus menuliskan bahasa kode setiap kali kita menuliskan kode di postingan seperti css, html, javascript, dan lainnya sesuai dengan kode yang kita tulis.

Pada markdown, untuk menampilkan highlighter Rouge ini bisa ditulis seperti ini

 ```css
 body {
  font-family: 'Lora', 'Times New Roman', serif;
  font-size: 20px;
  color: #404040;
  top:0!important
 }


Akan tampak seperti di bawah ini

```css
 body {
  font-family: 'Lora', 'Times New Roman', serif;
  font-size: 20px;
  color: #404040;
  top:0!important
 }

Atau untuk javascript seperti di bawah ini

 ```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);


Akan tampak seperti di bawah ini

```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);

Mudah bukan? Untuk tanda seperti titik tiga (```) itu menggunakan tombol di pojok kiri atas keyboard di bawah tombol Esc seperti pada gambar di bawah ini.

Jika Anda ingin mengganti theme untuk highlighter, Anda bisa memilih dan menggunakan css theme Pygments DI SINI seperti pada blog ini menggunakan theme Monokai.