Membuat Syntax Highlighter Di Blog Menggunakan CSS - WESTOIKU

Pada postingan sebelumnya ,, kami sudah pernah menulis artikel tentang syntax highlighter..

Jika ingin memasang di blog sobat bisa ikuti panduan di bawah..

Disini kami menampilkan cara membuat syntax highlighting punya mbak igniel..

Selain tampilan yang keren dan menarik ,,, juga tergolong sangat responsive,,

 Syntax Highlighter adalah ,, text editor yang menyoroti penulisan markup kode pada halaman web untuk mempermudah pengunjung mengenali kodenya. Biasanya ditemukan pada blog yang membahas atau niche tutorial..

Tampilan Syntax highlighter bisa di buat warna warni dan bisa di pasang tombol copy , agar pengunjung bisa dengan mudah menyalin kodenya..

Untuk tutorialnya sudah saya buatkan DISINI

Di pembahasan kali ini yaitu hanya dengan versi satu warna saja.

Jika blog sobat membahas tentang tutorial dan sering membagikan source code ,, maka cara ini sangat cocok buat sobat. Karna disini hanya menggunakan CSS saja..

Cara Membuat Syntax Highlighter Di Blogger

Jika sebelumnya template sobat sudah pernah memasang .post-body pre dan

.post-body pre code maka hapus dulu supaya tidak bentrok ,,lalu tambahkan kode berikut tepat di atas code </style>

1. Buka Akun Blogger.

2. Pilih Thema ,, Edit HTML

Salin kode berikut

ini code nya gaes..

/* syntax highlighter westoiku */
.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
}

selesai Klik Simpan

Cara Menggunakan Syntax Highlighter Di Blogger

Untuk penulisanya masuk ke mode html..

Tambahkan kode seperti berikutt..

Cara penulisan

ini code nya gaes..

<pre><code>
   <!--Masukan Kode Di Sini-->
</code></pre>

pratinjau , lalu publish.