Markdown Cheatsheet Lengkap untuk Blogger Jekyll

Semua artikel di blog Jekyll ditulis dalam format Markdown — bahasa markup ringan yang didesain agar mudah dibaca bahkan dalam bentuk teks mentah. Dengan beberapa karakter sederhana, kamu bisa membuat heading, bold, italic, tabel, kode, dan masih banyak lagi tanpa perlu menyentuh HTML.

Artikel ini adalah referensi cepat yang bisa kamu bookmark dan kunjungi kembali kapan pun butuh.

Heading

# Heading 1 (H1)
## Heading 2 (H2)
### Heading 3 (H3)
#### Heading 4 (H4)
##### Heading 5 (H5)
###### Heading 6 (H6)

Di blog Jekyll, H1 biasanya dipakai untuk judul artikel (otomatis dari page.title). Mulai konten artikel dari H2.

Teks Dasar

Teks biasa ditulis seperti ini.

Paragraf dipisahkan dengan satu baris kosong.

**Teks tebal (bold)**
*Teks miring (italic)*
***Teks tebal dan miring***
~~Teks dicoret (strikethrough)~~
`Kode inline`

Hasil:

Teks biasa ditulis seperti ini.

Teks tebal (bold) Teks miring (italic) Teks tebal dan miring ~~Teks dicoret~~ Kode inline

Link

[Teks link](https://contoh.com)
[Teks link dengan title](https://contoh.com "Judul tooltip")
[Link ke halaman lain di blog](/cara-install-jekyll/)
[Link ke anchor di halaman ini](#heading-judul)

<!-- Referensi link (berguna untuk link yang sering dipakai) -->
[Kunjungi Jekyll][jekyll-link]
[jekyll-link]: https://jekyllrb.com

Gambar

![Alt text gambar](/assets/images/foto.jpg)
![Alt text](/assets/images/foto.jpg "Caption gambar")

<!-- Gambar sebagai link -->
[![Alt text](/assets/images/thumbnail.jpg)](https://link-tujuan.com)

Untuk kontrol lebih (ukuran, lazy loading), gunakan HTML langsung:

<img src="/assets/images/foto.jpg" alt="Deskripsi gambar"
     width="800" height="450" loading="lazy">

List

Unordered List (Bullet)

- Item pertama
- Item kedua
  - Sub-item (indent 2 spasi)
  - Sub-item lain
- Item ketiga

* Bisa juga pakai asterisk
+ Atau tanda plus

Ordered List (Nomor)

Item pertama
Item kedua
Item ketiga
Sub-item bernomor
Sub-item lain

Task List (Checklist)

- [x] Tugas sudah selesai
- [ ] Tugas belum selesai
- [x] Item lain yang selesai

Blockquote

> Ini adalah blockquote satu baris.

> Blockquote bisa juga
> lebih dari satu baris.

> **Blockquote dengan format:**
> Bisa mengandung *italic*, **bold**, atau `kode`.
>
> Dan bisa multi-paragraf.

Kode

Kode Inline

Gunakan perintah `bundle exec jekyll serve` untuk menjalankan server.

Blok Kode dengan Syntax Highlighting

Gunakan triple backtick dan nama bahasa:

```javascript
function halo(nama) {
  console.log(`Halo, ${nama}!`);
}
```

```python
def halo(nama):
    print(f"Halo, {nama}!")
```

```bash
bundle exec jekyll serve --livereload
```

```yaml
layout: post
title: "Judul Artikel"
author: kiki
```

Bahasa yang didukung Jekyll (via Rouge): ruby, python, javascript, html, css, bash, yaml, json, sql, java, php, go, rust, dan banyak lagi.

Tabel

| Kolom 1 | Kolom 2 | Kolom 3 |
|---------|---------|---------|
| Data A  | Data B  | Data C  |
| Data D  | Data E  | Data F  |

<!-- Dengan alignment -->
| Kiri    | Tengah  | Kanan   |
|:--------|:-------:|--------:|
| Teks    | Teks    | Teks    |
| Data    | Data    | 100     |

Hasil:

Kolom 1	Kolom 2	Kolom 3
Data A	Data B	Data C
Data D	Data E	Data F

Garis Horizontal

---
***
___

Ketiganya menghasilkan <hr> — garis pemisah horizontal.

HTML di dalam Markdown

Markdown Jekyll (Kramdown) mendukung HTML langsung:

<div class="info-box">
  Ini adalah kotak info dengan class CSS kustom.
</div>

<details>
  <summary>Klik untuk lihat detail</summary>
  Konten tersembunyi yang bisa di-expand.
</details>

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Karakter Escape

Untuk menampilkan karakter Markdown secara literal (bukan sebagai format), gunakan backslash \:

\*Ini bukan italic\*
\**Ini bukan bold\**
\# Ini bukan heading
\[Ini bukan link\]

Fitur Khusus Kramdown (Jekyll)

Jekyll menggunakan Kramdown sebagai parser Markdown, yang punya beberapa fitur tambahan:

Atribut pada Elemen

## Judul dengan ID Kustom
{: #id-kustom}

Paragraf dengan kelas CSS.
{: .nama-class}

![Gambar](foto.jpg){: .float-right width="300"}

Footnote

Ini teks dengan catatan kaki.[^1]

[^1]: Ini adalah isi catatan kaki yang muncul di bawah halaman.

Definition List

Jekyll
: Static Site Generator yang dibangun dengan Ruby.

Markdown
: Bahasa markup ringan untuk membuat konten web.

Tips Penulisan di Blog Jekyll

Satu artikel, satu H1 — jangan pakai H1 di dalam konten karena sudah dipakai untuk judul artikel
Gunakan blank line antara elemen berbeda (heading, paragraf, list) untuk hasil yang konsisten
Alt text gambar selalu diisi untuk SEO dan aksesibilitas
Konsisten dengan tanda list — pilih - atau * dan pakai konsisten di seluruh artikel
Preview sebelum publish — jalankan bundle exec jekyll serve dan cek tampilan di browser sebelum commit

Kesimpulan

Markdown yang sederhana ini cukup untuk membuat konten blog yang kaya dan terstruktur. Tidak perlu hafal semuanya sekaligus — simpan cheatsheet ini sebagai referensi dan lihat seperlunya. Semakin sering menulis, semakin natural dan cepat prosesnya.