Home > Perl, Programming, Tips > Menulis Source Code Pada WordPress dengan Bantuan Notepad++

Menulis Source Code Pada WordPress dengan Bantuan Notepad++

Sekarang sudah terdapat tag <sourcecode> pada wordpress hanya saja tag tersebut tidak support semua bahasa pemrograman. Akhirnya sempet juga saya nulis gimana caranya bikin tampilan kodingan yang terlihat menarik tanpa bantuan plugin wordpress tanpa susah payah untuk bahasa yang tidak di-support oleh tag <sourcecode>misal VHDL. Sebelumnya mungkin anda mesti nyoba dulu menuliskan source code pada wordpress dan lihat apa hasilnya pada tampilan postingan anda. Sebelum saya cerita gimana caranya, saya masih pengen basa –basi dulu (buat yang males baca silahkan di-skip aja, cari bagian Langkah2 di bawah). Pertama, kalo nulis tanda “<” dan pasangannya di bagian nulis HTML-nya, tanda itu bisa langsung ngilang (WTH!!). Selain itu kita harus memberikan snippet <code> dan pasangannya </code> untuk setiap tulisan source code agar tampilan terlihat seperti source code. And the most annoying part, yaitu bagian tabulasi, silahkan anda mencoba untuk membuat tab pada source code. Kalo di tempat saya akan selalu gagal (kecuali anda udah tau tag <pre> pada HTML). Kebayang kalo anda mau nulis source code bahasa python, bisa nangis darah kalo gak tau caranya bikin tab di postingan =_=

Tau sendiri kalo web ini ada di domain *.wordpress.com yang berarti anda mendapat fasilitas seadanya. Selain gak bisa install plugins tambahan, masih ada juga yang lain, tapi baru akan bahas nanti. Sekarang saya mau bercerita dulu tentang notepad++, seberapa banyak programmer yang gak pake notepad++ dan masih pake notepad biasa buat nulis kodingannya, buat orang seperti itu, saya sembah dulu lah ^:)^. Sekarang seberapa banyak orang yang tau kalo notepad++ bisa export kodingan kita menjadi versi HTML? Mungkin masih ada beberapa orang yang tidak tau mengenai fitur tersebut. Buka notepad++


Coba pilih “Export to HTML”, beri nama apapun, dan “yeah”, anda mendapatkan satu file html yang menampilkan source code anda dengan warna2 seperti pada notepad++. Semua tampak indah dan mungkin anda berpikir seperti saya waktu itu, “yaudah tinggal buka kodingan HTML-nya pake notepad++ trus copy ke postingan wordpress deh”. Setelah itu mungkin ada beberapa orang yang akan berteriak “WTF!!” setelah melihat source code HTML-nya, dan saya salah satu dari mereka. Yup! Seperti dugaan anda, source code HTML yang anda dapatkan dari notepad++ meletakkan css pada bagian <head> pada HTML (dan emang biasanya ditaruh disitu daripada inline yang bikin kodingannya panjang). Mungkin ada beberapa orang yang baru nyadar, dan berkata “d*mn!”, kita tidak bisa mengedit themes yang kita gunakan buat wordpress gratisan kayak gini. Padahal kalo kita install wordpress di komputer kita atau di server terdapat theme editor dan style.css disana, kita bisa mengedit themes hanya dengan melakukan “chmod – R 755” pada folder themes yang akan kita edit.

Terpaksa kita harus menambahkan style satu persatu pada setiap HTML tag, dan kalo anda lakukan manual tanpa bantuan program saya akan sembah anda lagi ^:)^.  Kita tau bahwa yang kita butuhkan hanya bagian body saja,  jadi yang kita butuhkan hanya program yang menaruh code style pada css ke setiap html tag secara inline. Setelah kita udah buat programnya, apa yang kita dapatkan? Ternyata hasilnya tidak sesuai dengan yang kita inginkan.

Setelah melalui beberapa percobaan akhirnya saya menemukan bahwa tag <div> tidak perlu dan tinggal diganti dengan tag <pre> saja. Ketika kamu menggantinya dengan <pre>, hasilnya tetap ancur. Hal ini dikarenakan peletakan <span> dan </span> tidak lah benar, jadi posisi spasi-nya yang seharusnya ditaruh setelah tag </span>, pada keluaran notepad++ spasi diletakkan sebelum tag </span>. Semua ini yang menjadi awal program npp.pl yang melakukan converting dari keluaran notepad++ agar sesuai dengan post di wordpress.

LANGKAH – LANGKAH

Bagi yang men-skip basa – basi di atas, disinilah kalian bisa mulai membaca lagi, sedangkan bagi yang udah baca semua basa – basi sebelumnya saya ucapkan terima kasih (entah penjelasan saya dapat anda mengerti atau justru berkata “what are you talking about?!”). Langsung saja, langkah2 yang harus anda lakukan adalah sebagai berikut ini:

  1. Pilih menu “Plugins ->NppExport -> Export to HTML” dengan Notepad++
  2. Jalankan program “npp.pl”, jangan lupa letakkan di folder yang mudah anda jangkau karena untuk menjalakannya membutuhkan Command Prompt pada windows.
  3. Lokasi-directory-kerja> npp.pl [nama-file-html-yg-akan-dipakai]. Setelah itu akan muncul file “out.html” yang berisi code yang kita butuhkan. Contoh gambar:
  4. Buka file tersebut, misal seperti contoh di atas menggunakan notepad, dan jangan berteriak “what was that?!” setelah melihat tulisan yang ada di dalamnya kalo anda men-setting view => wrap di notepad😀
  5. Copy isi file “out.html” ke postingan di wordpress anda dalam mode menulis dengan HTML bukan pada menu visual, kalo bingung coba liat bagian yang dilingkarin di bawah ini. Lalu lihat bagian Visual-nya, dan this is it! Tampilan source code ala chef notepad++!

Sama seperti postingan program sebelumnya, program npp.pl menggunakan bahasa perl, sesuai dengan extensi-nya. Jadi jangan lupa untuk menginstall perl terlebih dahulu, misal ActivePerl. Info tambahan saja buat yang tidak menggunakan ActivePerl, jangan lupa untuk mengedit baris pertama npp.pl setelah tanda “#!” dan menggantinya dengan link directory ke perl(.exe) yang anda punya (untuk windows biasakan menggunakan backslash untuk menulis posisi directory ya). Semoga postingan ini bermanfaat😀

Categories: Perl, Programming, Tips
  1. August 1, 2011 at 12:22 pm

    Kedawan, ntar klo aku butuh mau masukin source code aku buka ini lagi deh.

    • August 1, 2011 at 4:33 pm

      makane lgsung skip neng langkah2 ae :p

  2. August 7, 2011 at 12:25 pm

    Cuma ngereplace
    jadi < sama > yak?

    • August 8, 2011 at 5:41 am

      maksudnya wan?

  3. August 7, 2011 at 12:25 pm

    Jah, Fail komennya -.-

  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: