Tutorial Markdown#

Ini adalah contoh yang menunjukkan cara menulis file Markdown. Dokumen ini merangkum sintaks inti dan ekstensi umum (GFM).

Elemen Blok
Elemen Inline
Lain-lain
- Tautan Otomatis
- Escape Karakter
HTML Inline

Elemen Blok#

Paragraf dan Baris Baru#

Paragraf#

Tag HTML: <p>

Gunakan satu atau lebih baris kosong untuk memisahkan paragraf. (Baris yang hanya berisi spasi atau tab juga dianggap sebagai baris kosong.)

Kode:

1
Ini akan menjadi
2
satu baris.
3

4
Ini adalah paragraf kedua.

Pratinjau:

Ini akan menjadi satu baris.

Ini adalah paragraf kedua.

Baris Baru#

Tag HTML: <br />

Tambahkan dua atau lebih spasi di akhir baris untuk membuat baris baru.

Kode:

1
Ini tidak akan menjadi
2
satu baris.

Pratinjau:

Ini tidak akan menjadi
satu baris.

Judul#

Markdown mendukung dua gaya judul: Setext dan atx.

Setext#

Tag HTML: <h1>, <h2>

Gunakan tanda sama dengan (=) untuk <h1> dan tanda hubung (-) untuk <h2>, dalam jumlah berapa pun, sebagai “garis bawah”.

Kode:

1
Ini adalah H1
2
=============
3
Ini adalah H2
4
-------------

Pratinjau:

Ini adalah H1#

Ini adalah H2#

atx#

Tag HTML: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Gunakan 1-6 tanda pagar (#) di awal baris, sesuai dengan <h1> hingga <h6>.

Kode:

1
# Ini adalah H1
2
## Ini adalah H2
3
###### Ini adalah H6

Pratinjau:

Ini adalah H1#

Ini adalah H2#

Ini adalah H6#

Opsional: Anda dapat “menutup” judul atx di akhir baris. Jumlah tanda pagar di akhir tidak harus sama dengan di awal.

Kode:

1
# Ini adalah H1 #
2
## Ini adalah H2 ##
3
### Ini adalah H3 ######

Pratinjau:

Ini adalah H1#

Ini adalah H2#

Ini adalah H3#

Kutipan#

Tag HTML: <blockquote>

Markdown menggunakan gaya email > sebagai simbol kutipan. Untuk hasil terbaik, ganti baris secara manual dan tambahkan > di depan setiap baris.

Kode:

1
> Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

Pratinjau:

Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown memungkinkan cara “malas”: dalam paragraf dengan baris baru yang keras, cukup tambahkan > di baris pertama.

Kode:

1
> Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

Pratinjau:

Ini adalah kutipan dengan dua paragraf. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Kutipan dapat bersarang (kutipan di dalam kutipan) dengan menambah level >.

Kode:

1
> Ini adalah level kutipan pertama.
2
>
3
> > Ini adalah kutipan bersarang.
4
>
5
> Kembali ke level pertama.

Pratinjau:

Ini adalah level kutipan pertama.
Ini adalah kutipan bersarang.
Kembali ke level pertama.

Kutipan dapat berisi elemen Markdown lainnya, termasuk judul, daftar, dan blok kode.

Kode:

1
> ## Ini adalah judul.
2
>
3
> 1.   Ini adalah item daftar pertama.
4
> 2.   Ini adalah item daftar kedua.
5
>
6
> Berikut adalah contoh kode:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

Pratinjau:

Ini adalah judul.#
Ini adalah item daftar pertama.
Ini adalah item daftar kedua.
Berikut adalah contoh kode:
1
return shell_exec("echo $input | $markdown_script");

Daftar#

Markdown mendukung daftar berurutan (angka) dan tidak berurutan (poin).

Daftar Tidak Berurutan#

Tag HTML: <ul>

Daftar tidak berurutan dapat menggunakan tanda bintang (*), tanda tambah (+), atau tanda hubung (-).

Kode:

1
*   Merah
2
*   Hijau
3
*   Biru

Pratinjau:

Merah
Hijau
Biru

Sama dengan:

Kode:

1
+   Merah
2
+   Hijau
3
+   Biru

Atau:

Kode:

1
-   Merah
2
-   Hijau
3
-   Biru

Daftar Berurutan#

Tag HTML: <ol>

Daftar berurutan menggunakan angka diikuti titik:

Kode:

1
1.  Burung
2
2.  McHale
3
3.  Parish

Pratinjau:

Burung
McHale
Parish

Perhatian: Penulisan seperti di bawah ini dapat “secara tidak sengaja” memicu daftar berurutan:

Kode:

1
1986. Musim yang luar biasa.

Pratinjau:

Musim yang luar biasa.

Anda dapat menggunakan escape karakter backslash (\) pada titik:

Kode:

1
1986\. Musim yang luar biasa.

Pratinjau:

1986. Musim yang luar biasa.

Konten dengan Indentasi dalam Daftar#

Kutipan dalam Item Daftar#

Untuk menempatkan kutipan di dalam item daftar, Anda perlu mengindentasi simbol >:

Kode:

1
*   Item daftar dengan kutipan:
2

3
    > Ini adalah kutipan
4
    > di dalam item daftar.

Pratinjau:

Item daftar dengan kutipan:
Ini adalah kutipan di dalam item daftar.

Blok Kode dalam Item Daftar#

Untuk menempatkan blok kode di dalam item daftar, Anda perlu mengindentasi dua kali — 8 spasi atau dua Tab:

Kode:

1
*   Item daftar dengan blok kode:
2

3
        <kode di sini>

Pratinjau:

Item daftar dengan blok kode:
```
1
<kode di sini>
```

Daftar Bersarang#

Kode:

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

Pratinjau:

A
- A1
- A2
B
C

Blok Kode#

Tag HTML: <pre>

Indentasi setiap baris blok kode dengan setidaknya 4 spasi atau 1 tab.

Kode:

1
Ini adalah paragraf biasa:
2

3
    Ini adalah blok kode.

Pratinjau:

Ini adalah paragraf biasa:

1
Ini adalah blok kode.

Blok kode berlanjut hingga baris tanpa indentasi (atau akhir dokumen).

Di dalam blok kode, ampersan (&) dan kurung sudut (< >) secara otomatis diubah menjadi entitas HTML.

Kode:

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

Pratinjau:

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

“Blok kode berpagar” dan “penyorotan sintaks” di bawah ini adalah sintaks yang diperluas, Anda juga dapat menggunakannya untuk menulis blok kode.

Blok Kode Berpagar#

Gunakan pasangan backtick (seperti yang ditunjukkan di bawah) untuk mengelilinginya, sehingga Anda tidak perlu indentasi empat spasi.

Kode:

1
Berikut contohnya:
2

3
```
4
function test() {
5
  console.log("perhatikan baris kosong sebelum fungsi ini?");
6
}
7
```

Pratinjau:

Berikut contohnya:

1
function test() {
2
  console.log("perhatikan baris kosong sebelum fungsi ini?");
3
}

Penyorotan Sintaks#

Tambahkan pengenal bahasa opsional setelah blok kode berpagar untuk mengaktifkan penyorotan sintaks (lihat daftar bahasa yang didukung).

Kode:

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

Pratinjau:

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

Garis Pemisah (Garis Horizontal)#

Tag HTML: <hr /> Tempatkan tiga atau lebih tanda hubung (-), tanda bintang (*), atau garis bawah (_) pada satu baris. Spasi di antara simbol-simbol tersebut diperbolehkan.

Kode:

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

Pratinjau:

Tabel#

Tag HTML: <table>

Ini adalah sintaks yang diperluas.

Gunakan garis vertikal (|) untuk memisahkan kolom, tanda hubung (-) untuk memisahkan header, dan titik dua (:) untuk menentukan perataan.

Garis vertikal (|) di kedua sisi dan perataan bersifat opsional. Saat digunakan untuk pemisah header, setiap kolom membutuhkan setidaknya 3 tanda hubung.

Kode:

1
| Kiri | Tengah | Kanan |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

Pratinjau:

Kiri	Tengah	Kanan
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

Elemen Inline#

Tautan#

Tag HTML: <a>

Markdown mendukung dua gaya tautan: inline dan referensi.

Tautan Inline#

Format tautan inline: [Teks](URL "Judul")

Judul bersifat opsional.

Kode:

1
Ini adalah [contoh](http://example.com/ "Judul") tautan inline.
2

3
[Tautan ini](http://example.net/) tidak memiliki atribut judul.

Pratinjau:

Ini adalah contoh tautan inline.

Tautan ini tidak memiliki atribut judul.

Jika Anda mereferensikan sumber daya lokal di situs yang sama, Anda dapat menggunakan path relatif:

Kode:

1
Lihat halaman [Tentang Saya](/about/) saya untuk detailnya.

Pratinjau:

Lihat halaman Tentang Saya saya untuk detailnya.

Tautan Referensi#

Anda dapat mendefinisikan referensi tautan terlebih dahulu. Format definisi: [id]: URL "Judul"

Judul juga opsional. Saat mereferensikan, gunakan: [Teks][id]

Kode:

1
[id]: http://example.com/  "Judul Opsional Di Sini"
2
Ini adalah [contoh][id] tautan gaya referensi.

Pratinjau:

Ini adalah contoh tautan gaya referensi.

Keterangan:

Kurung siku berisi pengenal tautan (tidak peka huruf besar-kecil, dapat diindentasi hingga tiga spasi di sebelah kiri);
Diikuti oleh titik dua;
Kemudian satu atau lebih spasi (atau tab);
Kemudian URL tautan;
URL dapat secara opsional diapit oleh kurung sudut;
Secara opsional diikuti oleh atribut judul, diapit oleh tanda kutip atau kurung.

Ketiga definisi berikut ini setara:

Kode:

1
[foo]: http://example.com/  "Judul Opsional Di Sini"
2
[foo]: http://example.com/  'Judul Opsional Di Sini'
3
[foo]: http://example.com/  (Judul Opsional Di Sini)
4
[foo]: <http://example.com/>  "Judul Opsional Di Sini"

Jika Anda menggunakan kurung siku kosong, teks tautan itu sendiri akan digunakan sebagai nama.

Kode:

1
[Google]: http://google.com/
2
[Google][]

Pratinjau:

Google

Penekanan#

Tag HTML: <em>, <strong>

Markdown menggunakan tanda bintang (*) atau garis bawah (_) untuk menunjukkan penekanan. Satu pemisah sesuai dengan <em>; dua pemisah sesuai dengan <strong>.

Kode:

1
*satu tanda bintang*
2

3
_satu garis bawah_
4

5
**dua tanda bintang**
6

7
__dua garis bawah__

Pratinjau:

satu tanda bintang

satu garis bawah

dua tanda bintang

dua garis bawah

Tetapi jika ada spasi di kedua sisi, itu akan dianggap sebagai karakter biasa, bukan sintaks penekanan.

Anda dapat menggunakan backslash untuk escape:

Kode:

1
\*teks ini dikelilingi oleh tanda bintang harfiah\*

Pratinjau:

*teks ini dikelilingi oleh tanda bintang harfiah*

Kode Inline#

Tag HTML: <code>

Bungkus dengan backtick (`).

Kode:

1
Gunakan fungsi `printf()`.

Pratinjau:

Gunakan fungsi printf().

Jika kode inline Anda perlu menyertakan karakter backtick, Anda dapat menggunakan beberapa backtick sebagai pembatas:

Kode:

1
``Ada backtick harfiah (`) di sini.``

Pratinjau:

Ada backtick harfiah (`) di sini.

Pembatas di kedua sisi kode inline dapat berisi spasi (satu di awal, satu di akhir), yang nyaman untuk menempatkan karakter backtick di awal atau akhir kode:

Kode:

1
Satu backtick dalam rentang kode: `` ` ``
2

3
String yang dibatasi backtick dalam rentang kode: `` `foo` ``

Pratinjau:

Satu backtick dalam rentang kode: `

String yang dibatasi backtick dalam rentang kode: `foo`

Gambar#

Tag HTML: <img />

Sintaks gambar Markdown mirip dengan tautan, mendukung gaya inline dan referensi.

Gambar Inline#

Sintaks gambar inline: ![Teks Alternatif](URL "Judul")

Judul bersifat opsional.

Kode:

1
![Teks Alt](/path/to/img.jpg)
2

3
![Teks Alt](/path/to/img.jpg "Judul opsional")

Pratinjau:

Teks Alt

Keterangan:

Satu tanda seru !;
Diikuti oleh kurung siku, menempatkan teks alternatif gambar;
Kemudian kurung, berisi URL/path gambar, dan judul opsional (diapit tanda kutip).

Gambar Referensi#

Sintaks gambar referensi: ![Teks Alternatif][id]

Kode:

1
[id img]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Atribut judul opsional"
2
![Teks Alt][id img]

Pratinjau:

Teks Alt

Coretan#

Tag HTML: <del>

Ini adalah sintaks yang diperluas.

GFM menambahkan sintaks coretan.

Kode:

1
~~Teks yang salah.~~

Pratinjau:

~~Teks yang salah.~~

Lain-lain#

Tautan Otomatis#

Markdown mendukung cara mudah untuk membuat “tautan otomatis” (URL dan alamat email): cukup bungkus dengan kurung sudut.

Kode:

1
<http://example.com/>
2

3
<address@example.com>

Pratinjau:

http://example.com/

address@example.com

GFM secara otomatis mengenali URL standar dan mengubahnya menjadi tautan.

Kode:

1
https://github.com/emn178/markdown

Pratinjau:

https://github.com/emn178/markdown

Escape Karakter Backslash#

Markdown memungkinkan penggunaan backslash untuk escape karakter khusus sintaks Markdown, sehingga ditampilkan secara harfiah.

Kode:

1
\*tanda bintang harfiah\*

Pratinjau:

*tanda bintang harfiah*

Karakter berikut dapat di-escape dengan backslash untuk output harfiah:

Kode:

1
\   backslash
2
`   backtick
3
*   tanda bintang
4
_   garis bawah
5
{}  kurung kurawal
6
[]  kurung siku
7
()  kurung
8
#   tanda pagar
9
+   tanda tambah
10
-   tanda kurang (hubung)
11
.   titik
12
!   tanda seru

HTML Inline#

Untuk markup yang tidak dicakup oleh sintaks Markdown, Anda dapat menggunakan HTML asli secara langsung. Tidak perlu deklarasi khusus untuk beralih dari Markdown ke HTML, cukup tulis tagnya.

Kode:

1
Ini adalah paragraf biasa.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
Ini adalah paragraf biasa lainnya.

Pratinjau:

Ini adalah paragraf biasa.

Foo

Ini adalah paragraf biasa lainnya.

Harap dicatat: Sintaks Markdown tidak akan diproses di dalam tag HTML tingkat blok.

Berbeda dengan tag tingkat blok, sintaks Markdown akan diproses di dalam tag tingkat inline.

Kode:

1
<span>**Bekerja**</span>
2

3
<div>
4
    **Tidak Bekerja**
5
</div>

Pratinjau:

Bekerja

**Tidak Bekerja**

***