Cara Gampang Menyimpan Github Code Snippets Di Postingan Blog

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

Nah kita sebagai blogger yang menulis postingan tutorial blogger juga dapat 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 arahan ke dalam kotak yang disediakan dan lalu silahkan Create public gist.

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

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

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

Namun kalau kita mempaste begitu aja arahan embed Gist GitHub menyerupai di atas, maka js tersebut akan mengakibatkan blocking render js halaman postingan tersebut.

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

Silahkan simpan arahan javascript di bawah ini di atas arahan </body>, tapi kalau tidak berhasil silahkan pindahkan ke atas arahan </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 arahan menyerupai berikut di editor postingan pada mode HTML.

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

0d125f838b5c80d89f6a.js yaitu arahan unik untuk setiap gist yang diambil dari arahan embed gist dari GitHub menyerupai di bawah ini.

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

Bagaimana, gampang bukan? Selamat mencoba....
Sumber https://www.kompiajaib.com/

Share this post