Cara Screenshot Codingan yang Keren Tanpa Perlu Desain

Cara Membuat Screenshot Coding Keren Tanpa Desain
Cara Membuat Screenshot Coding Keren
Dalam sebuah group yang membahas tentang kodingan seringkali saya dapati teman - teman yang menanyakan screenshot gambar seperti ini :

Contoh screenshot kodingan keren
Contoh Screenshot
"Gan, ini cara bikin screenshot kayak gini gimana sih?" kemarin seseorang bertanya..
"Bikin desain kodingan gini bagaimana mas, bagi dong caranya?" hari ini pun ada yang bertanya..
"Kok screenshotnya keren gini sih, gimana buatnya om?" mungkin besok bakal ada yang nanyain hal yang sama seperti kemarin.

Membuat screenshot seperti ini untuk bertanya ke group facebook ataupun dalam forum seputar programming sepertinya udah mulai menjadi tren. Pasalnya kalo diharuskan untuk copy paste ke pastebin atau platform paste lain kayak gitu rasanya 'agak' males aja buat buka. Jadinya kalo nampilin gambar langsung, mastah yang tau jawabannya bakalan langsung jawab di reply atau komentar, dan.. nggak perlu buka link keluar.

Bikin tangkapan layar buat kodingan seperti diatas mudaaaah banget kok, bahkan jauh lebih mudah daripada belajar Restful API (yaiyalah heii~) yang perlu kalian lakukan hanyalah mengcopy baris kodingan yang kiranya perlu dibuat screenshot. Kemudian kalian lakukan hal dibawah ini

Cara Screenshot Kodingan Keren

1. Pergi ke link berikut ini : carbon.now.sh nanti bakalan nampilin halaman berikut ini

Tampilan situs carbon.now.sh
carbon.now.sh
2. Kalian bisa login terlebih dahulu menggunakan akun github, caranya klik aja link dipojok kanan atas yang ada tulisan Sign in/Sign up. Kalo kalian daftar kemudian login nantinya screenshot yang pernah dibuat akan tersimpan di akun tersebut, kalo nggak login juga nggak masalah sih dan kalian tetep bisa bikin screenshotnya, tapi kalo tab browser udah ditutup.. ya bakal ilang screenshot yang sudah kita buat, kecuali kalo kalian emang simpan linknya secara manual. That's okay, tapi ribet kan? mending login dulu aja, aman kok.

3. Langkah selanjutnya, kalian copy atau salin kodingan alias source code yang akan kalian buat sebagai screenshot.

Sebagai contoh, saya bakal bikin screenshot dari kodingan dibawah ini:
const pluckDeep = key =&gt; obj =&gt; key.split('.').reduce((accum, key) =&gt; accum[key], obj)<br /><br />const compose = (...fns) =&gt; res =&gt; fns.reduce((accum, next) =&gt; next(accum), res)<br /><br />const unfold = (f, seed) =&gt; {<br />&nbsp; const go = (f, seed, acc) =&gt; {<br />&nbsp;&nbsp;&nbsp; const res = f(seed)<br />&nbsp;&nbsp;&nbsp; return res ? go(f, res[1], acc.concat([res[0]])) : acc<br />&nbsp; }<br />&nbsp; return go(f, seed, [])<br />}

Saya copy tuh code diatas, kemudian paste ke area yang sudah disediakan oleh carbon.now.sh

Paste kodingan yang ingin discreenshot
Paste Kodingan ke Form
Maka hasilnya akan seperti ini :

Hasil Carbon.now.sh
Hasilnya
Kalian bisa mengganti tema tampilan dari kodingannya yaitu dengan menekan tombol 'gerigi' pengaturan. Disitu ada banyak pilihan tema editornya, kalian bebas pilih mau pake mana saja yang disukai.

Nah, setelah dirasa sudah pas posisi kodingannya dan kalian juga udah cocok sama warna tampilan. Langkah selanjutnya adalah cara mengekspornya ke gambar. Caranya silahkan tombol Export, maka akan terbuka menu pilihan simpan. (Lihat contoh gambar dibawah)

cara mengekspornya ke gambar
Cara ekspor ke gambar
Dari opsi yang ditawarkan oleh carbon.now.sh, kalian hanya diijinkan untuk mengekspornya ke dalam bentuk PNG atau SVG. Tapi gak papa, itu adalah pilihan ekspor yang menurut saya juga bagus kualitasnya.

Oke, sekian dulu untuk tips & trik bagaimana cara membuat screenshot source code dari kodingan biar bagus dan keren, serta tanpa perlu memakai skill desain. Hehehe, terima kasih udah mau baca tulisan jelek saya jika ada kritik dan saran mohon sampaikan melalui komentar dibawah ya! Terima kasih

Baca juga

3 comments

  1. Makasih gan berguna banget. Ini websitenya baru to kok masih sepi terus yang freepik premium free udah ga ada ya? hehehe

    ReplyDelete
    Replies
    1. iya gan, trik freepiknya udah lama di take down sama pihak official huhuu

      Delete
  2. Bagus mas. Makasih banyak infonya.

    ReplyDelete

Post a Comment