Home » CSS » Mempercantik Tampilan Code Snippets Dengan CSS

Mempercantik Tampilan Code Snippets Dengan CSS

21 Mar. 201120 comments
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>
Mudah-mudahan artikel tentang Mempercantik Tampilan Code Snippets Dengan CSS ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Mengganti Font Dalam Postingan
  2. CSS3, Sonic Mengejar Bola
  3. Custom CSS Per Post
  4. Membuat Text Gradient Dengan CSS
  5. Tips dan Tricks CSS (Cascading Style Sheets)
  6. Yesterday, The Beatles
  7. Membuat Menu Navigasi Dengan CSS3
  8. Modifikasi Tampilan Halaman Daftar Isi
  9. Main Remi Bersama Top Komentator
  10. Border Style, Border Width, Border Color
  1. 6-12-2011 at 14:26 | #1

    mas alwi., sy kembali lagi kesini sekedar baca2 hehe., maaf mas saya newbe,Snippets itu apa ya.,? dan apa pungsinya.,?

    Reply

  2. 14-2-2012 at 17:12 | #2

    aduh-aduh, tiap kali aku mencari sesuatu ada… aja di blog Bang Alwi. ini sangat menarik sebagai pengganti highlighter. keren dah Abang selalu memberi inspirasi…

    Reply

  3. 13-5-2012 at 07:00 | #3

    Thanks informasinya juragan, tapi ane mau tanya ni, knp di ane codenya g berfungsi? mohon bantuan ya terima kasih sebelumnya.

    Reply

  4. 16-8-2012 at 09:46 | #4

    wah, makasih kang tutorialnya, ini yang saya cari sejak dulu…

    Reply

  5. 5-7-2016 at 00:01 | #5

    Makasi gan atas bantuannya …..

    Nomor Cantik
    http://AndikAnis.com

    Reply

Comment pages
1 22277
4+5=? (Wajib diisi)