Mempercantik Tampilan Code Snippets Dengan CSS
Untuk para blogger yang sering membuat tutorial tentang HTML, PHP, CSS, Javascript dan lain-lain mungkin cukup sering menampilkan Code Snippets di dalam postingan. Untuk pengguna WordPress yang self hosting cukup banyak plugin yang bisa dimanfaatkan untuk menampilkan Code Snippets tersebut, di antaranya yang cukup terkenal yaitu SyntaxHighlighter Evolved.
Namun sudah hampir satu tahun saya sudah tidak menggunakan plugin tersebut, alasan utamanya disamping untuk belajar mengurangi ketergantungan kepada plugin juga supaya tidak memberatkan loading karena biasanya plugin-plugin tersebut akan menambah queri ke database dan juga menambah http request karena sering menyertakan file javascript dll.
Sebagai gantinya saya manfaatkan kode pre yang ada di file css dengan sedikit modifikasi, penambahan background gambar dan lain-lain (jika kode ini belum ada di file css bisa ditambahkan). Kode keseluruhan jadi seperti ini :
pre{ background:#EDEFF3 url(http://i690.photobucket.com/albums/vv270/alwi/pre.png) repeat left top; width:auto; overflow:auto; clear:both; max-height:300px; color:#000000; font:normal 12px/1.5em Monaco,"Lucida Console",monospace; border:1px solid #9f9f9f; border-left:5px solid #9f9f9f; padding:1px 8px 1px 8px; margin:10px 0}
Atau seperti ini :
pre{background: #FFFBAF url(http://i690.photobucket.com/albums/vv270/alwi/bg-note.png) repeat-y left top;
width:auto;overflow:auto;clear:both;max-height:300px;color:#000000;
padding:0 4px 0 35px;margin:5px 5px 5px;line-height:21px;
border-left:1px solid #D5D6D8;
border-top:1px solid #D5D6D8;
color:#000000;font:normal 12px/1.5em Monaco,”Lucida Console”,monospace;
box-shadow:4px 5px 4px #999;-moz-box-shadow:4px 5px 4px #999;-webkit-box-shadow:4px 5px 4px #999;
}
Untuk penerapannya, di dalam editor postingan copy paste atau tulis kode dalam visual mode kemudian pindah ke mode HTML, biasanya kode tersebut akan secara otomatis dikonversi ke mode HTM, setelah itu tambahkan kode <pre>
di depan code snippets yang akan ditampilkan dan akhiri dengan </pre>
. Contoh ketika ingin menampilkan kode untuk menampilkan recent post kode keseluruhan jadi seperti ini :
<pre><?php query_posts('showposts=5'); ?> <ul> <?php query_posts('showposts=5'); ?> </ul><ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<? php the_permalink() ?>"><? php the_title(); ?></a></li> <?php endwhile;?> </ul> </pre>
Hasilnya akan seperti ini :
<?php query_posts('showposts=5'); ?> <ul> <?php query_posts('showposts=5'); ?> </ul><ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<? php the_permalink() ?>"><? php the_title(); ?></a></li> <?php endwhile;?> </ul>
itu untuk versi parse html nya ya mas diantara kode pre itu..
Reply
Untuk kode css biar tampilanya bisa cantik gitu gimana mas…
Reply
dHaNy Reply:22-03-2011 at 08:06
Ealah tak kira itu contoh ternyata itu kode cssnya… maaf mas… :D
Reply
wow aku kagum themenya wapik tenan wawawawa
sori mas lagi baca-baca dulu artikel mas yang sebelumnya komentarnya gak nyambung
salam kenal aja, suwun
Reply
saya msh menggunakan plugin syntax mas,loading emg dkit berat tpi lbh colorfull :D
Reply
Alwi Reply:22-03-2011 at 14:24
Tampilan emang full color jika pakai plugin tsb, tapi saya lebih memilih kecepatan loading, makanya saya copot plugin tsb, walau sebenarnya tanpa pluginpun bisa juga dibuat full color tapi implementasinya rada ribet alias kurang praktis apalagi kalau harus pakai javascript agak saya hindari heeeee …
Reply
Inilah kelebihan blog-nya bung Alwi. semua diutak-atik sendiri, dengan meminimalkan penggunakaan plugin. Hasilnya, wuss..wuss..wussss !
Reply
nice share…
keep posting…
Reply
Wew, keren mas..
ohya, mas ada berapa plugin yang diinstal di blog ini? pingin diet nih…
kagum sama kecepatan lodingnya.. :D
Reply
Alwi Reply:1-04-2011 at 17:13
Sekarang tersisa 9 plugin dari hampir 17 plugin yg pernah saya install dan rencana ke depan mungkin masih ada 3 plugin yg akan saya pangkas dan fungsi2nya diganti dg coding tanpa plugin
Reply
djawa Reply:6-12-2011 at 14:28
salut sama blognya., pada cepet lodingnya.,
Reply
kode snipets tu apa mas????
Reply
Tulisan di code snip kadang terlalu kecil -.-”
saya jg lgsg edit CSSnya krn mininya tulisan di Code Snip
Reply
kagak berhasil pak pake kode itu gak tau kenapa :(
Reply
D3NYC4HYOE Reply:22-06-2011 at 04:20
alhamdulillah sudah berhasil saya terapkan pak,
tank’s sharingnya, saya perlu membaca berulangkali agar berhasil saya terapkan :D
Reply