begini Cara Membuat Syntax Higlighter Di Blogger | Pemula Wajib Tahu

Iptahudin – Syntax Highlighter adalah sebuah kotak yang berisi markupkode di halaman postingan agar memudahkan pengunjung membedakan yang mana text dan yang mana kode. Syntax highlighter ini sering anda temui di blog yang membahas seputar tutorial CSS maupun HTML, dan yang sekarang anda liat syntax highlighter ada di blog ini

Pada biasanya syntax highlighter ini dapat mempercantik tampilan markup kode anda, sehingga tampilan kode yang telah anda buat tidak berantakan dan itu akan membuat pengunjung tidak nyaman dan blog anda terasa tidak professional. Maka dari itu syntax highlighter wajib dipasang untuk blog tutorial CSS maupun HTML

Syntax highlighter yang akan saya berikan ini tidak akan memberatkan loading blog anda, jadi anda tidak perlu ragu untuk memasang syntax highlighter yang saya berikan. Dikarenakan script yang saya berikan hanya menggunakan CSS. Pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Syntax Higlighter Di Blogger

Cara Membuat Syntax Highlighter Di Blogger

1. Login ke akun Blogger anda

2. Kemudian anda klik menu Tema > Edit HTML

3. Cari kode ]]></b:skin> kemudian letakkan kode yang sudah saya berikan dibawah ini tepat diatas kode tersebut

  /* Syntax Higlighter By www.gudangcaraque.eu.org */
  .post-body pre {
  background-color: #292E34; 
  border-left: 5px solid #008c5f; 
  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; 
  font-size: 12px; 
  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. Simpan Tema

Cara Menerapkan Syntax Higlighter

1. Cari menu Postingan > Postingan Baru

2. Kemudian klik menu HTML ( ~~Jangan Compose~~ ) Jika tampilan blog terbaru klik menu Tampilan HTML

3. Setelah itu panggil syntax highlighter menggunakan code <pre><code> dan tutup dengan </code></pre> seperti kode dibawah ini

<pre><code>
Kode yang sudah anda parse, letakkan disini!
</code></pre>

4. Selesai

Demikian artikel saya tentang Cara Membuat Syntax Highlighter Di Blogger, jika anda bertanya kenapa kode di dalam syntax highlighter itu tidak warna warni? Karena saya hanya menggunakan CSS, berbeda dengan syntax highlighter di blog lainnya yang sudah menggunakan warna warni. Semoga dengan adanya artikel ini bisa membantu anda untuk memasang syntax di blog anda, semoga bermanfaat.

VIDEO DEMO SLIDE POWERPOINT + FREE DOWNLOAD