Beberapa hari yang lalu searching tentang cara hosting Hugo di Azure, nemu gambar yang isinya source code. Reaksi pertama, wuih mantep juga ini mas-mas bikin kek ginian.

Besoknya nemu lagi di forum subreddit python, ada yang bikin quiz dengan sourcenya digambar.

Gambarnya seperti ini lho

Source code dari gambar

Hari ini nemu lagi subreddit vim, ada plugin vim yang berguna untuk meng-generate source code dari vim namanya Vim-Silicon

Ref :

Oh ya sebelumnya hari ini juga saya ga sengaja baca email dari Webdesigner Depot ada juga yang menawarkan hal yang serupa yaitu codeimg.io

Hasilnya seperti ini

Source code via codeimg.io

Gambar yang pertama dibuat menggunakan carbon.now.sh

Hampir mirip kan?

Bagaimana Cara Membuat Gambar dari Source Code? 

Caranya membuatnya cukup mudah, tinggal tulis atau paste source yang ingin dijadikan gambar pada canvas yang sudah disediakan.

Trus pencet tombol Download jika di codeimg.io atau pencet Export > Save as PNG di carbon.now.sh

Kita juga bisa mengganti warna background dan warna canvas itu sendiri. Kedua layanan ini juga memberikan pilihan untuk mengganti theme dan font dan juga font size

Cara Otomatis Membuat Gambar dari Source Code via Terminal 

Dua website diatas sebenarnya sudah cukup sih, tapi bagi yang ingin langsung membuat gambar source code dari terminal juga bisa kok.

Ada 2 aplikasi, yang pertama Vim-Silicon dan kedua adalah silicon.

1. Vim-Silicon 

Vim-Silicon Demo

Seperti namanya vim-silicon adalah plugin dari vim, cara installnya

1
2
3
4
5
6
7
8
# Install cargo
curl https://sh.rustup.rs -sSf | sh

# Install silicon
cargo install silicon

# Add cargo-installed binaries to the path
export PATH="$PATH:$CARGO_HOME/bin"

Jika menggunakan plugin manager vim-plugin tambahkan baris kode dibawah ini ke .vimrc

1
Plug 'segeljakt/vim-silicon'

Cara Penggunaan Vim-silicon

1
2
3
4
5
6
7
8
# Untuk membuat gambar dari vim buffer masukkan command
:Silicon /path/to/output.png

# Untuk membuat gambar dari mode visual block
:'<,'>Silicon /path/to/output.png

# Untuk membuat gambar dari buffer dan highlight line (via visual mode)
:'<,'>SiliconHighlight /path/to/output.png

Jika /path/to/output.png tidak disertakan maka gambar akan otomatis disimpan diclipboard (saat ini fungsi ini cuma ada di Linux)

2. Silicon 

Aplikasi Silicon

Vim-Silicon sebenarnya menggunakan dependensi dari Silicon, jadi kalau sudah pernah menginstall vim-silicon maka tidak perlu lagi install Silicon.

Tapi bagi yang text editornya bukan vim bisa menginstall Silicon.

Sebelumnya install dulu rust

Cara install rust di Linux Arch dan turunannya (saya menggunakan Manjaro).

1
sudo pacman -S rust

Setelah itu install silicon via cargo. Btw cargo adalah package managernya bahasa Rust, sama seperti Pip atau Conda jika menggunakan Python.

cargo install silicon

Cara Penggunaan Silicon di Terminal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# Membuat gambar source dari file
silicon main.rs -o main.png

# Copy code dari clipboard dan generate hasil ke clipboard
silicon --from-clipboard -l rs --to-clipboard

# Highlight baris tertentu
silicon main.rs -o main.png --highlight-lines '1; 3-4'

# Menggunakan gambar custom
silicon ./target/test.rs -o test.png --shadow-color '#555555' --background '#ffffff' --shadow-blur-radius 30 --no-window-controls

# Cara penggunaan lainnya lihat help
silicon --help

Semoga bermanfaat.