Menampilkan Markah PHP atau HTML Untuk Tutorial

May 10, 2010 — Untuk dapat menampilan markah atau kode php atau html, maka markah tersebut perlu dilindungi sebagian karakternya, karena secara otomatis WordPress akan memformat setiap karakter/simbol yang berbahaya.. Menampilkan Markah PHP atau HTML Untuk Tutorial diulas oleh rismaka pada May 10, 2010. Berikut ulasan selengkapnya. 4.8

Bagi sebagian narablog yang tertarik dengan dunia tutorial PHP, HTML, maupun CSS, tentunya tidak asing lagi dengan markah (code) yang ditampilkan di dalam konten sebagai contoh untuk pembaca. Untuk dapat menampilannya, maka markah-markah tersebut perlu dilindungi sebagian karakternya, karena secara otomatis WordPress akan memformat setiap karakter/simbol yang berbahaya.

Autoformat markah PHP dan HTML oleh WordPress.

Kita tidak bisa serta merta menuliskan markah HTML maupun PHP di dalam konten tanpa perlindungan, karena begitu kita copy markah tersebut, kemudian kita eksekusi di server, maka markah tidak akan bekerja. Sebagai contoh, perhatikan kedua markah gambar berikut ini.

  1. <img src="images/co.cc.gif" alt="" width="300" height="250">
  2. <img src="images/co.cc.gif" alt="" width="300" height="250">

Walau sekilas tampak sama, namun markah yang kedua dapat bekerja, sementara yang pertama tidak, karena pada markah yang pertama, beberapa karakternya telah mengalami autoformat oleh WordPress. Agar dapat berjalan, maka markah di atas harus dilindungi (ter-highlight).

Untuk melindunginya, bisa menggunakan berbagai macam plugin, antara lain google syntax highlighter, code colorer, Snippet Highlight, dan lain-lain. Namun di sini saya hanya ingin menjelaskan cara menampilkan markah PHP atau HTML tanpa menggunakan plugin, karena menurut hemat saya, penggunaan plugin code highlighter dapat menyebabkan candu. Baca kembali Fenomena Ketergantungan Plugin (wordpress).

Cara menampilkan markah tanpa plugin

  1. First step, escape your code

    Pertama-tama anda harus meng-escape(*) markah PHP atau HTML yang hendak ditampilkan menjadi karakter entity-nya. Contohnya: karakter < (kurang dari / less-than) diubah menjadi &lt; , Karakter " (kutip / quotation mark) diubah menjadi &quot; .

    (*Bantu saya untuk menerjemahkan kata kerja “escape” sesuai istilah yang baku.)

    Tabel 1 contoh karakter HTML dan nama Entity-nya

    Karakter Nama Entity Keterangan
    " &quot; quotation mark
    ' &apos; apostrophe 
    & &amp; ampersand
    < &lt; less-than
    > &gt; greater-than

    Selengkapnya lihat di w3schools | HTML ISO-8859-1 Reference

    Mengubah karakter secara manual hanya akan menghabiskan waktu kita saja. Solusi praktisnya, gunakan tool HTML Escaper

  2. Tahap kedua, gunakan elemen <pre> untuk mempercantik markah (code)

    Sisipkan kode yang telah terkonversi menggunakan elemen <pre>. Contoh:

    <pre>
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

    Karena style tiap theme itu berbeda, maka lebih baik gunakan sebuah class. Berikut adalah contoh yang saya gunakan selama ini:

    <pre class="code">
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem ipsum 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

    Tambahkan class CSS berikut ke file CSS yang anda gunakan (bisa diubah sesuai keinginan)

    .code	{
	width: auto;
	border: 2px solid #9f9f9f;
	border-left: 10px solid #9f9f9f;
	font: normal 13px/1.5em Monaco, Lucida Console, monospace;
	padding: 10px 20px 10px 20px; 
	background: #DFDFDF;
	color: #000;
	overflow:auto; 
	clear:both; 
	max-height:300px;
	margin-bottom: 15px;
	}

Hasilnya seperti yang sedang anda saksikan sekarang ini. Ada pertanyaan?

  • http://budiastawa.com budiastawa
    using Firefox 3.6.3 on Windows 7

    meng-escape = membebaskan.

    He he he, rupanya mas Rismaka benar-benar ga mau kecanduan Plugin. Saya sendiri masih pake Google Highliter, tapi tulisan saya jarang mengulas tentang code (markah).

    Terima kasih tipsnya mas. Sangat berguna. Lengkap dengan setting CSS lagi.

  • http://aldymy.name aldy
    using Firefox 3.6.3 on Ubuntu 10.04

    Kayaknya kalau markah tersebut ditulis dengan format visual pada dahboard WP tetap bisa terbaca kok mas.

  • http://side22.com Harry
    using Firefox 3.5.1 on Windows Vista

    Jika Artikel ini terbatas untuk pengguna WordPress, yang dari WordPress org, tentang Cara menulis kode pada Artikel koq nggak dicantumkan Mas Adi ? Karena sampai versi 3.0 beta, tema bawaan WordPress masih merujuk penggunaan encode charset utf-8. fmwiw

  • http://blog.rismaka.net/ rismaka
    using Firefox 3.6.3 on Windows XP

    budiastawa,
    Saran saya, sebaiknya lepas plugin itu mas, dan beralihlah ke penulisan manual menggunakan cara yg telah dicontohkan.

    aldy,
    Memang tetap bisa terbaca mas, tapi karakter quotation mark ( " ) dan apostrophe ( ' ) akan terformat oleh WordPress menjadi karakter lain, sehingga jika markah dicopy mentah-mentah, ia tidak akan bekerja/berjalan.

    Harry,
    Saya malah baru tahu kalau WordPress telah menjelaskan sebelumnya :(
    Makasih pak dhe, udah men-smash saya. Segera akan saya tambahkan :(

    • http://aldymy.name aldy
      using Firefox 3.6 on Windows XP

      Mas Ris, ada yang menyarankan penulisannya menggunakan angka.
      Menurut mas Ris sendiri, mana yang lebih baik ?

      • http://blog.rismaka.net/ rismaka
        using Firefox 3.6.3 on Windows XP

        aldy,
        Maksudnya menggunakan angka itu apa ya mas?

  • Pingback: Tweets that mention Menampilkan Markah PHP atau HTML Untuk Tutorial | RISOFTE -- Topsy.com

  • http://kafegue.com/ iskandaria
    using Firefox 3.5.8 on Windows XP

    Ternyata untuk kode tertentu harus tetap ditulis secara manual kan (contohnya kode kurung siku). Kalau kode tanda petik saya baru tau jika masih belum bisa tertampilkan pada posting sesuai harapan kita.

    Berarti untuk menampilkan kode fungsi PHP pada posting gak perlu lagi mengandalkan plugin eksekutor dong? Alias cuma perlu meng-escape kode tertentu dan membuat settingan CSS. Plus penggunaan tag pre yang sudah disetel CSS-nya. Nanti mau saya coba mas.

    Trims sudah merangkumnya dengan sangat cantik ^_^

  • http://ilikesunflower.wordpress.com/ sunflo
    using Firefox 3.6.3 on Windows XP

    asli.. kalau ini aq fasriding ajah.. sualnya ga mudeng, lgs komen… buat bikin top komentatornya ada bunga mataharinya, biar seger… :mrgreen:

  • http://ddery.com dery
    using Firefox 3.6.3 on Windows XP

    Kalo saya pake google syntax highlight, tapi bukan dari plugin wordpress.. soalnya kalo pake plugin agak mberat-mberatin.. gak nyoba pake google syntax highlight mas? Lumayan, untuk totorial seperti ini, bisa kelihatan tambah menarik..

    • http://blog.rismaka.net/ rismaka
      using Firefox 3.6.3 on Windows XP

      Saya udah mencobanya. Plugin itu sama seperti syntax highlight dari wordpress der, sama-sama mberatin blog. Saya lebih mending secara manual, biar lebih rapi :)

  • http://dcollectionof.blogspot.com/ ajid
    using Mozilla Developer Preview 3.7a5 on Windows 7

    thx banyak om.membantu sekali,^^