Cara Membuat Syntax Highlighting di Blogger Template Viomagz

Halo gank! pada kesempatan kali ini kita akan belajar cara membuat syntax highlighting keren seperti dibawah ini.

pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid $(body.link.color); /* 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
}
pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 14px; /* 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
}

Oke, mungkin beberapa dari kalian mungkin ada yang belum tau ya apa itu syntax highlighting.

Jadi, syntax highlighting merupakan sebuah penamaan untuk menampilkan syntax/code pemprograman pada halaman web atau blog kita. Yang mana kalau kita tidak menggunakan syntax highlighter ini, tampilan postingan atau web kita bisa acak - acakan ketika menampilkan/menyisipkan syntax pemprograman.

Fungsi / Manfaat Syntax Highlighting

• Menampilkan sekaligus berbagi codingan kita di web.
• Membuat tampilan syntax/code yang kita bagikan menjadi lebih rapi.

Lantas bagaimana cara membuat syntax highlighting seperti diatas?

Gampang kok, itu kita tinggal edit saja di bagian cssnya, karena pada dasarnya ini merupakan fitur bawaan dari HTML, selain itu, pada template Viomagz juga sudah di styling namun saya kurang suka stylenya, makanya saya modifikasi sedikit.

Baiklah, mari kita mulai step by stepnya

Oh iya, saran saya lakukan ini di PC atau Laptop ya biar gampang.

1. Pertama, buka Dashboard Blogger > Theme > Edit HTML.
2. pencet tombol CTRL + F untuk memunculkan fitur find supaya makin cepat kita menemukan code yang dicari.
3. ketik pre,code lalu pencet enter dan temukan code berikut ini

4. /* code & blockquote */
   pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;}
   pre{white-space:pre;word-wrap:normal;overflow:auto;}

5. Hapus pada bagian pre,code dan pre lalu ganti dengan code berikut ini

6. pre {
     background-color: #292E34; /* warna background */
     border-left: 5px solid $(body.link.color); /* 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
   }
   pre code {
     color: #BFBF90; /* warna huruf */
     font-size: 14px; /* 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
   }

7. Simpan template
8. Done

Untuk cara pengunaanya, silahkan teman - teman buat postingan baru, lalu ubah mode tulisannya menjadi HTML view

Lalu, jika teman - teman ingin menyisipkan syntax pemrpograman tinggal ketikan masukan kode tersebut dalam <pre><code> masukan disini </code></pre>. Ingat ya! gunakan mode HTML View ketika memasukan code tersebut. contohnya seperti ini

<pre><code>pre {
  background-color: #292E34; /* warna background */
  border-left: 5px dashed $(body.link.color); /* 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
}
pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 14px; /* 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
}</code></pre>

Oh iya hampir lupa!, jika yang ingin disisipkan adalah elemen html, maka kode wajid di parse dulu disini

Tutorial ini memang saya khususkan untuk pengguna template viomagz soalnya penggunaanya banyak termasuk saya hehe. Namun untuk pengguna template lain juga bisa menggunakan cara ini kok, intinya temukan CSS pre dan code lalu ubah dengan code yang saya share diatas.

Sekian tulisan dari saya, semoga bermanfaat :)

Kiss and Hug Shiro Neko :*

Share :