 |
| Syntax Highlighter di Blogger |
Untuk blogger yang suka memposting prihal pemrograman atau coding, penggunaan syntax highlighter menjadi suatu keharusan ketika hendak menyertakan codingannya kedalam postingan. Awalnya saya masih menggunakan hosting pihak ketiga seperti
pastebin.com dan
gist.github.com lalu mengembed kodingannya ke blog. Namun ternyata cara tersebut kurang efektik karena cukup menyita waktu ketika kita harus copy paster codingan kita ke pihak ketiga tersebut dan mengembednya ke blog sendiri.
Setelah coba cari di internet, akhirnya ketemulah
prismjs.com yang bisa digunakan sebagai syntax highlighter, dan di postingan ini saya akan sedikit memberikan tutorial cara memasang prism syntax highlighter di blogger/blogspot.
Langkah 1 (Persiapan)
Masuk ke blog anda, pilih menu Theme -> Edit HTMl
Tambahkan dua baris kode dibawah ini sebelum tag </head>
Langkah 2 (Penggunaan)
Sekarang saatnya menampilkan kode ke dalam postingan, caranya adalah dengan masuk ke halaman tambah postingan, pilih tampilan
HTML, dan masukan kode berikut:
<pre class='language-markup'>
<code>
// Your HTML Code here
</pre>
</code>
Tampilannya akan seperti ini:
Setelah itu, pilih bagian
Compose lalu block baris kalimat /
/ Your HTML Code here dan ganti dengan sintax yang hendak ditampilkan.
Kalau sudah dan dilakukan dengan benar, maka hasilnya kurang lebih akan seperti ini:
Langkah 3 (Penentuan Bahasa Pemrograman)
Untuk menentukan bahasa, kamu hanya perlu mengubah language-xxxx di kelas yang dapat kamu temukan di tag <pre> dan <code>.
<pre class='language-markup'>
<code>
// Kode HTML kamu disini
</code>
</pre>
language-markup digunakan untuk markup HTML, kamu dapat menggunakan ini untuk kode XML juga.
<pre class='language-css'>
<code>
// Kode CSS kamu disini
</code>
</pre>
- Penggunaan untuk javascript
<pre class='language-javascript'>
<code>
// Your JS Code here
</pre>
</code>
Langkah 4 (Pilihan Tema)
Salah satu kehebatan dari PrismJS adalah terdapat pilihan tema yang bisa disesuaikan dengan kebutuhan website, tema-tema ini bisa kamu pilih sendiri sesuai dengan kesukaan kamu. Adapun pilihan tema tersebut adalah
default,
dark,
funky,
okaidia,
twilight,
coy dan
solarized light.
Dengan merubah satu baris file CSS, kamu dapat mengubah tema untuk semua PrismJS syntax highlighter di blog kamu. Di contoh pertama tadi kita sudah menggunakan tema
default, namun untuk
screenshoot sebenarnya saya sudah menggunakan tema
okaidia, jadi mungkin tampilannya aga berbeda dengan temen-temen, hehe.
Untuk merubah tema dari PrismJS ini kamu cukup merubah satu baris kode bagian:
<link rel="stylesheet" href="http://prismjs.com/themes/prism.css"/>
Diganti dengan salah satu dari pilihan tema dibawah ini:
Dark
<link rel="stylesheet" href="http://prismjs.com/themes/prism-dark.css"/>
Funky
<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>
Okaidia
<link rel="stylesheet" href="http://prismjs.com/themes/prism-funky.css"/>
