Membuat Syntax Highlighter di Blogger Dengan CSS

Table of Contents

Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog yang bertema tutorial.

Selain itu dengan mengunakan syntax highlighter dapat merapikan huruf dan membuat pengunjung dapat dengan mudah membedakan mana yang merupakan kode CSS, HTML, atau Javascript dengan tulisan biasa.

Pada Umumnya Syntax highlighter dapat membuat huruf menjadi lebih dari satu warna. Tapi pada tutorial kali ini dibuat satu warna saja karena hanya dibuat menggunakan CSS.

Jika blog atau website Anda bertema tutorial dan sering membagikan source code, maka tidak ada salahnya membuat Syntax highlighter di situs Anda hanya dengan menggunakan CSS seperti dibawah ini.

Jika sebelumnya sudah ada kode CSS .post-body pre dan .post-body pre code maka hapus terlebih dahulu. Lalu tambahkan kode berikut sebelum </style>.

.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
}

Untuk menggunakan Syntax Highlighter di blog dalam isi postingan cukup dipanggil menggunakan <pre> dan <code> seperti contoh berikut:

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

Note: Untuk menulis tag HTML atau Javascript di dalam syntax highlighter parse terlebih dahulu di blogcrowds agar tampilan template tidak rusak/error.

Memasang syntax highlighter di blog pure CSS memang tidak membuat huruf menjadi lebih dari satu warna seperti text editor aslinya.

Jika ingin tampil dengan lebih dari satu warna Anda harus menggunakan JavaScript lagi atau versi ini jauh lebih ringan karena tidak menggunakan script.