Menampilkan code program di wordpress

14 Aug 2008

Menuliskan code di wordpress adalah hal yang mudah, (menulis lho bukan membuat code programnya.. ), yang agak sudah adalah menampilkan kode program, misalnya kita pingin berbagi pengalaman yang ada kaitannya dengan code. Bagi anda yang menggunaan Wordpress.com dapat dengan mudah menampilkan code program dengan tampilan default dari wordpress. Untuk menampilkan kodenya cukup di ketikkan diantara kode dibawah ini


[sourcecode language='php']
masukan code disini
[/sourcecode]

Kita dapat memilih bahasa pemrograman sesuai dengan apa yang kita mau. Adapun jenis bahasa pemrograman yang yang di support oleh wordpress.com antara lain:

cpp, csharp, css, delphi, javajscript, php, python, ruby, sql, vb, xml

informasi ini diperoleh dari sumber ini

Trus bagaiamana kalau kita pake engine wordpress tapi tidak di Wordpress.com??

Ada beberapa alternatif untuk menampilkan kode di engine wordpress. Bisa menggunakan plugin, berdasarkan informasi dari sini dapat menggunakan plugin quikcode. Aku ga akan bahas bagaimana cara menggunakan quickcode, tapi alternatif yang paling mudah yang bisa aku lakukan saat menuliskan kode program. Pada intinya kode program kita akan di encode menjadi bahasa html yang nantinya oleh browser akan dibaca sebagai bahasa html yang menampilkan code, yah..semoga paham. bagi anda pengguna windows, dapat menggunakan dreamweaver, silakan baca petunjuknya dari link (diatas), Nah bagi anda pengguna linux dapat menggunakan editor VIM untuk meng encode code program.

VIM adalah editor yang biasa digunakan dilingkungan kerja *nix, dan menurut penggunanya vim ini editor yang powerfull. Editing code pun juga dapat menggunakan VIM dengan mengaktifkan mode syntax dan mengaktifkan line number. Generasi VIM yang lebih modern yang biasa aku gunakan adalah GVIM, yang sudah menampilkan toolbar pada bagian atasnya, fungsi ini membantu kita apabila kita susah menghafal perrintah si editor VIM.
Untuk memulainya silakan buka editro GVIM, kemudian ketikkan code program yang ingin anda encode, untuk mengaktifkan line number:


tekan ":" dan ketik "set nu ai"

kemudian untuk menampilkan syntax nya:

tekan “:” dan ketik “syntax on”

Setelah penulisan code program selesai, berikutnya adalah mengubah code menjadi HTML. Untuk memudahkan kita untuk mengakses encode adalah dengan memilih menu Syntax >> Convert to HTML . Kemudian akan muncul code html hasilnya yang kelihatan rumit … Nah code ini yang akan kita pindah ke editor wordpress, hasilnya kurang lebih seperti dibawah ini.

1 <html>
2 <head>::judul halaman::</head>
3 <body>
4 <div id=“pertamax”>
5
6 </div>
7 </body>
8 </html>

nb:gambar code paling atas diambil dari sini

Tags: editor, vim, web, wordpress

5 Responses to Menampilkan code program di wordpress

ARS

August 15th, 2008 at 12:38 am

Kok repot-repot amat mas?
Langsung aja ketik kodenya dari kotak posting (bukan kotak HTML) Wordpress. Nanti otomatis akan diubah sama Wordpressnya. Tapi pada beberapa kasus, untuk mempertegasnya ada yang menyisipkannya diantara tag Code/Pre

[Reply]

andrew

August 15th, 2008 at 8:24 am

@ARS: Terimakasih Mas sudah berkenan mampir…
Iya,taoi tampilannya tidak seindah kalo menggunakan GVIM dengan menampilkan syntax dan line number.

Oh ya, kasus ini kemaren aku gunakan untuk menampilkan kode link banner dukungan di sidebar, supaya dapat di copy-paste user yang ingin memasang banner. kode yang sudah diencode baru disisipkan ke tag pre

CMIIW

[Reply]