Cara Menambahkan Banner ASCII ke README GitHub

Nama proyek dalam bentuk banner ASCII membuat bagian atas README menonjol. Berbeda dengan gambar, ini teks biasa: tidak menambah file ke repositori dan tampil benar di tema terang maupun gelap.

Menambahkannya ke README

Di Markdown, banner harus berada di dalam blok kode. Di luar blok, spasi berulang menyusut jadi satu, serta _ dan * berubah menjadi penanda miring dan tebal, sehingga seni rusak.

```text
                                       _           _
 _ __ ___  _   _       _ __  _ __ ___ (_) ___  ___| |_
| '_ ` _ \| | | |_____| '_ \| '__/ _ \| |/ _ \/ __| __|
| | | | | | |_| |_____| |_) | | | (_) | |  __/ (__| |_
|_| |_| |_|\__, |     | .__/|_|  \___// |\___|\___|\__|
           |___/      |_|           |__/
```

# my-project

Alat CLI kecil yang bisa langsung dijalankan dari terminal.

• Menulis text setelah backtick pembuka mematikan penyorotan sintaks, jadi karakter tetap satu warna.
• Tambahkan judul teks sungguhan (# my-project) di bawah banner. Mesin pencari dan pembaca layar tidak bisa membaca banner sebagai nama proyek.
• Jika seni berisi tiga backtick berturut-turut, bungkus dengan empat backtick.

Jaga di bawah 80 kolom

Blok kode di GitHub bisa digeser ke samping jika barisnya terlalu panjang. Banner yang terpotong kehilangan maknanya, jadi tetaplah di bawah 80 kolom, atau sekitar 50 jika ingin muat di ponsel juga.

Tempat dibaca	Lebar yang disarankan
README GitHub di desktop	hingga 80 kolom
Aplikasi GitHub, layar sempit	sekitar 50 kolom
Keluaran terminal	hingga 80 kolom

Untuk nama proyek yang panjang, pilih font lebih kecil seperti Small atau Mini daripada Standard atau Big, atau pecah nama menjadi dua baris. Pojok kanan atas setiap kartu font di lab.ascii menunjukkan lebar hasilnya.

Menambahkannya ke komentar kode

Banner di awal file, atau di awal bagian besar, memudahkan menemukan posisi di file yang panjang.

/*
 *  ___ ___ _  _ ___  ___ ___
 * | _ \ __| \| |   \| __| _ \
 * |   / _|| .` | |) | _||   /
 * |_|_\___|_|\_|___/|___|_|_\
 */
export function render() {}

• Awali setiap baris dengan penanda komentar (*, //, atau #).
• Jika seni berisi */, komentar blok berakhir di sana. Gunakan komentar baris // untuk seni itu.
• Jika tim Anda menerapkan batas panjang baris, misalnya 100 karakter, buat banner muat di dalamnya.

Menampilkannya saat program dimulai

Untuk menampilkan banner saat alat CLI dijalankan, seni harus disimpan sebagai string. Masalahnya adalah backslash (\). Di sebagian besar bahasa, backslash memulai escape sequence, jadi menempel seni apa adanya bisa menghilangkan karakter atau menimbulkan error.

Di JavaScript, String.raw mempertahankan backslash apa adanya.

const banner = String.raw`
 _  _ ___ _    _    ___
| || | __| |  | |  / _ \
| __ | _|| |__| |_| (_) |
|_||_|___|____|____\___/
`;
console.log(banner);

Backtick atau ${ di dalam seni akan mengakhiri template string. Biasanya lebih mudah memakai font lain untuk seni itu.

Di Python, gunakan raw string dengan menaruh r di depannya.

BANNER = r"""
 _  _ ___ _    _    ___
| || | __| |  | |  / _ \
| __ | _|| |__| |_| (_) |
|_||_|___|____|____\___/
"""
print(BANNER)

Banner pembuka tidak mengganggu jika Anda mengikuti dua aturan.

• Jangan tampilkan saat keluaran dialirkan ke program lain, seperti pipe atau file log.
• Sediakan opsi seperti --quiet untuk mematikannya.

Font mana yang dipakai?

Font	Karakter
Standard	Pilihan aman. Cocok untuk nama apa pun
Slant	Huruf miring dengan kesan cepat
Small	Standard versi kecil. Bagus untuk nama panjang
Banner	Huruf tebal berisi #. Paling mencolok
Digital	Banner kecil tiga baris dengan tiap huruf dalam kotak. Bagus untuk komentar kode

Ke-12 font di lab.ascii hanya memakai karakter ASCII, sehingga tetap utuh di GitHub, terminal, dan lingkungan lama. Banner dari karakter blok (█ ╗ ═) buatan generator lain bisa rusak di lingkungan yang sangat lama, jadi jika banner harus berfungsi di mana saja, pilih font ASCII.

Ketik nama proyek Anda di lab.ascii untuk membandingkan banner dalam 12 font, lalu klik kartu untuk menyalinnya.