Tips Ngeblog #5 Code Highlighter


Kali ini saya ingin share bagaimana caranya menggunakan plugin code highlighter, dimana plugin ini berfungsi untuk menampilkan source code di postingan artikel kita. Misalnya source code html, php, javascript, css, xml, dll. Default tampilannya seperti warna editor di dreamweaver.

Bagaimana caranya?

Gampang banget, bagi kalian yang sudah mengenal apa yang namanya shortcode di WordPress pasti langsung bisa.

Tempatkan kode ini di dalam editor artikel :

[*code type=codetype] codeblock [/code] (hilangkan tanda *)

Untuk codetype, kamu bisa mengisikannya dengan jenis bahasa pemrograman yang akan ditampilkan, misalnya : css, php, html, dll.

Hasilnya akan seperti ini :

CSS

[code type=css]

/* Comment */

@import url(“main.css”);

h3, .head2 {

font-family: “Sans-Serif”;

font-weight: bold;

color: #336699 !important;

}

@media screen, print {

pre { margin: 0px 10px 10px; }

h1 { font-size: 14px; padding-top: 10px; }

}

[/code]
(x)HTML
[code type=html]

<style type=”text/css”> headline {font-size: 24pt;} </style>

<!– Comment –>

<td><a href=”link”>Plain Text &nbsp;</a>

<img src=”image” alt=”” width=”15″ />

<form action=”action.pl”>

<input type=”submit” value=”Press Me” />

</form>Text</td>

[/code]

Selamat mencoba! 😉


Leave a Reply