Syntax Highlighter merupakan tempat untuk menempatkan suatu markup kode didalam sebuah web, dengan tujuan mempermudah pengunjung mengenali seluruh kode.Biasanya penempatan markup kode ini sering digunkana oleh web tutorial seperti kenscripts ini.
Baca Juga: Membuat Judul Halaman Blog Bergerak Di Semua Browser
Nah cara membuat Syntax Highlighter untuk blogger ini sangatlah mudah dengan bantuan CSS kita dapat membuat Syntax Highlighter yang menarik. Pada umunnya Syntax Highlighter akan membuat beberapa huruf menjadi warna-warni, tetapi karena kita hanya menggunakan CSS maka warnanya akan default tergantung kode CSS yang kaan digunakan.
Baiklah langsung saja berikut cara membuat Syntax Highlighter dengan CSS untuk blogger.
1. Kita cek terlebih dahulu dalam template yang kita gunakan apakah terdapat kode CSS seperti dibawah? jika iya maka HAPUS kode tesebut agar naninya tidak bentrok.
.post-body pre
.post-body pre code
2. Salin dan paste kode CSS dibawah tepat diatas tag </head>
<style>
.post-body pre {
background-color: black; /* warna background */
border-left: 5px solid blue; /* 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: white; /* 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
}
</style>
3. Done dan simpan
Cara Menggunakan Syntax Highlighter di blogger
Cara penggunaan Syntax Highlighter ini sangatlah mudah, saat anda akan membuat markup kode HTML, CSS, Javascript, dan sebagainya anda hanya harus mengurung kode markupnya didalam tag Syntax Highlighter seperti berikut
<pre><code>
<!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</code></pre>
Baca Juga: Membuat List Anime Responsive untuk Blogger
Peringatan:
Saat menulis markup kode HTML, dan Javascript diharuskan memparsenya terlebih dahulu agar tidak bentrok dengan kode template anda. Parse sini.
Dengan demikian berakhir sudah tutorial membuat Syntax Highlighter untuk blogger dengan desain CSS menarik.
Terima kasih telah berkunjung.
Demo