Tutorial Menempelkan Kode dari Gist Github Untuk Artikel di WordPress? Bagaimana caranya agar kode dari github menempel pada artikel yang ada pada website atau blog kita tanpa plugin? Apa tujuannya?
Banyak website atau blog education yang mengeluarkan artikel – artikel tutorial untuk mengkoding. Untuk meletakkan potongan kode – kode program pada artikel tersebut, dibutuhkan tempat meletakkan kode agar lebih rapi. Dengan memakai layanan gist github, kode yang kita tulis akan terlihat lebih rapi. Tentunya hal ini membuat user (pembaca) mudah memahami dan nyaman memandang kode pada artikel tersebut.
Baca juga : Dasar Pemrograman Java (1)
Pada tutorial ini, blog yang josikie pakai berbasis wordpress versi 5.2.4 , jika kamu menggunakan versi wordpress diatas atau dibawah 5.4.2, kamu tetap bisa mencoba, siapa tau bisa. Mari kita mulai.
Tutorial
Pertama yang harus kita lakukan adalah mengunjungi github.com lalu login akun github, jika belum punya silahkan buat dulu :
Setelah login, berikut tampilan awal github :
Klik tanda plus diatas bagian kanan lalu klik New gist seperti berikut ini :
Akan muncul seperti ini :
Nomor 1 pada gambar diatas adalah tempat kita menuliskan deskripsi gist yang akan kita buat. Nomor 2 adalah tempat kita memberi judul file gist. Jangan lupa ekstensi file tetap ditulis (.java, .cpp, .hml, dan lainnya. Nomor 3 adalah tempat kita menuangkan kode yang akan di tempelkan pada halaman artikel. Berikut ini contohnya :
Yang josikie beri garis biru adalah deksripsinya, sedangkan garis yang warna hitam adalah nama filenya dengan ekstensi .java dan yang garis warna pink adalah contoh kode yang akan ditempelkan di halaman artikel. Setelah itu klik tombol Create public gist, yaitu tombol yang berada dibawah bagian kanan seperti yang dilingkari warna merah seperti gambar diatas.
Kemudian akan muncul gist baru kita, seperti dibawah ini :
Lalu Salin script yang ada disamping tombol embed ( diberi garis hitam pada gambar dibawah ini ) :
Mari kita ke halaman artikel pada wordpress, lalu pilih pada blok pertama untuk menulis artikel dan klik tanda plus dan pilih Formatting seperti gambar dibawah ini :
Kemudian pilih Custom HTML seperti gambar dibawah ini :
Lalu akan muncul seperti gambar dibawah ini pada halaman edit artikel :
Pergi ke github lagi, copy kode script disamping tabel embed yang digaris warna hitam pada gambar dibawah ini :
Setelah itu kembali ke wordpress lalu salin ke box yang ada tulisan write HTML… seperti pada gambar dibawah ini :
Setelah di salin akan jadi seperti berikut ini:
Mari kita preview hasilnya. Udah pada kepo kan. Yukss tengok.
Seperti apa yah? Hasil dari tutorial kurang lebih seperti gambar dibawah ini :
Demo dan preview
Untuk demo juga preview hasil Tutorial Menempelkan Kode dari Gist Github Untuk Artikel di WordPress, silahkan lihat video dibawah ini :
Selalu cek github josikie disini.
Baca Juga : Apa itu Java API?
Sekian, terimakasih dan semoga bermanfaat:)