Belajar Kode Program

Blog belajar menulis kode program dan aplikasi komputer

Rabu, 15 November 2017

Menyisipkan Sintaks Program pada Blogspot

Bagi programmer yang sekaligus blogger, menulis kode program barangkali merupakan salah satu hal yang tidak bisa dihindarkan. Apalagi kalau sedang menulis tutorial yang berisi potongan-potongan kode program, tentu sedikit banyak membutuhkan teknik-teknik yang sesuai untuk menghasilkan tampilan yang bagus.

Intinya adalah bagaimana cara kita melakukan syntax highlighting pada postingan blog kita. Secara umum, cara atau teknik yang akan kami bahas di sini dapat diterapkan di web-web yang lain.

Cara pertama adalah tanpa menggunakan pihak ketiga sama sekali. Caranya adalah dengan menggunakan tampilan menulis postingan "HTML"


Kemudian pada kode HTML-nya gunakan tag code (<code>) sebelum kode program yang ingin Anda tampilkan. Selanjutnya, jangan lupa menutup dengan tag penutup code (</code>) setelah kode program Anda. Perhatikan contoh berikut:


Cara kedua adalah menggunakan layanan pihak ketiga Gist milik Github.com. Untuk menggunakannya, Anda bisa menggunakan akun github. Sebagai contoh, saya sudah membut sintaks di Gist. Untuk menaruh di website kita, misalnya blogspot, kita cukup menyalin kode skrip yang disediakan di gist. Perhatikan gambar berikut:


Kemudian pada mode HTML, kita bisa mem-paste di tempat menulis postingan blogspot.


Hasilnya akan terlihat seperti tampilan berikut:



Cara ketiga, masih dengan menggunakan pihak ketiga, yaitu pastebin. Pada setiap kode yang kita buat, ada tombol "embed" di bagian kanan atas. Seperti pada gambar di bawah ini:


Selanjutnya kita diberi pilihan melakukan embed, menggunakan javascript atau iframe. Iframe cocok digunakan jika web kita menonaktifkan fitur javascript.

Dengan memilih javascript embedding, kita dapat melakukan cara mem-paste-nya di mode HTML postingan kita. Hasilnya seperti ini:

 
Terakhir, kita bisa melakukan syntax highlighting dengan cara modifikasi pada template blogspot. Caranya dapat dilihat pada link berikut: how-to-setup-syntax-highlighter-on-blogger. Tetapi, sekali lagi cara yang terakhir ini membutuhkan keahlian lebih tinggi karena Anda harus mengutak-atik kode template blogspot.

Demikian beberapa cara, semoga dapat bermanfaat untuk para pembaca.

2 komentar: