WordPress Syntax Highlighting

Picture comotted from http://www.h4×3d.com/feat/themes/wp-yellow.jpg

Postingan ini saya tuliskan karena adanya request yang menanyakan kepada saya tentang menampilkan code yang berwarna warni. Untuk lebih jelasnya, saya kutip pertanyaan mas Dimas:

mas caranya nulis code tapi ada background selang seling gitu warnanya, tuh gmn yah? ada nomer line nya juga, saya pernah liat yang seperti itu tapi gak tau caranya.. apa itu pakai plug in yah?

Untuk keperluan ini, kita memerlukan plugin yang bernama Wp-Syntax. Dengan menggunakan plugins ini, maka kita dapat menampilkan kode pada postingan kita dengan fitur syntax highlight.

Comot plugin tersebut dari sini. Unzip file wp-syntax.0.9.zip, dan kemudian upload folder wp-syntax beserta seluruh isinya ke wp-content/plugins/ pada hostingan kamu.

Login pada wordpress kamu, dan aktifkan plugins Wp-Syntax dari halaman plugins.

Setelah plugin tersebut diaktifkan, tulislah sebuah postingan. Untuk menuliskan kode, ganti mode Visual pada TinyMce menjadi mode HTML.

Kemudian tulislah kode yang akan kamu tuliskan pada postingan. Contoh kode:

<pre lang=”php” line=”1″>
<?php
echo “Hello World!<br>;
?>
</pre>

<pre lang=”java” line=”10″>
public class Hello {
public static void main(String[] args) {
System.out.println(”Hello World!”);
}

}
</pre>
<pre lang=”css” line=”1″>
*, input, textarea
{
font-size: 13px;
color: #bebebe;
}
</pre>

<pre lang=”vb” line=”1″>
private sub Form_Load()
Msgbox “Hello world”
end sub
</pre>

Untuk menonaktifkan line numbering, kamu tinggal menghapus property line pada tag <pre>. Kamu juga bisa memodifikasi start awal line number yang akan digunakan seperti dengan mengubah nilai line menjadi = 10 atau berapa saja. Contoh : <pre lang=”css” line=”22″>

Propery Lang digunakan untuk menggunakan syntax highlight bahasa program apa yang akan digunakan.

Bahasa yang disupport untuk digunakan sebagai nilai property lang adalah:

abap, actionscript, actionscript3, ada, apache, applescript, asm, asp, autoit, bash, blitzbasic, bnf, c, c_mac, caddcl, cadlisp, cfdg, cfm, cpp-qt, cpp, csharp, css, d, delphi, diff, div, dos, dot, eiffel, fortran, freebasic, genero, gettext, glsl, gml, groovy, haskell, html4strict, idl, ini, inno, io, java, java5, javascript, kixtart, latex, lisp, lotusformulas, lotusscript, lua, m68k, matlab, mirc, mpasm, mxml, mysql, nsis, objc, ocaml-brief, ocaml, oobas, oracle8, pascal, per, perl, php-brief, php, plsql, python, qbasic, rails, reg, robots, ruby, sas, scala, scheme, sdlbasic, smalltalk, smarty, sql, tcl, text, thinbasic, tsql, vb, vbnet, verilog, vhdl, visualfoxpro, winbatch, xml, xpp, z80

Screenshot:

Klik gambar untuk memperbesar.

Selamat berkoding ria di WordPress. ☺