Posting ‘Source Code’ di Blog WordPress


Beberapa kali posting tutorial coding di wordpress membuat saya lumayan stress untuk memikirkan bagaimana cara menampilkan potongan code dengan baik dan benar menurut format yang saya inginkan. Saya coba dengan tag code yang ada di wordpress. Kok tetap belum sesuai keinginan saya. Bahkan beberapa format tanda kurung kurawal yang saya buat agak masuk kedalam selalu saja kembali menjadi ‘mentok kiri’ setelah di posting.

Seperti biasa, setiap dapat ide atau masalah langsung lapor sama ‘mbah Google’. Atas petunjuk beliau saya di sarankan untuk pergi ke situs WordPress pada bagian FAQ (Frequently Asked Question). Untuk para blogger wordpress disediakan tag khusus untuk membuat highlighting pada syntax yang kita tuliskan di blog kita. Feature ini dibuat berdasarkan project syntaxhighlighter buatan Alex Gorbatchev di Google.

Untuk setiap code yang kita buat cukup di apit dengan tag :



Ganti ‘nama-syntax’ dengan syntax yang didukung oleh wordpress, semakin mendekati semakin baik . Ini dilakukan pada editor wordpress di tab code (lihat gambar).
Tab Code pada editor WordPressSemua yang Syntax yang diapit oleh tag ini akan diperlakukan sebagai code. Jadi kurung kurawal maupun tanda-tanda istimewa lain akan turut di format sesuai dengan keinginan kita.
Syntax yang didukung oleh feature ini adalah sbb :

  • cpp
  • csharp
  • css
  • delphi
  • java
  • jscript
  • php
  • python
  • ruby
  • sql
  • vb
  • xml

Contoh hasil format yang dibuat oleh tag adalah sbb :

use pubs
create table PICTURE_DB
(
   pictureId int IDENTITY(1,1) NOT NULL,
   picture Image NOT NULL,
   CONSTRAINT [PK_Picture] PRIMARY KEY CLUSTERED (pictureId)
)

Satu hal yang penting, adalah jangan mengcopy paste tag diatas. Sebaiknya ditulis secara manual. Kalau code yang diapitnya boleh dicopy-paste. Pengalaman saya kalau tidak di ketik manual highlightingnya tidak berjalan dengan benar.Untuk para pemakai wordpress yang hosting ditempat lain (bukan di wordpress.com) dapat menggunakan plugin terpisah yang fungsinya mirip dengan feature bawaan wordpress ini.

So..jangan biarkan lagi wordpress salah menafsirkan maksud Sang Programmer.

Referensi :

WordPress FAQ about posting source code syntax
Sintaxhighlighter Project on Google

  1. buat CSS-nya sendiri aja… agak ribet sih, tp gak papa kan untuk belajar…
    tutorialnya juga ada kok di Internet (www.webdesignerwall.com) dan ada satu lagi di situs indonesia (blog-nya Deny Sri)…

  2. #sigit
    Yupz..thx buat masukkannya pak **tapi bljrnya ga jnji..smoga sempet…😉
    Maklum nih pak, hostingnya di wordpress..dapet 3GB gratis tapi banyak batasan (themes, plugin, widget, upload, dll). Biar gampang aj jadi potong kompas pake featurenya WP.
    salam…

  3. bagus2 materinya🙂

  4. #kerja mandiri
    trimakasih sudah sudi melihat blog saya ini.
    hanya menulis dari hati berdasarkan apa yg sudah dilihat…

    salam…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: