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>&lt;?php query_posts('showposts=5'); ?&gt;
&lt;ul&gt;
&lt;?php query_posts('showposts=5'); ?&gt;
&lt;/ul&gt;&lt;ul&gt;
&lt;?php while (have_posts()) : the_post(); ?&gt;
&lt;li&gt;&lt;a href="&lt;? php the_permalink() ?&gt;"&gt;&lt;? php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;
&lt;?php endwhile;?&gt;
&lt;/ul&gt; </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>

Related Post