Cara Membuat Sintax Highlighter Di Blogger
Postingan kali ini masih berkaitan dengan komponen-komponen untuk mempercantik tampilan postingan blog, dimana kali ini saya akan membagikan tutorial tentang bagaimana menambahkan kode HTML, CSS, Javascript ke dalam sebuah postingan di blog.
Kode atau syntax sebetulnya bisa langsung saja kita tempel dalam mode compose di postingan blogger dan akan melakukan parsing secara otomatis, namun tampilannya akan standar-standar saja.
Yang dimaksud dengan Syntax highlighter itu adalah sebuah text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali keseluruhan kodenya. Umumnya ditemukan pada blog bertema tutorial seperti blog tamboanman ini. 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 Sintax Highlighter di Blogger
Apabila dalam CSS template sobat sudah mempunyai kode .post-body pre atau post-body pre code sebaiknya dihapus terlebih dahulu untuk menjaga agar tidak bentrok dengan kode yang akan dipasang.
Pada dashboard blog sobat klik Tema » Edit HTML. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </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 Sintax Highlighter dalam postingan blog sobat cukup memanggilnya dengan cara penulisan tag pembuka <pre> dan <code> dan tag penutupnya </code> dan </pre>, Seperti terlihat pada contoh dibawah.
<pre><code>
<!-- Masukkan semua kode Javascript, HTML atau CSS disini -->
</code></pre>
Ada baiknya sebelum memasukkan javascript atau tag HTML kedalam sintax highlighter kodenya diparse terlebih dahulu, untuk menghindari kerusakan pada tampilan template.
Saya lebih suka dengan versi sintax highlighter yang ini walaupun tulisannya tidak warna warni tapi yang ini jauh lebih ringan dibanding yang warna warni yang menggunakan javascript.
Demikina sobat pembahasan Cara Membuat Sintax Highlighter di Blogger, semoga postingan ini bermanfaat bagi sobat semua dan selamat mencoba.
