Syntax highlighter adalah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti igniel.com. Selain itu dapat merapikan huruf dan membuat pengunjung dapat dengan mudah membedakan mana yang merupakan kode CSS, HTML, atau Javascript dengan tulisan biasa.
Cara Memasang Syntax Highlighter di Blogger
Jika sebelumnya sudah ada kode CSS.post-body pre dan .post-body pre code maka hapus dulu agar tidak bentrok. Lalu tambahkan deretan kode berikut "SEBELUM / DI ATAS" </style> / </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
}
menggunakannya syntax highlighter di blog dalam isi postingan tinggal dipanggil menggunakan <pre> <code> seperti contoh dibawah ini
<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>
Jika ingin menulis tag HTML atau Javascript di dalam syntax highlighter maka wajib diparse lebih dulu di Blogcrowds agar tidak menghancurkan tampilan template.
Cara Menggunakan Source Code
CSS tempat nya di dalam tag <style> atau <b:skin>. Contoh:
<style>
/* CSS tempel di sini */
</style>
<script type='text/javascript'>/*<![CDATA[*/
//Tempel Disini Script nya.
/*]]>*/</script>
</body>