SAID BAHTA - Instalasi Rouge Highligter untuk Jekyll

Instalasi Rouge Highligter untuk Jekyll

jekyll 08 August 2018

Rouge highlighter merupakan pewarna kode program bawaan jekyll yang mengenali kurang lebih 135 bahasa komputer. Tulisan ini merupakan dokumentasi bagaimana cara menginstal, mengkonfigurasi dan menggunakan rouge highlighter.

Apa itu highligter?

coba perhatikan kode program dibawah ini. Tanpa rouge highlighter :

statusApp() {
	if [[ $APP_STATUS = 1 ]]; then 
		echo "$APP_NAME is running with PID : $OLD_PID, OLD_PID : `cat $FILE_PID` ."
	else 
		echo "$APP_NAME is not running."
	fi
}

bedakan dengan yang sudah menggunakan rouge highlighter :

statusApp() {
	if [[ $APP_STATUS = 1 ]]; then 
		echo "$APP_NAME is running with PID : $OLD_PID, OLD_PID : `cat $FILE_PID` ."
	else 
		echo "$APP_NAME is not running."
	fi
}

selain karena kode program terlihat lebih indah dengan warna, menggunakan kode higlighter juga berfungsi untuk kemudahan dalam mengidetifikasi bagian-bagian kode program.

Instalasi rouge

Instalasi dilakukan melalui command line interface, dengan menggunakan perintah :

gem install rouge

* karena rouge merupakan bawaan jekyll, maka langkah instalasi ini bisa di lewatkan

Konfigurasi

Ubah konfigurasi yang ada pada fail _config.yml dengan menambahkan baris berikut :

highlighter: rouge

Setelah highlighter: rouge ditambahkan, langkah selanjutnya adalah memilih tema atau style rouge sesuai dengan yang diinginkan.

Untuk melihat daftar tema atau style rouge yang tersedia gunakan perintah :

rougify help style

tema yang tersedia : base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, colorful, github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, molokai, monokai, monokai.sublime, pastie, thankful_eyes, tulip

Pilih salah satu tema yang tersedia kemudian konfersi menjadi fail css ke dalam folder asset.

rougify style pastie > assets/css/syntax.css

Setelah fail css dari tema rouge dikonfersi, tambahkan tema tersebut ke dalam kode html diantara tag <head> dan </head>.

<link rel="stylesheet" href="/blog/assets/style/css/syntax.css">

Menggunakan rouge

Untuk menggunakan rouge highlitter dalam menulis potongan kode gunakan {% highlight HTML %} dan akhiri dengan {% endhighlight %}, seperti contoh berikut :

{% highlight HTML %}
    //source code masukkan disini
{% endhighlight %}

Referensi :

[1] Jekyllrb
[2] Syntax Highlighting in Jekyll With Rouge
[3] Add Syntax Highlighting to your Jekyll site with Rouge
[4] Bahasa yang disupport Rouge