TIPOGRAFI PADA BOOSTRAP - MENULISKAN KODE

Bootstrap | Tipografi Pada Bootstrap - Menuliskan Kode | Budayakan Berbagi

HTML menyediakan tag yang digunakan untuk membuat tipografi khusus tulisan berupa kode program, akan tetapi secara kasatmata seperti tidak ada bedanya dengan tulisan-tulisan pada umumnya. Bootstrap akanmembuat tulisan kode terlihat lebih stylish dan makin mempertegas bahwa beberapa kumpulan karakter tersebut adalah sebuah kode program. Untuk penjelasan lebih lanjut mengenai penulisan kode program, dapat anda ikuti pembahasan pada artikel-artikel mengenai grid dan typografi.

INLINE
Style ini digunakan jika anda ingin mempertegas bahwa sebuah teks yang anda tuliskan adalah potongan kode atau tag. Untuk mengimplementasikan style ini, gunakan markup "<code> </code>". Contoh penulisan tag <code> seperti berikut:

Tampilan dari teks yang telah anda berikan style code akan seperti gambar di bawah ini:

BLOK KODE

jika pada style sebelumnya (inline) digunakan untuk menuliskan sebuah potongan kode saja, style ini digunakan untuk menuliskan beberapa baris kode. Untuk menerapkan style ini, anda dapat menggunakan tag <pre> seperti berikut ini:

jika anda jalankan kode di atas, hasilnya akan seperti gambar di bawah ini:

selain blok kode seperti contoh di atas, anda juga dapat membuat blok kode dengan scroll bar dengan maksimal tinggi blok kode 350px, yaitu dengan menambahkan class .pre-scrollable. Sebagai contoh, tuliskan kode berikut:

Baca juga artikel Terkait:

VARIABEL
Anda dapat menggunakan tag <var> untukmengindikasikan sebuah baris teks sebagai variable. Sebagai contoh adalah penulisan <var>y</var> = <var>m</var><var>x</var> + <var>b</var> seperti gambar di bawah ini:

Tampilan dari Script Variable Code:
SAMPLE OUTPUT
Style ini digunakan untuk mengindikasikan sebuah teks sebuah output dari program, yaitu dengan menggunakan tag <samp>
INPUT KEYBOARD
Bootstrap memungkinkan teks yang anda tulis menggunakan markup <kbd> menjadi lebih stylish dan lebih memperkuat identitas suatu teks sebagai karakter atau sebuah tombol pada keyboard. Contoh penggunaan input keyboard dapat anda tuliskan kode berikut:

Tampilan dari penggunaan <kbd> akan seperti gambar di bawah ini: