Leafcoder adalah Layanan Digital Solutions untuk memaksimalkan bisnis Anda di Internet.

Jasa apa saja yang tersedia di leafcoder?

Jasa Pembuatan Website, Jasa Digital Marketing (SEO dan SEM), dan juga Jasa Creative Contents.

Apakah bisa belajar SEO dan SEM di leafcoder?

Sangat bisa. Di leafcoder tersedia banyak artikel seputar SEO dan SEM yang wajib Anda ketahui.

Cara Memasang Syntax Highlighter di Blog

Kali ini saya akan membahas cara memasang syntax highlighter menggunakan Google Code Prettify. Ok.. to the point, pertama
login dulu ke Dashbord Blogger Anda. Kemudian pilih Layout > Edit HTML. Setelah muncul halaman Edit HTML nya, klik tanda centang pada Expand Widget Templates

Sekarang pada code Templatenya, kita cari (pakai Find, CTRL+F) :

</head>

Kalau sudah ketemu, copy-paste script ini dan taruh tepat di atas : </head> tadi.

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

Setelah itu kita tambahkan script loadernya pada body, caranya cari kode ini:

<body>

ganti dengan kode di bawah ini:

<body onload="prettyPrint();">

Siippp.. setelah itu simpan, klik tombol SAVE TEMPLATE.

---------------------------------

Cara Penulisan Source Code:

Ok.. setelah tadi kita pasang script Syntax Highlighter-nya, sekarang kita menuju ke cara pemakaiannya. Untuk membuat source code pada postingan kita agar diidentifikasi sebagai source code caranya ialah :

Sintaks umumnya :

<pre class="prettyprint lang-html">
 source code disini...
</pre>

Sebelum menulisan source code kita awali dengan tag HTML ini: <pre class="prettyprint lang-language">. Untuk mendefinisikan bahasa program yang ingin dipakai, kita atur pada lang-language, sesuaikan dengan bahasa dari source code yang ingin kita posting, misalnya lang-html untuk source code berupa HTML. Kemudian diakhiri dengan tag: </pre>.

Contohnya sebagai berikut :

<pre class="prettyprint lang-html">
<html>
<head>
<title>Test</title>
</head>
<body>
 Hellow world!!! Ini adalah contoh source code HTML.
</body>
</html>
</pre>

Selain opsi bahasa lang-html, ada pula opsi untuk bahasa lain sebagai berikut: lang-bsh, lang-c, lang-cc, lang-cpp,lang-cs, lang-csh, lang-cyc, lang-cv, lang-htm, lang-html, lang-java, lang-js, lang-m, lang-mxml, lang-perl, lang-pl,lang-pm, lang-py, lang-rb, lang-sh, lang-xhtml, lang-xml, lang-xsl.

Bagaimana? sulit? sepertinya mudah bukan? hehehe.. Untuk mencoba hasilnya, kita buat postingan dengan menyertakan source code (sembarang aja), kita beralih ke menu New Post > pilih mode Edit HTML.
Tambahkan kode ini pada postingan :

<pre class="prettyprint lang-html">
<html>
<head>
<title>Test</title>
</head>
<body>
 Hellow world!!! Ini adalah contoh source code HTML.
</body>
</html>
</pre>

Publish Post dan lihat hasilnya. Pada postingan itu saya menambahkan source code dengan bahasa HTML. Untuk preview hasilnya Anda bisa lihat pada postingan ini, coba Anda perhatikan kode-kode yang saya posting, ada warna-warna dan font khusus bukan? itulah Syntax Highlighter, tepatnya saya gunakan Google Code Prettify. Untuk cara memasang Syntax Highlighter versi lain, nanti akan saya share tutorialnya lagi.

Selamat mencoba, Salam Leaf-Coder! :)