Mempercantik Text Area Dengan Modifikasi CSS

 
Selama ini saya ingin menampilkan posting yang dilengkapi code dengan tampilan syntax highlighter. Tetapi setiap kali saya menggunakan plugin yang tersedia di wordpress, selalu saja hasilnya tidak optimal.
 
Sering kali malah merusak tampilan posting saya. Akhirnya saya menemukan trik dari Blog Bang Alwi. Dan bisa membuat text area cantik tanpa plugin.
 
Caranya hanya memodifikasi kode CSS pada tag pre. Coba Anda lihat kode di bawah ini. Silakan copy kode di bawah 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,”LucidaConsole”,monospace;
border:1px solid #9f9f9f;
border-left:5px solid #9f9f9f;
padding:1px 8px 1px 8px;
margin:10px 0}

Untuk membuat tampilan seperti itu, Anda masuk pada editor tampilan tema anda. Buka Stylesheet atau style.css .Jika belum ada tag pre, tambahkan sendiri kode seperti yang di atas. Untuk menampilkan pada posting, anda paste kode yang ingin ditampilkan namun pada edit visual, jangan pada html, agar kode-kode anda nantinya dapat ditampilkan secara visual. Setelah itu pindah ke edit html dan tambahkan kode <pre> di atas kode Anda dan ditutup dengan </pre> di bawah kode Anda.
Jika ingin tampilan yang lain, seperti di bawah, Anda bisa menggunakan kode yang di bawah ini untuk modifikasi tag pre dalam file CSS Anda.

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;
}

 
Bagaimana, Anda tertarik? Selamat mencoba, jika kurang penjelasan saya, silakan pelajari langsung dari inspirator saya di sini: Mempercantik Tampilan Code Snippets Dengan CSS.