Membuat tulisan berupa tutorial pemrograman tentunya terasa kurang bila tidak diberikan contoh kode sumbernya (source codenya). Kode Sumber suatu program biasanya akan rusak atau jadi susah dimengerti pembaca saat diposting di blogger. Terlebih lagi bila contoh kode sumbernya berupa html, javascript, php ataupun bahasa lain yang biasa dijalankan di browser.
Agar kode anda tetap dapat dibaca dengan baik, anda perlu melakukan perubahan pada kode sumber tersebut. Perubahan tersebut dengan maksud agar kode tetap dapat ditampilkan dengan baik di browser sesuai dengan kode yang ingin anda tampilkan dan tidak dijalankan. Jadi kode tetap tampil sebagai kode bukan sebagai interpretasi browser.
Agar kode anda tetap ditampilkan sebagai kode maka anda dapat menggunakan Kode Editor seperti Visual Studio Code. Caranya sangat mudah, Kode yang ingin anda cantumkan di blog tinggal diblok kemudian langsung dicopy paste ke blog anda hasilnya seperti ini.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="phaser.2.7.7.min.js"></script>
</head>
<body>
<script src="level3.js"></script>
<script src="level2.js"></script>
<script src="level1.js"></script>
<script src="level.js"></script>
</body>
</html>
Kode diatas adalah hasil copy paste dari visual studio code. Mudah sekali bukan?
Sayangnya seperti contoh diatas, coba lihat baris kodenya tidak memunculkan nomor baris yang dapat mempermudah pembaca blog anda dalam memahami potongan kode program.
Selain cara diatas anda juga dapat memanfaatkan bantuan dari situs online yang dapat membuat postingan kode anda tetap dapat dibaca dengan baik. Diantara situs-situs yang mampu membuat kode terlihat baik adalah :
hilite.me
Kelebihan:
- Bisa menampilkan nomor baris kode
- Kode dapat tampil sesuai yang anda pastekan, bila kode panjang kekanan akan ditambahkan scrollbar secara otomatis
markup.su/highlighter
Kelebihan:
- Dapat mendeteksi kode program secara otomatis
- Ukuran kode baru yang dihasilkan hanya bertambah sedikit dari kode yang anda pastekan
Cara Penggunaan
Cara penggunaan kedua situs diatas cukup sederhana. Terlebih dahulu anda perlu mempersiapkan dengan menulis kode program yang ingin anda posting ke blogger. Setelah itu anda dapat membuka salah satu situs diatas.
- Copy kode sumber yang ingin anda posting ke blogger, kemudian paste ke kotak souce code yang telah disediakan disitus yang telah anda pilih
- Pilih languange untuk menentukan bahasa pemrograman apa yang anda tulis dari source code anda. Untuk markup langsung otomatis terpilih
- Pilih style untuk menentukan tampilan menggunakan tema
- Tekan tombol Highlight untuk segera mengkonversi souce code menjadi kode yang bisa di posting dengan baik di blogger.
- Kode akan diubah menjadi HTML yang siap diposting di blogger atau blogspot
Cara Posting Source Code di Blogspot
- Silahkan copy-paste source code yang ingin anda tampilkan ke salah satu situs diatas boleh hilite.me atau markup.su. Kemudian tekan tombol Highlight!
- Untuk menempatkan kode di blogspot anda tinggal copy dari kotak HTML Code yang dihasilkan dari situs yang anda pilih diatas
- Buka blogger dan buat posting baru, lalu pilih tab HTML
- Pastekan kode yang telah anda copy dari situs pilihan anda.
- Publish source postingan anda agar dapat ditampilkan di browser.
Hasilnya kurang lebih seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head></head> <body> <script> alert("tes"); console.log(1+1); function testing(){ console.log("coba bro!"); } </script> </body> </html> |
Itulah tadi cara posting kode di blog agar tampil tetap bagus dan mudah dimengerti. Demikian tulisan kali ini Semoga bermanfaat.
Selanjutnya