Jika anda mempunyai Blog yang berisi artikel-artikel seputar pemrograman, maka sudah barang tentu anda akan sangat sering mencantumkan kode. Kode tersebut memang tidak masalah jika hanya terlihat seperti text-text yang lain, akan tetapi akan jauh lebih manis jika kode-kode tersebut terlihat dengan Syntax highlighting-nya. Nah, berikut ini adalah salah satu cara mudah untuk menampilkan Syntax highlighting di Blogger.
Cara yang paling umum dilakukan untuk menampilkan Syntax highlighting adalah dengan menggunakan library Javascript tertentu. Nah, di luar sana terdapat begitu banyak library yang dapat digunakan, anda hanya perlu memilih mana yang paling mudah dan paling cocok. Dan salah satu library yang paling mudah dan banyak digunakan tersebut adalah Google Prettyprint/Prettify.
Cara menggunakannya sangatlah mudah, secara umum ada beberapa langkah yang harus dilakukan, yaitu :
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js adalah tempat hosting dari library dari Google Prettify.
Lakukan penempatan tag pre tersebut kesemua script kode anda. Memang sedikit melelahkan dan menyebalkan, akan tetapi memang saat ini hanya seperti itu yang bisa dilakukan. Mudah-mudahan saya Google segera meng-upgrade Blogger sehingga memiliki tool editor yang lebih baik.
Lakukan preview atau publish untuk melihat hasil artikel anda. Jika semuanya lancar, maka hasilnya kira-kira seperti di bawah ini.
Bagaimana terlihat lebih manis daripada sekedar text biasa kan.
Lebih lanjut, jika anda merasa style tampilan Google prettify di atas kurang cocok, anda bisa meng-override style dari kelas prettyprint. Caranya adalah sebagai berikut.
Sebenarnya untuk menambahkan rule style tertentu, anda tidak harus menuliskannya langsung ke template, melainkan bisa ke custom css. Akan tetapi saya pribadi lebih suka menuliskannya langsung ke template karena alasan lebih praktis saja.
Seperti cara menambahkan script prettify di atas, buka template anda lagi, kemudian search </head>, dan tambahkan tab style di baris-baris sebelum </head>. Misalkan saya menambahkan style di bawah ini karena saya tidak terlalu sreg dengan tampilan default karena kodenya terlihat terlalu mepet tepi. Jadi saya tambahkan padding dan mengubah ukuran font agar lebih ramping.
Kesimpulan
Google Prettfy/Prettyprint merupakan salah satu library Syntax highlighting javascript yang sangat mudah untuk digunakan dan sangat populer.
Kekurangannya adalah, pilihan theme sangat terbatas (anda musti buat sendiri jika terpaksa), serta dukungan bahasa pemrograman default yang tidak terlalu banyak (C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust). Sedangkan bahasa pemrograman lain harus ditambahkan via ekstensi.
Sekian tip/trik kali ini, semoga yang sedikit ini bermanfaat.
Cara yang paling umum dilakukan untuk menampilkan Syntax highlighting adalah dengan menggunakan library Javascript tertentu. Nah, di luar sana terdapat begitu banyak library yang dapat digunakan, anda hanya perlu memilih mana yang paling mudah dan paling cocok. Dan salah satu library yang paling mudah dan banyak digunakan tersebut adalah Google Prettyprint/Prettify.
Cara menggunakannya sangatlah mudah, secara umum ada beberapa langkah yang harus dilakukan, yaitu :
- Load Javascript library
- Tuliskan kode di dalam tag <pre class="prettyprint">
- Tweaking style jika diperlukan
Load Javascript library
Intinya anda harus menambahkan tag <script> di dalam <head> di template Blogger anda. Caranya adalah sebagai berikut.
Buka halaman Blogger dari Blog anda, klik menu Template, kemudian klik Edit HTML.
Maka akan muncul HTML Editor sederhana untuk template anda.
Tambahkan library javascript Google Prettify di dalam head. Saya pribadi senang menempatkan custom library javascript pada baris paling akhir sebelum </head>. Oleh karena itu klik kombinasi tombol Ctrl f untuk melakukan pencarian, kemudian masukkan </head>, lalu tekan enter.
Di atas tag </head> tersebut, tambahkan baris baru yang berisi :
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
skin=desert artinya theme yang saya pilih adalah desert. Pada saat tulisan ini saya tulis, hanya terdapat 5 pilihan Prettify theme, yaitu :
- default
- sons-of-obsidian
- desert
- sunburst
- doxy
Silahkan ganti desert di atas dengan theme yang anda sukai. Jika perlu anda bisa membuat theme sendiri. Kemudian tekan tombol Save template untuk menyimpan template.
Tuliskan kode di dalam tag <pre class="prettyprint">
Setelah template di setting, sekarang anda sudah bisa membuat artikel yang berisi kode-kode seperti biasa. Hanya saja, setelah anda menuliskan kode, anda harus memasukkan kode-kode tersebut di dalam tag <pre>. Klik tombol HTML untuk menampilkan posting ke dalam mode advance HTML.
Kemudian tambahkan tag <pre class="prettyprint"> di awal kode anda, dan jangan lupa tutup dengan </pre> di akhir kode.
Kemudian tambahkan tag <pre class="prettyprint"> di awal kode anda, dan jangan lupa tutup dengan </pre> di akhir kode.
Lakukan penempatan tag pre tersebut kesemua script kode anda. Memang sedikit melelahkan dan menyebalkan, akan tetapi memang saat ini hanya seperti itu yang bisa dilakukan. Mudah-mudahan saya Google segera meng-upgrade Blogger sehingga memiliki tool editor yang lebih baik.
Lakukan preview atau publish untuk melihat hasil artikel anda. Jika semuanya lancar, maka hasilnya kira-kira seperti di bawah ini.
Bagaimana terlihat lebih manis daripada sekedar text biasa kan.
Tweaking style jika diperlukan
Selanjutnya anda bisa lebih mengeksplorasi fitur-fitur lain dari Google Prettify ini. Silahkan langsung cek ke link ini. Termasuk bagaimana cara menampilkan nomor baris, dan mengatur agar menampikan kode ke sintak tertentu.Lebih lanjut, jika anda merasa style tampilan Google prettify di atas kurang cocok, anda bisa meng-override style dari kelas prettyprint. Caranya adalah sebagai berikut.
Sebenarnya untuk menambahkan rule style tertentu, anda tidak harus menuliskannya langsung ke template, melainkan bisa ke custom css. Akan tetapi saya pribadi lebih suka menuliskannya langsung ke template karena alasan lebih praktis saja.
Seperti cara menambahkan script prettify di atas, buka template anda lagi, kemudian search </head>, dan tambahkan tab style di baris-baris sebelum </head>. Misalkan saya menambahkan style di bawah ini karena saya tidak terlalu sreg dengan tampilan default karena kodenya terlihat terlalu mepet tepi. Jadi saya tambahkan padding dan mengubah ukuran font agar lebih ramping.
.prettyprint {
padding: 5px;
font-size: 11px;
line-height: 15px;
font-family: monospace;
}
Kesimpulan
Google Prettfy/Prettyprint merupakan salah satu library Syntax highlighting javascript yang sangat mudah untuk digunakan dan sangat populer.
Kekurangannya adalah, pilihan theme sangat terbatas (anda musti buat sendiri jika terpaksa), serta dukungan bahasa pemrograman default yang tidak terlalu banyak (C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, dan Rust). Sedangkan bahasa pemrograman lain harus ditambahkan via ekstensi.
Sekian tip/trik kali ini, semoga yang sedikit ini bermanfaat.
Sumber : Code-prettify