Membuat Syntax Highlighter Ringan dengan CSS di Blogger - Syntax Highlighter merupakan tempat/area yang menyoroti kode program dimana dipasang pada postingan blogger, agar pengunjung bisa mengenali mana kode program dan mana tulisan biasa. Cara ini biasanya di pasang untuk blog yang berisi tutorial - tutorial program. Berbeda apabila tidak dipasang syntax highlighter, pengunjung besar kemungkinan akan bingung karena tidak bisa mengenali mana kode program dan mana tulisan biasa, selain itu nilai estetika dan kerapiannya berkurang. Karena tentu kode program yang akan kamu share tidak selamanya pendek dalam artian hanya satu dua baris saja, mungkin bisa lebih dari sepuluh baris, dari situ akan membuat pengunjung pusing membaca di blog kamu.

Jika blog kamu isi artikelnya berisi tutorial kode program, yang tentu nya harus membagikan secara langsung di dalam postingan tersebut. Berarti kamu tidak salah membuka artikel ini, lanjutkan saja membacanya.

Artikel lainnya : Cara Mudah Memasang Parse HTML di Blogger

Syntax Highlighter ini kalo kata saya sangat ringan karena hanya HTML dan CSS saja, yang tidak akan membuat blog kamu menjadi berart setelah memasang syntax highlighter ini. Selain itu, dari sisi estetika desain nya cukup bagus dan soft.

Cara Memasang Syntax Highlighter di Blogger

Sebelum memasang syntax highlighter ini di cek dulu apakah terpasang kode .post-body pre dan .post-body pre code, lebih baik di hapus dulu.

Baik sekarang masuk ke teknis memasang syntax highlighter nya di blogger.

• Masuk ke blog, lalu ke menu Tema dan pilih Edit HTML
• Copy kode dibawah ini dan paste kan diatas kode ]]></b:skin>

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

Terakhir tempatkan kode di bawah ini pada postingan kamu, pada menu HTML

<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>

Jika tidak berhasil, pada kode CSS diatas bisa di hapus kode .post-body nya saja.
Bagaimana mudah bukan Membuat Syntax Highlighter di Blogger nya, ini dibuat pure CSS dan HTML saja, apabila ingin membuat tulisan nya ada warna - warni nya bisa dibantu dengan JS, tapi kemungkinan akan agak berat pada saat membuka postingan.