Cara membuat code snippets dengan SyntaxHighlighter

SyntaxHighlighter

Hey Gwener's, What's Up!
Membuat artikel yang berhubungan dengan developer atau programer pasti akan mencantum beberapa informasi mengenai coding tertentu. Setiap bahasa pemograman memiliki highlight yang berbeda untuk struktur codingnya. Ini tergantung dari IDE yang digunakan. Namun secara umum biasanya sudah ada standarnya untuk pemwarnaan (highlight) bahasa pemograman.

Memuat coding di dalam artikel justru akan membinungkan jika tidak tepat penempatan dan highlight yang digunakan. Misalnya dengan mendeteksi bahwa code ini adalah sebuah fungsi biasanya programmer akan melihat dari highlight yang digunakan. Bisa juga membedakan antar class satu dengan yang lainnya. Jika code tersebut dibuat tanpa highlight pasti akan membingungkan nantinya.

Nah, langsung saja berikut ada cara untuk membuat code snippsets menggunakan SyntaxHighlighter. Tools ini sangat efisien karena tidak perlu ada konversi text. Semua dilakukan secara otomatis. Sobat hanya tinggal memasukkan code yang ingin ditampilkan pada artikel. Penasaran? baca terus artikel ini.

Instalasi SyntaxHighlighter

SyntaxHighlighter membutuhkan beberapa javasript dan css yang harus di include dalam template blog. Untuk mendapatkannya sobat bisa mendownload file yang dibutuhkan melalui link Download SyntaxHighlighter

File tersebut harus dihosting terlebih dahulu, namun jangan khawatir sobat bisa menggunakan Google code untuk menempatkan file-file SyntaxHighlighter ini. Seperti yang sekarang saya gunakan, sobat bisa menbaca di Hosting gratis dengan google code

Cara pemakaian SyntaxHighlighter

SyntaxHighlighter menyediakan berbagai macam bahasa pemograman untuk dibuat snipsetnya. Untuk melihat lebih lengkap sobat bisa kunjungi SyntaxHighlighter ini selengkapnya.

file core yang harus sobat masukkan kedalam template blog adalah seperti dibawah ini.

Ada 2 cara yang bisa sobat gunakan untuk menempatkan code di artikel sobat. yakni

1. Menggunakan tag pre
   Jika sobat menempatkan code sperti ini.
   

   
    
   
   function ShowGweOne()
   { 
      alert('Hey Gwener's, Whats Up! | By GweOne.com');
   }
   
   
   

   
   Hasilnya akan menjadi seperti ini
   .

   function ShowGweOne()
   { 
      alert('Hey Gwener's, Whats Up! | By GweOne.com');
   }
   

2. Menggunakan tag script
   Tempatkan code sobat seperti contoh ini.
   

   
   Hasilnya akan menjadi seperti ini.
   

Demikian Cara membuat code snippets dengan SyntaxHighlighter ini semoga bermanfaat. Sebagai developer, memposting code yang baik dan benar tentu juga akan memberikan inspirasi bagi yang lainnya. Mari berbagi.