Markdown: Sintaks Tambahan

Sintaks-sintaks tambahan dalam Markdown

Abdurraziq Bachmid

18 February 2021 · 6 menit dibaca normal

Logo Markdown oleh Dustin Curtis dari markdown-mark Repository

Tinjauan

Sintaks-sintaks dasar Markdown sebenarnya cukup untuk digunakan dalam pemformatan elemen yang sederhana, tapi terkadang sintaks-sintaks tersebut dirasa belum cukup bagi sebagian orang. Pada akhirnya beberapa orang dan organisasi mengambil inisiatif untuk menambahkan beberapa sintaks tambahan seperti; tabel, blok kode, penyorotan sintaks dan lainnya ke dalam sintaks Markdown.

Sintaks-sintaks tambahan tersebut tidak dibuat/ditetapkan oleh pembuat aslinya atau suatu badan standarisasi sehingga masing-masing orang/organisasi dapat membuat sintaksnya masing-masing. Ini berakibat pada, sintaks-sintaks tambahan tersebut adakalanya hanya didukung oleh sebagian aplikasi Markdown saja. Jadi, penting untuk memastikan bahwa sintaks-sintaks tambahan yang akan kita gunakan didukung oleh aplikasi Markdown yang kita gunakan.

1. Tabel

Kita dapat membuat elemen header tabel dengan menggunakan tiga atau lebih tanda hubung/minus --- dan tanda garis vertikal/lurus (pipe) | untuk memisahkan setiap kolom. Contoh;

1
2
3
4
5

| Heading Kolom 1 | Heading Kolom 2 |
| --------------- | --------------- |
| Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| Baris 2 Kolom 1 | Baris 2 Kolom 2 |
| Baris 3 Kolom 1 | Baris 3 Kolom 2 |

1.1 Perataan (Alignment)

Untuk mengatur perataan (Alignment) teks dalam suatu kolom pada tabel kita dapat menggunakan tanda titik dua :. Contohnya; untuk rata kiri :---, rata kanan ---: dan rata tengah :---:.

1
2
3
4
5

| Rata kiri   | Rata tengah | Rata kanan  |
| :---------- | :---------: | ----------: |
| Lorem       | Ipsum       | dolor       |
| sit         | amet        | consectetur |
| adipisicing | ametssa     | conitetur   |

1.2 Memformat Teks dalam Tabel

Kita dapat memformat teks di dalam tabel seperti menebalkan, memiringkan, membuat tautan dsb.

1
2
3
4

| Heading Kolom 1            | Heading Kolom 2 |
| -------------------------- | --------------- |
| **tebal**                  | *miring*        |
| [link](https://raziq.tech) | `kode`          |

Untuk menampilkan karakter garis vertikal/lurus (pipe) | dalam tabel kita harus menggunakan kode karakter HTML |.

1
2
3

| Heading Kolom 1        | Heading Kolom 2        |
| ---------------------- | ---------------------- |
| Baris 1 | Kolom 1 | Baris 1 | Kolom 2 |

2. Blok Kode

Kita dapat membuat blok kode dengan menggunakan tiga tanda kutip (backticks) ``` atau tiga tanda gelombang (tilde) ~~~ pada baris sebelum dan sesudah blok kode.

1
2
3
4
5
6
7

```
{
  "name": "Budi",
  "id": "BUDI123",
  "age": 25
}
```

{
  "name": "Budi",
  "id": "BUDI123",
  "age": 25
}

2.1 Penyorotan Sintaks (Syntax Highlighting)

Untuk menambahkan fitur penyorotan sintaks (syntax highlighting) pada suatu blok kode kita harus menuliskan nama sintaks yang akan kita gunakan setelah tiga tanda kutip (backticks) ``` atau tiga tanda gelombang (tilde) ~~~ sebelum kita menuliskan kodenya.

Contoh; untuk membuat penyorotan sintaks JSON maka kita perlu menuliskannya seperti berikut;

1
2
3
4
5
6
7

```json
{
 "name": "Budi",
 "id": "BUDI123",
 "age": 25
}
```

{
 "name": "Budi",
 "id": "BUDI123",
 "age": 25
}

Catatan: Sebelum menggunakan fitur penyorotan sintaks (syntax highlighting) pastikan bahwa aplikasi Markdown yang kita gunakan mendukung sintaks tersebut.

3. Catatan Kaki (Footnote)

Untuk membuat referensi catatan kaki, kita dapat menggunakan tanda sisipan ^ dan pengenal di dalam tanda kurung siku [] (mis., [^1]). Pengenal tersebut bisa berupa angka atau kata, tetapi tidak boleh berisi spasi atau tab. Pengenal hanya menghubungkan referensi catatan kaki dengan catatan kaki itu sendiri.

Untuk menambahkan catatan kaki, kita dapat menggunakan tanda sisipan ^ dan pengenalnya di dalam tanda kurung siku [] lalu diikuti tanda titik dua : dan spasi kemudian teks catatannya (mis., [^1]: Ini catatan kaki). Kita tidak perlu meletakkan catatan kaki di akhir dokumen. Kita dapat meletakkannya di mana saja kecuali di dalam elemen seperti; daftar (list), blockquote, dan tabel dsb.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

`Markdown` adalah bahasa markup ringan dengan sintaksis pemformatan teks sederhana.[^1]
Tujuan dari desain utamanya adalah keterbacaan. [^catatanPanjang]


[^1]: "Markdown". 2013-12-04. Diarsipkan dari versi asli tanggal 2004-04-02.

[^catatanPanjang]: Markdown Syntax "Daring Fireball – Markdown – Syntax". 2013-06-13.

    *A Markdown-formatted document should be publishable as-is, as plain text,
    without looking like it’s been marked up with tags or formatting instructions.*

4. ID Judul (Heading IDs)

ID pada suatu judul (heading) dapat kita tentukan sendiri dengan menuliskan nama ID-nya di antara tanda kurung kurawal {} pada baris yang sama dengan judul (heading) tersebut. Contoh;

1

### Judul {#judul-mantap}

Dalam format HTML bentuknya adalah seperti berikut:

<h3 id="judul-mantap">Judul</h3>

5. Daftar definisi (Definition List)

Daftar definisi dapat dibuat dengan cara; mengetikkan nama istilah di baris pertama. kemudian pada baris berikutnya, mengetikkan tanda titik dua : diikuti dengan spasi dan definisinya. Contoh:

1
2
3
4
5
6

Istilah Pertama
: Ini definisi dari istilah pertama.

Istilah Kedua
: Ini definisi dari istilah kedua.
: Ini definisi lainnya dari istilah kedua.

Dalam format HTML bentuknya adalah seperti berikut:

1
2
3
4
5
6
7

<dl>
    <dt>Istilah Pertama</dt>
    <dd>Ini definisi dari istilah pertama.</dd>
    <dt>Istilah Kedua</dt>
    <dd>Ini definisi dari istilah kedua.</dd>
    <dd>Ini definisi lainnya dari istilah kedua.</dd>
</dl>

Catatan: Antar daftar istilah harus dipisahkan baris kosong.

6. Teks Tercoret (Strikethrough)

Untuk membuat suatu teks tercoret kita harus menambahkan dua tanda gelombang (tilde) ~~ sebelum dan sesudah teks tersebut. Contoh;

1

Matahari terbit dari ~~barat~~ timur.

7. Daftar tugas (Task List)

Untuk membuat item daftar tugas (task list) kita harus menambahkan tanda - [ ] sebelum daftar item. Sementara untuk membuat item tercentang, ganti spasi dengan huruf x yang berada di antara tanda kurung siku tersebut (contoh; - [x]).

1
2
3

- [x] Bangun Pagi
- [ ] Mandi
- [ ] Sarapan

8. Emoji

Ada dua cara untuk menambahkan emoji ke dokumen Markdown; pertama copy dan paste emoji ke dalam dokumen Markdown atau kedua dengan menggunakan shortcode emoji di antara tanda titik dua : (mis., :joy: nantinya akan diformat menjadi 😂).

Kita bisa menggunakan emojipedia untuk mencari emoji yang ingin kita salin ke dokumen atau daftar emoji shortcode jika ingin menggunakan emoji shortcode.

9. Penautan URL Otomatis

Banyak aplikasi Markdown yang secara otomatis mengubah teks URL menjadi tautan. Contohnya ketika kita menuliskan link berikut;

1

https://raziq.tech

Secara otomatis akan diformat seperti berikut;

<a href="https://raziq.tech">https://raziq.tech</a>

Jika kita tidak ingin suatu teks URL ditautkan secara otomatis, kita harus mengapit URL tersebut dengan tanda kutip (backtick) `. Contoh;

1

`https://raziq.tech`

Maka akan diformat menjadi seperti berikut:

<code>https://raziq.tech</code>

Catatan: Cara ini sebenarnya hanya menyiasati agar URL ditampilkan sebagai elemen code <code> bukan link anchor <a>.

Referensi

1. Extended Syntax | Markdown Guide oleh Matt Cone dan kontributor; Diakses pada 18 Februari 2021