Panduan Lengkap Kode Markdown (.md) untuk Penulis Blog Astro Awam
Bagi Anda yang baru saja bermigrasi atau mulai menggunakan Astro sebagai Static Site Generator (SSG), format penulisan artikel tentu tidak lagi menggunakan editor visual biasa, melainkan menggunakan Markdown (.md). Markdown dirancang agar penulis bisa fokus pada konten teks tanpa harus terganggu oleh kode HTML yang rumit.
Namun, bagi pengguna awam, aturan penulisan Markdown terkadang membingungkan. Salah mengetik spasi atau simbol bisa membuat tampilan artikel di Astro menjadi berantakan. Oleh karena itu, artikel ini menyajikan panduan kamus kode Markdown terlengkap yang didukung penuh oleh Astro, lengkap dengan cara penerapan yang benar dari pembuka hingga penutup.
1. Struktur Judul (Headings)
Astro menggunakan simbol pagar (#) untuk menentukan tingkatan judul atau sub-judul di dalam artikel. Pastikan untuk selalu memberikan spasi setelah simbol pagar sebelum menuliskan judul.
Tabel Kode Heading:
| Kode Markdown | Tingkatan Elemen | Catatan Penting |
|---|---|---|
# Judul Utama |
Heading 1 (H1) | Jangan digunakan di isi konten. Astro biasanya sudah otomatis membuat H1 dari judul utama artikel. |
## Sub-Judul Utama |
Heading 2 (H2) | Gunakan ini untuk bab atau pembahasan baru di dalam artikel. |
### Anak Sub-Judul |
Heading 3 (H3) | Gunakan untuk rincian yang berada di bawah pembahasan H2. |
#### Sub-Bagian Kecil |
Heading 4 (H4) | Gunakan jika membutuhkan sub-rincian yang lebih dalam lagi. |
2. Format Paragraf dan Aturan Ganti Baris (Line-Break)
Salah satu kendala utama yang sering dialami pemula di Markdown adalah saat menekan tombol Enter, teks di hasil akhir tetap menyatu dalam satu baris. Berikut adalah aturan yang benar:
- Membuat Paragraf Baru: Tekan tombol Enter sebanyak dua kali (berikan jarak satu baris kosong antarteks).
- Ganti Baris Baru (Tanpa Paragraf Baru): Ketik dua spasi di akhir kalimat, lalu tekan Enter satu kali. Anda juga bisa menyisipkan tag HTML
<br />di akhir kalimat.
3. Dekorasi Teks (Gaya Huruf)
Untuk memberikan penekanan pada kata atau kalimat tertentu, Anda bisa menggunakan kombinasi simbol bintang (*) atau gelombang (~).
Tabel Kode Gaya Huruf:
| Kode Markdown | Hasil Tampilan | Fungsi |
|---|---|---|
**Teks Tebal** |
Teks Tebal | Menegaskan poin penting. |
*Teks Miring* |
Teks Miring | Digunakan untuk istilah asing. |
***Tebal dan Miring*** |
Tebal dan Miring | Kombinasi penegasan intensif. |
~~Teks Dicoret~~ |
Koreksi atau informasi usang. | |
`Teks Kode` |
Teks Kode |
Menuliskan nama file, fungsi, atau perintah pendek. |
4. Pembuatan Daftar (Lists)
Daftar sangat berguna untuk menyusun poin-poin informasi agar lebih mudah dibaca oleh pengunjung blog.
A. Daftar Berurutan (Numbered List)
Cukup ketik angka diikuti tanda titik dan spasi:
1. Langkah Pertama
2. Langkah Kedua
3. Langkah KetigaB. Daftar Tidak Berurutan (Bullet List)
Gunakan simbol strip (-) atau bintang (*) diikuti dengan spasi:
- Poin Informasi A
- Poin Informasi B
- Poin Informasi C5. Tautan (Link) dan Gambar
Format penulisan link dan gambar hampir mirip, namun sering kali posisinya terbalik bagi pengguna baru.
Cara Memasang Link:
Gunakan kurung siku [ ] untuk teks yang bisa diklik, diikuti kurung biasa ( ) untuk alamat URL tujuan.
[Kunjungi Situs Resmi Astro](https://astro.build)Cara Memasang Gambar:
Sama seperti format link, namun wajib diawali dengan tanda seru (!) di bagian paling depan. Kurung siku digunakan untuk teks alternatif (alt text) jika gambar gagal dimuat.
6. Kutipan Teks (Blockquotes)
Jika Anda ingin memasukkan opini, kutipan dari tokoh, atau referensi eksternal, gunakan simbol lebih besar dari (>) di awal baris.
> "Teknologi terbaik adalah teknologi yang mempermudah kehidupan manusia, bukan mempersulitnya."7. Struktur Kode Tabel Kompleks (Markdown Tables)
Membuat tabel secara manual di Markdown memerlukan ketelitian tinggi. Format ini menggunakan kombinasi garis vertikal (|) sebagai pembatas kolom, dan tanda hubung/strip (-) sebagai pembatas judul tabel.
Contoh Kode Markdown Tabel:
| No | Nama Fitur | Status Dukungan |
| :- | :--------: | --------------: |
| 1 | Markdown | Didukung Penuh |
| 2 | MDX | Didukung Penuh |
| 3 | HTML Tag | Didukung |Cara Mengatur Posisi Teks pada Tabel:
- Rata Kiri: Berikan tanda titik dua di sebelah kiri baris pembatas (
:-). - Rata Tengah: Berikan tanda titik dua di kedua sisi baris pembatas (
:-:). - Rata Kanan: Berikan tanda titik dua di sebelah kanan baris pembatas (
-:).
Kesimpulan dan Penutup
Dengan menguasai kamus kode dasar di atas, proses penulisan artikel di platform berbasis Astro akan terasa jauh lebih cepat, efisien, dan menyenangkan. Anda tidak perlu lagi menghafal kode HTML yang panjang untuk menghasilkan artikel blog yang rapi dan profesional.
Kunci utama kenyamanan menulis menggunakan Markdown adalah konsistensi, terutama dalam memperhatikan spasi setelah simbol perintah. Selamat mencoba, dan semoga panduan praktis ini dapat membantu kelancaran aktivitas blogging Anda!