Cara Membuat Syntax Highlighter Versi Iqniel
Bisak kah blogger (blogspot) menggunakan syntax highlighter..
" Jawabanya ,,
Tentu saja bisa , bagaimanakah caranya , apakah blogger blogspot sudah "SUPPORT"
Dengan syntax highligter..
Dalam tutorial ini sudah saya gunakan di blogger blogspot , dan ternyata memang benar , , blogspot pun bisa membuat postingan syntax highlighter,,
Untuk postingan kali ini saya ingin membagikan code syntax highlighter buatan mbak igniel ,, tampilanya pun sangat keren dan menarik ,,, mbak igniel memang jago mengenai koding html..
Ini dia kelebihan menggunakan syntax highlighter versi mbak igniel di blogger.
Kelebihan :
1. Merapikan huruf atau code yang nantinya kita tampilkan di dalam syntax.
2. Membuat pengunjung menjadi lebih ramah , karna dengan tampilanya yang responsive.
3. Mudah di pahami dalam bentuk code nya , sehingga kita bisa mengubah warna.
4. Fast loading.
5. Cocok untuk blog niche tutorial.
Ok ,, langsung tancap saja...
Cara Membuat Syntax Highlighter Di blogger.
1. Buka Menu Blogger.
2. Edit HTML.
3. Cari kode .post-body pre dan post-body pre code. Hapus terlebih dahulu. Jika ada.
4. Cari kode </style> lalu paste kan kode ini tepat di atasnya..
ini code nya gaes....
/* syntax highlighter */
.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.
CATATAN :
jika ingin menulis dalam tag html dan javascript di dalam syntax highlighter maka wajib di parse terlebih dahulu di Blogcrowds agar tidak menghancurkan tampilan.
Cara Menggunakan Syntax Highlighter Dalam Postingan
ini code nya gaes..
<pre><code>
paste kan disini
</code></pre>