Syntax Highlighter

Syntax Highlighter.
Udah pada denger belum tool buat blog atau website yang satu in ?? :)
Pasti Sobat Teens blogger yang hobby maen sama blog udah ga asing lagi dong dengan tool ini hhe :p iya ngga ?

Yups .......
Bener banget sobat.

Tools ini berguna banget buat blog programmer - programmer yang pengen share source code nya secara langsung, dengan kata lain kode sobat di buat atau dijadiin open source. Nanti apabila di sebuah blog menggunakkan Syntax Highlighter ini dan untuk menuliskan kode program secara rapi, tidak perlu repot - repot mengatur manual seperti memakai quoted lah, buat lagi css baru lah. Script ini menggunakkan JavaScript, dan CSS saja. Jadi nanti tinggal copy paste aja kode syntax apa yang sobat teens pengen di blog yang sobat punya. Namun perlu di ingat, untuk penggunaan Syntax Highlighter ini, source JavaScript dan CSSnya harus di load secara external.
Berbeda dengan website yang sobat kelola, kalian bisa mendownload kode - kode JavaScript dan CSS yang kalian butuhin. Setelah itu kalian upload ke direktori lokal website, langsung deh, load lokal juga JS dan CSSnya. heheheh :D
Simple kan ??

Gimana caranya menggunakkan Syntax Highlighter ini di blog ya ??
Gampang banget sobat. Ikutin langkah - langkah di bawah ini :) (Khusus pengguna blogger)

1. Pergi ke http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator dulu bro :D
2. Setelah itu pilih tema apa yang kalian inginkan (kalo ini sih bisa kalian sesuaikan dengan warna yang cocok untuk blog kalian), lalu pilih brush untuk bahasa pemrograman apa yang kalian butuhkan dengan memberi tanda cek atau centang pada bahasa pemrograman yang kalian pilih.
3. Terus, setelah kalian pilih bahasa programnya, tekan tombol Generate untuk menggenerate javascript dan css dari bahasa pemrograman yang kalian pilih sebelumnya.
4. Copy kode CSS dan JavaScript yang tertera di textarea hasil dari generated tadi pada notepad kalian.

Nah langkah di atas sudah pada ngerti dan sudah selesai dilakukan kan ya :D

Sekarang gua kasih tau cara buat nempelin di blog kalian nih sobat, ikutin cara - cara di bawah ini ya:

1. Sekarang kalian harus login dan masuk ke blog masing - masing.
2. Setelah itu masuk ke tab Templates → Edit HTML
3. Tekan tombol "Cadangkan atau Pulihkan" yang berada di pojok kanan atas.
4. Download template kalian sebelum kalian melanjutkan langkah selanjutnya. Hal ini berguna apa bila kalian mengalami kesalahan saat merubah atau edit template, kalian bisa mengembalikan template kalian seperti semula atau bahasa kerennya recovery lagi nih sobat.
5. Udah selesai kan ?? Ok, Sekarang selanjutnya cari tag HTML </head> kalo bingung carinya gunakkan Ctrl+F supaya lebih mudah. Copy kode yang telah di generate yang berada di notepad kalian tadi, lalu Paste di atas kode </head> tepat.
6. Klik tombol "Simpan Perubahan" dan Finish !!!!!!!! :D

Nah untuk langkah install kode script udah selesai nih. Terus di cara pakeknya gimana ??

Hehehehe :p

Sabaarrrrrrr. Nih caranya juga gua kasih tau:

• Buka halaman tambah posting baru di blog kalian.
• Lalu pindah ke mode HTML(sebelah "Compose"), tombol ini berada di pojok kiri atas.
• Ketikkan kode html seperti di bawah ini:
  

  <pre class='brush:[brushname];'>
   <!--Tulis kode kalian di dalam sini (harus menggunakkan HTML escape)-->
  </pre>
  

• Selesai. Udah kan :) Gampang kan Sobat.

Oh iya hampir lupa. Kode di atas harus ditulis dengan HTML escaped. Maksudnya di-decode biar tanda kurung lebih besar ">" menjadi "&gt;" dan kurung lebih kecil "<" menjadi "&lt;". Supaya tidak terjadi error saat nanti di simpan. Mungkin biar systemnya nggak pusing - pusing parse kode kali yaaa. hha :D

Untuk membuat tag program kalian supaya menjadi HTML escape kalian bisa mengunjungi alamat ini http://www.way2blogging.org/blogger-tools/html-entities-encoder-decoder.

Oopsss... hampir lupa sobat, iya itu yang di tag "<pre class="brush:[brushname]" silahkan kalian ganti [brushname] dengan nama brush yang kalian butuhkan. Contohnya sql, html, php dan lain - lain.
Untuk melihat apa saja daftar bahasa yang tersedia, kalian bisa melihatnya di sini.

Hehehe :D

Gimana nih sob mudah dan simple kan :)

Sekian, untuk posting tentang Syntax Highlighter kali ini. Semoga bermanfaat bagi Sobat Teens semua.

Mungkin ada pertanyaan atau terjadi kesalahan saat memasang kode Syntax Highlighter kalian ???

Silahkan tulis di kotak komentar di bawah ini :)
Gue dengan senang hati akan menjawab pertanyaan kalian sob.

See u next time ...