Cara Mudah Menyimpan GitHub Code Snippets Di Postingan Blog

Ditulis oleh: Adhy Suryadi

Ditulis pada: 9/26/2015

Siapa yang tidak tahu dengan GitHub. Banyak pengembang software, website, atau lainnya menggunakan layanan GitHub untuk menimpan kode-kodenya.

Nah kita sebagai blogger yang menulis postingan tutorial blogger juga bisa memanfaatkan GitHub sebagai alternatif syntax hightlighter dengan menyimpan GitHub Code Snippets atau embed Gist di halaman postingan blog.

Silahkan Anda buat akun di GitHub di sini: https://github.com/

Kemudian silahkan buat Gist, silahkan paste kode ke dalam kotak yang disediakan dan kemudian silahkan Create public gist.

Di halaman Gist yang baru kita buat tadi, di sebelah kanan ada kode embed untuk gist tersebut. Silahkan copy kode embed gist tersebut yang biasanya akan terlihat seperti di bawah ini.

<script src="https://gist.github.com/YourUserName/0d125f838b5c80d89f6a.js"></script>

Dan kita tinggal mempaste kode tersebut di editor postingan pada mode HTML.

Namun jika kita mempaste begitu aja kode embed Gist GitHub seperti di atas, maka js tersebut akan menyebabkan blocking render js halaman postingan tersebut.

Nah untuk itu saya mencoba memberikan cara mudah untuk menyimpan GitHub code snippets dan terhindar dari blocking render js.

Silahkan simpan kode javascript di bawah ini di atas kode </body>, tapi jika tidak berhasil silahkan pindahkan ke atas kode </head>

<script>

//<![CDATA[

function embed(github) {

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://gist.github.com/YourUserName/");

document.write(github);

document.write("\"></scr" + "ipt>");

}

//]]>

</script>

YourUserName silahkan ganti dengan username GitHub. Nah untuk menyimpan embed gist di halaman postingan, Anda hanya perlu menuliskan kode seperti berikut di editor postingan pada mode HTML.

<script>embed("0d125f838b5c80d89f6a.js")</script>

0d125f838b5c80d89f6a.js adalah kode unik untuk setiap gist yang diambil dari kode embed gist dari GitHub seperti di bawah ini.

<script src="https://gist.github.com/YourUserName/0d125f838b5c80d89f6a.js"></script>

Bagaimana, mudah bukan? Selamat mencoba....