Posting Source Code dalam WordPress MUDAH dengan SyntaxHighlighter

Studi Kasus : Menggunakan plugin SyntaxHighlighter untuk menulis kode program dalam postingan WordPress

Requirements : WordPress bundle, download here. and SyntaxHighlighter, download here.

Adakalanya kita akan membutuhkan untuk menulis kode program (sourcecode) dalam postingan di WordPress kita. Hal ini misalkan ketika kita menulis suatu tutorial untuk bahasa pemrograman tertentu. WordPress sendiri sebenarnya telah menyediakan fasilitas untuk menuliskan kode program seperti ini yaitu dengan menggunakan syntax,

<code> your code here </code>

Sebenarnya fasilitas tersebut dapat berjalan dengan baik dalam menampilkan kode anda, namun mungkin anda tidak akan begitu menyukainya karena tampilannya yang… tidak begitu bagus. Kecil kecil, dan berwarna sama untuk semua kode. Seperti ini,

Kalau anda memang tidak menyukai hal tersebut, mungkin anda harus mencoba plugin WordPress satu ini. Syntax Highlighter. Menulis kode program menggunakan plugin ini akan memberi keuntungan diantaranya,

1. Terdapat penomoran didepan setiap baris code –> Hal ini memudahkan apabila anda ingin memberi penjalasan terhadap kode tersebut.
2. Berwarna-warni –> Jadi akan lebih jelas bagian kodenya, mana yang merupakan variabel, mana yang komentar, dll
3. Ukuran font standar –> Enak dibaca. Tidak terlihat njlimet seperti kode program biasanya 😀
4. Bisa dikustomisasi (diatur sendiri) dengan banyak pilihan opsional. Misal, code bisa diberi highlight.

Step 1 : Instalasi Syntax Highlighter

1. Download plugin syntaxhighlighter dari sini
2. Mulai instalasi. Login ke halaman wordpress anda, maka anda akan diarahkan ke halaman dashboard
3. Pilih menu Plugins pada samping kiri halaman WordPress anda.
4. Pilih tab Add New
5. Pada menu Install Plugin, pilih tab Upload.
6. Browse file zip syntaxhighlighter plugin hasil download, kemudian klik Install Now
7. Maka akan ditampilkan konfirmasi sukses instal seperti gambar dibawah.
   
8. Klik Activate Plugin untuk langsung mengaktifkan plugin tersebut.

Step 2 : Penggunaan Plugin

1. Lakukan posting baru dengan memilih menu Posts – Add New
2. Ketikkan contoh berikut ini pada halaman HTML editor (bukan halaman Visual Editor). Lihat gambar dilingkari merah,
   

   

   

3. Sesimple itu saja. Pilih publish dan anda akan melihat tampilan seperti berikut,
   

Untul lebih lengkapnya plugin ini mendukung bahasa pemrograman mulai dari actionscript3, bash, coldfusion, cpp, csharp, php, css, xml, javascript, java, perl, sql.. hingga phyton 😀 untuk lebih lengkapnya plugin ini mendukung bahasa apa saja lihat disini.

Step 3 : Kustomisasi Plugin

Dengan plugin ini, anda juga bisa mens-kustomisasi tampilan source code dengan berbagai pilihan opsional. Salah satu pilihan opsional adalah anda bisa memberi highlight pada baris tertentu pada code. Contoh,

Code –>

Hasil –>

Dan masih banyak pilihan opsional yang bisa anda coba sendiri. Anda bisa mengetahui berbagai pilihan opsional tersebut di sini.

Selamat mencoba 😀 happy WordPress-ing 😀