Menampilakan source code dengan SyntaxHighlighter pada postingan blogger

Kali ini saya akan ingin membagi ilmu tentang SyntaxHighlighter milik Alex Gorbatchev. SyntaxHighlighter merupakan librari javascript yang dirancang dengan fitur seperti teks editor untuk menampilkan teks yang seperti source code dan menyediakan warna-warna tulisan yang berbeda berdasarkan bahasa pemrograman apa yang akan ditampilkan dengan memeriksa tag-tagnya.
Ketika para penulis blog yang membuat suatu tulisan dan ingin menyisipkan semacam source code ke dalam tulisannya SyntaxHighlighter inilah yang sangat cocok digunakan untuk memperindah tampilan source code pada tulisan. Contoh tampilannya seperti berikut ini.

public class mainMain {
  public mainMain() {
  }
}

Pertama-tama masukkan SyntaxHighlighter ke dalam template blogger. Copy code di bawah ini.

Paste pada template blog (Template Menu -> Edit HTML) tepat di atas tag </head> seperti gambar ini.

Selanjutnya simpan template tersebut.
Kemudian cobalah membuat tulisan dengan menggunakan fitur SyntaxHighlighter.
Ada dua cara untuk menggunakan fitur tersebut.
Cara pertama dengan tag <script> :

Cara kedua dengan tag <pre> :

  //Komentar
  public class coba {
    public coba() {
    }
 
    public void Method() {
    /* Komentar lainnya
    dengan lebih dari satu baris */
    int a = 1;
    }
  }

Dan keduanya memiliki hasil yang sama seperti code ini.

//Komentar
public class coba {
  public coba() {
  }

  public void Method() {
  /* Komentar lainnya
  dengan lebih dari satu baris */
  int a = 1;
  }
}

Terakhir untuk pengaturan tampilan cukup menimpa css-nya saja. Contoh code untuk merubah wana baris pertama dan kedua pada tampilan SyntaxHighlighter seperti ini.

Code di atas juga dimasukkan ke template blog sebelum tag </head>. Jika anda ingin mengatur tampilan yang lain pada SyntaxHighlighter, anda bisa mengunjungi halaman Thema Default SyntaxHighlighter untuk melihat variabel-variabel apa saja yang digunakan untuk mengatur tampilannya.
Sekian.. Semoga bisa membantu...