Cara Memasang Kode Program di Blog

Cara Memasang Kode Program di Blog – Pernah mencoba memasang kode prorgram di blog? Terutama kode html. Apa hasilnya? Kode html yang kita ketikkan tidak muncul? Memang begitulah harusnya. Ini bukanlah sebuah kesalahan pada blog. Karena kode html yang kita ketikkan di bagian posting akan otomatis di convert menjadi tampilan visual. Berikut cara menempel / embed kode html, css, javascript, dll di blog.

Menggunakan Tag PRE

Tag pre digunakan untuk preformatted text, untuk menggunakannya sama dengan kode html lainnya, cukup dengan
<pre> … isi kode … </pre>
Dengan tag pre, spasi dan enter yang ada di dalamnya akan ditampilkan, berikut contohnya

<pre> Text di Pre mengikuti apa yang kita tuliskan seperti spasi dan enter </pre>

1 2 3 4 5

<pre> Text di Pre mengikuti apa yang kita tuliskan seperti spasi     dan enter </pre>

Encoding HTML

Encoding HTML akan membuat syntax html menjadi kode html, sehingga dapat muncul saat dituliskan di blog. Cara ini yang sering saya gunakan untuk menampilkan kode / tag html di blog.

<table> <tr> <td>panduaji.net</td> <td>merupakan blog </td> <td>bla bla bla </td> </tr> </table>

1 2 3 4 5 6 7

<table> <tr> <td>panduaji.net</td> <td>merupakan blog </td> <td>bla bla bla </td> </tr> </table>

Script membuat table diatas merupakan contoh script html sebelum di encode, sedangkan setelah di encode hasilnya akan tampak seperti kode di bawah ini.

<table> <tr> <td>panduaji.net</td> <td>merupakan blog </td> <td>bla bla bla </td> </tr> </table>

1 2 3 4 5 6 7

<table> <tr> <td>panduaji.net</td> <td>merupakan blog </td> <td>bla bla bla </td> </tr> </table>

Untuk mengubahnya, tidak perlu mengconvert manual, cukup manfaatkan tool yang sudah ada seperti Encode Decode HTML yang saya pakai. Bisa diinstall di browser chrome juga.

Install Plugin Syntax Highlighter

Merupakan cara paling mudah dan paling efektif untuk menuliskan kode html di blog wordpress, karena di blog yang menggunakan blogger tidak ada fasilitas instalasi plugin, namun kita tetap bisa juga menambahkannya di blogger dengan tambahan script. Ada banyak sekali plugin untuk syntax highlighter di worpdress, menurut saya plugin syntax highlighter terbaik adalah Crayon Syntax Highlighter.
Karena plugin ini menyediakan banyak sekali dukungan bahasa pemrograman, selain itu ada banyak pilihan tema dan pengaturan sehingga membuat tampilan tutorial html / pemrograman di blog jadi makin cantik. Berikut tampilan bagaimana cara memasang kode html di blog dengan plugin ini

Menambahkan Kode Program dengan Crayon Syntax Highlighter

Gampang bukan? Selamat memilih cara menambahkan kode program di blog. Gunakan yang paling pas buatmu.