Posting Source Code di WordPress

Beberapa waktu lalu ketika hendak memposting artikel yang berisi listing program atau source code, saya sempat kebingungan bagaimana cara menampilkan kode-kode tersebut di WordPress.com. Sebelumnya saya menambahkan [code][/code] di listing program/source code yang saya buat. Namun, jika kita lihat kemungkinan besar pembaca kurang nyaman dalam melihat source code tersebut. Akhirnya tidak dapat memahami source code tersebut :).

Setelah searching di Google, ternyata di WordPress.com terdapat fitur untuk menampilkan source code tanpa mengeksekusi source code tersebut.

Bagaimana Caranya

Cukup menambahkan kode berikut pada source code Anda:

[sourcecode language=”html“]
your code here
[/sourcecode]

Dan untuk language parameter dapat diisi dengan beberapa bahasa pemrogaman yag sudah support, diantaranya:

• actionscript3
• bash
• coldfusion
• cpp
• csharp
• css
• delphi
• erlang
• fsharp
• diff
• groovy
• html
• javascript
• java
• javafx
• matlab (keywords only)
• objc
• perl
• php
• text
• powershell
• python
• r
• ruby
• scala
• sql
• vb
• xml

Berikut hasil dari penggunaan [sourcecode language=”css”]*:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*Apabila languange parameter tidak diisi, maka source code akan ditampilkan seperti teks biasa.

Selain itu ada beberapa konfigurasi parameter lainnya yang dapat Anda jadikan pilihan ketika menampilkan source code.

1. autolinks (true/false): membuat link URL pada source code. Default true.
2. collapse (true/false): jika true, maka source code akan disembunyikan (collapse) dan akan ditampilkan (expand) setelah diklik. Default false.
3. firstline (nomor): mengubah penomoran awal source code. Default nomor 1.
4. gutter (true/false): jika false, akan menyembunyikan penomoran source code. Default true.
5. highlight (nomor yang dipisahkan dengan koma): memilih baris source code yang akan disorot. Contoh: 3,12,20.
6. htmlscript (true/false): jika true, maka kode HTML/XML akan disorot seperti ketika menuliskan kode PHP di dalam HTML. Default false.
7. light (true/false): jika true, akan menyembunyikan gutter dan toolbar. Default false.
8. padlinenumbers (true/false/integer): true untuk mengatur penomoran padding secara otomatis. False untuk penomoran padding tidak ada. Dan integer untuk pengaturan yang spesifik penomoran padding.
9. toolbar (true/false): false untuk menyembunyikan toolbar yang akan muncul ketika di hover pada kanan atas source code. Default true.
10. wraplines (true/false): jika false, menyebabkan baris kode memanjang ke samping (horizontal).

Contoh mixing beberapa konfigurasi parameter di atas:

[sourcecode language=”css” highlight=”1,2,3,4,31,34,37″ padlinenumbers=”3″ toolbar=”false”]

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Bagaimana dengan WordPress.org

Untuk para pengguna WordPress.org tentu tidak akan bisa menampilkan listing program dengan cara menambahkan [sourcecode] secara langsung. Maka apabila Anda pengguna WordPress.org yang ingin menampilkan source code di self-hosted blog Anda, dapat memasang plugin SyntaxHighlighter Evolved yang di develop oleh Alex Gorbatchev dan Automattic di sini.