Cara Membuat Syntax Highlighter di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Syntax Highlighter" yang sangat berguna untuk menyisipkan sebuah Source Code atau Script pada sebuah artikel yang sedang dibuat seperti pada Blog ini tentu nya ini "Pure CSS" jadi tidak akan memberatkan blog kalian karena tidak ada unsur Javascript.

Dengan menggunakan "Syntax Highlighter" ini dapat memperpendek isi dari Source Code yang kalian bagikan untuk pengunjung agar tidak terlihat panjang dengan begitu akan membuat pengunjung menjadi lebih nyaman karena tidak perlu scroll yang panjang cukup double klik / tap dengan mudah di copy.

Bagaimana tampilan nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Syntax Highlighter" tersebut dibawah :#

See the Pen
Syntax Highlighter by Rian_kuno (@rian_kuno)
on CodePen.

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Syntax Highlighter di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <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
}

4. Tambahkan kode berikut saat mau membuat artikel pada Tab "HTML"

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

5. Simpan Tema
6. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#