Cara Mudah Membuat Syntax Highlighter di Blogger
Pengertian Syntax Highlighter
Syntax Highlighter adalah fitur khusus yang menyoroti penulisan kode bahasa pemograman tertentu untuk mempermudah pengunjung mengenali keseluruhan isi kodenya. Umumnya sering ditemui pada blog toturial seperti Kompi Ajaib, Arlinadzgn, igniel dll yang membahas tentang toturial blog.
Sama hal dengan Anda, jika blog Anda membahas tentang toturial blogging dan sering membagikan source code maka tidak ada ruginya jika membuat syntax highlighter di blogspot dengan mudah seperti berikut ini.
Baca juga : Cara Mudah Menemukan dan Mengedit kode HTML Template di Android
Selain bisa memperindah tampilan barisan kode dalam postingan blog, fungsi syntax highlighter juga membuat pembaca merasa lebih nyaman dalam membaca isi konten blog.
Cara membuat syntax highlighter di blog
1. Log in ke dashboard Blogger - Tema - Klik menu Titik 3 - Edit HTML
cari kode css .post-body pre dan .post-body pre code jika ada silahkan hapus terlebih dulu supaya kode nya tidak bentrok, jika tidak ada silahkan ke tahap selanjutnya
2. Tempatkan kode berikut ini di atas kode </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
}Jika Anda ingin ber eksperiment dengan warna berbeda silahkan di ubah tulisan yang saya beri warna.
Lihat warna lainnya di : Color Palette untuk HTML
Baca Juga : Cara Gampang memasang Iklan Adsense di Tengah Postingan
Cara menggunakan syntax highlighter di blogspot
Untuk mengaplikasikan syntax highlighter pada postingan blog tambahkan kode <code> dan <pre> pada mode HTML, sebelumnya kode yang ingin dimasukan harus di parse terlebih dulu. Seperti contoh di bawah ini.
<pre><code> Masukan Kode HTML, CSS dan JavaScript yang sudah di parse</code></pre>Untuk demo syntax highlighter silahkan lihat pada postingan diatas
Demikian cara mudah membuat syntax highlighter di blogger, terimakasih untuk mbak igniel sudah memberikan kode syntax highlighter sederhana, tidak memerlukan banyak script dan tentunya lebih ringan.