Sunday, December 1, 2013

Beberapa situs untuk highlighter syntax buat blogger.com


Buat yang suka bikin tutorial pastinya butuh banget pembeda antara text untuk menjelaskan dan syntax program yang kita butuhkan. Mudahnya mungkin menggunakan "quote", tapi kalo di entry post blogger (dan kayaknya semua blog) susah banget memasukkan beberapa karakter yang digunakan oleh bahasa pemrograman, harus kita encode menjadi karatker HTML, kalo nggak ya nggak bakal kebaca.

Gue juga udah mulai punya waktu senggang buat nulis tutorial, nulis apa aja yang gue tau soal dunia IT, meski masih terhitung newbie dan belum punya banyak ilmu. Tapi seenggaknya gue mencoba dan menjadi pengingat buat gue sendiri akan teknik-teknik yang mulai gue kembangkan dan gue dapet dari orang lain. Balik ke topik yang tadi, gue mulai nyari-nyari yang namanya software untuk highlighter syntax.

Kemaren yang pertama gue temui adalah dari (om) Gorbatchev di http://alexgorbatchev.com/ , highlighter tersebut dibangun dari beberapa bahasa pemrograman (javascript lebih banyak sih), jadi kita tinggal download atau minjem di hostingan beliau script-script tersebut, tinggal copy paste di template dan voila! Script kita yang didahului dengan tag pre akan di highlight di postingan.


Tapi sialnya ya itu deh, gue bingung dengan penempatan beberapa parameter di template blogger gue. Jadinya ya berantakan gitu tiap kali mau masukin entry baru. Dibagian compose nggak mau "word wrap" mode on, jadi gue nulis baris ya lolos aja gitu kesebelah kanan. Hahaha. Gue yang ngerasa kurang nyaman akhirnya nyari-nyari lagi syntax highlighter yang lain dan ketemu lah di http://hilite.me . Berbeda dengan yang sebelumnya, hilite.me nggak pake ngedit template blogger dan hanya mengubah karakter-karakter spesial dalam bahasa pemrograman menjadi karakter html.

Cara menggunakannya cukup mudah (meski itungannya cukup merepotkan disisi kita mesti bolak-balik antara blogger.com - hilite.me, sih), kita tinggal memasukkan script seperti gambar berikut dan menekan tombol highlite! dan script kita secara otomatis akan di diubah kedalam format seperti pada kolom hasil proses HTMLnya seperti contoh gambar berikut :

hilite.me


Satu lagi ada github.com. Prinsipnya sama dengan hilite.me, tapi punya kelebihan tersendiri seperti kita bisa menyimpan script-script tersebut untuk digunakan nanti plus mengajak teman yang sudah tergabung di github.com untuk mengerjakan script tersebut sebagai proyek kroyokan. Hehe. Ini kelebihan yang bagus untuk programmer yang punya team untuk mengerjakan sebuah proyek tanpa harus copy paste script yang sedang dikerjakan plus tiap perubahan dari user akan disimpan perbedaannya kedalam sebuah log sehingga nggak perlu takut kalo misalnya nanti script tersebut rusak karena masih ada versi dan revisi sebelumnya.

Meski kelebihannya enak banget, tapi ngenesnya ini gist di Github.com nggak mewarnai syntax (harusnya bukan dibilang syntax highligter sih yak. haha), tapi hanya menyediakan form buat script nemplok di post. Sangat disayangkan memang, tapi gue rasa ini cukuplah, ketimbang pake tag quote HTML. Hehe.

Kalo nggak mau sign-up menjadi member github juga nggak perlu khawatir sih. Untuk membagi script secara publik (atau Gist Mode), Github menyediakan mode anonymous untuk highlight syntax yang kita inginkan dengan catatan, tidak bisa diedit oleh team (ya karena nggak jadi member itu loh!), dan gue rasanya cuma bisa untuk script yang ukurannya kecil karena kalo yang ukurannnya gede mesti bayar. Haha.

Untuk memasukkan scriptnya ke postingan di blogger justru lebih gampang di github daripada hilite.me karena script tersebut cukup kita "embed" dengan link yang disediakan github, jadi nggak perlu copy paste semua script hasil encode ke HTML seperti gambar dibawah ini  :



Oh iya, embed dari github berupa file js seperti contoh dibawah ini :



Dengan kelebihan dan kekurangan masing-masing syntax highlighter, untuk kedepannya gue pake yang dari github.com aja (meski nggak berwarna. Hiks!)

No comments:

Post a Comment