Panduan Lengkap Belajar Markdown Untuk Pemula
icon-markdown

⛾ Home markdown Jumat, 14 Oktober 2022 (Diupdate: Kamis, 19 Januari 2023) - 📗 9 Menit

Disini kita akan belajar semua hal yang perlu kita ketahui tentang markdown. Mulai dari histori, tujuan dibuatnya markdown, alat yang perlu disiapkan untuk menulis markdown, dan kita akan belajar sintaks-sintaks markdown.

Mari mulai belajar…

Apa itu Markdown?

Markdown adalah salah satu bahasa markah ringan yang memiliki sintaksis dan format teks polos/biasa.

Markah adalah cara penulisan dokumen yang memiliki sintaksis yang berbeda dari teks biasa.

Bahasa ini diciptakan oleh John Gruber dan Aaron Swartz pada tahun 2004 dengan tujuan keterbacaan (mudah dibaca, mudah ditulis, dan secara opsional diubah ke HTML atau XHTML yang valid dan memiliki struktur yang baik).

Intinya, markdown itu salah satu bahasa markah (seperti HTML, XHTML, XML, dll) yang cara penulisannya sama dengan teks polos (tanpa menggunakan tag yang ribet seperti HTML/XHTML).

Markdown dirancang agar bisa dikonversi atau diubah menjadi HTML atau XHTML menggunakan alat seperti teks editor khusus untuk file markdown.

Di visual studio code atau teks editor populer sejenis, biasanya sudah memiliki kemampuan ini.

Text Editor Gratis untuk menulis Markdown

- Linux

- MacOS

  • Visual Studio Code + Extension
    vscode-ext-markdown-all-in-one
    extension untuk menulis file markdown
  • MacDown

- Windows

  • Visual Studio Code + Extension
    vscode-ext-markdown-all-in-one
    extension untuk menulis file markdown
  • Ghostwriter
  • Typora
  • Dan lain-lain

- Lainnya (Bonus)

- Online Markdown Editor (Bisa untuk Android, IOS, Linux, Mac, Windows, dll)

Selain menggunakan software yang khusus untuk file markdown. Kita juga dapat menggunakan Text Editor Online yang dikhususkan untuk file markdown.

Saya akan membagikan beberapa yang menurut saya cukup bagus dan yang pasti Gratis.

  1. HackMD
  2. StackEdit
  3. Dilinger
  4. Dan lain-lain

Panduan Menulis Markdown

Sebelum mulai menulis, kita perlu tau format untuk file markdown. File markdown menggunakan ekstensi .md atau .markdown pada akhir nama file.

Sebagai contoh file markdown adalah seperti postingan1.md atau postingan2.markdown.

Dibawah ini adalah berbagai format penulisan markdown yang dapat kita gunakan.

Jika terdapat kekurangan pada format penulisan, kamu bisa langsung komentar dibawah ya 😄.

1. Garis Miring

- Contoh penulisan -
1_Kucing adalah hewan yang paling banyak di pelihara_
- Keluaran atau output -

Kucing adalah hewan yang paling banyak di pelihara

Gunakan simbol _ diawal dan diakhir kata/kalimat yang ingin di garis miring-kan.

2. Huruf tebal atau Bold

- Contoh penulisan -
1**Anjing adalah hewan yang setia**
- Keluaran atau output -

Anjing adalah hewan yang setia

Gunakan simbol ** diawal dan diakhir kata/kalimat yang ingin di huruf tebal-kan. Kita juga dapat menggunakan __ diawal dan diakhir kata/kalimat sebagai pengganti **.

3. Tebal dan miring

- Contoh penulisan -
1**_Saya tidak percaya ini!_**
- Keluaran atau output -

Saya tidak percaya ini!

Gunakan simbol **_ diawal dan diakhir kata/kalimat yang ingin di huruf tebal-kan dan sekaligus di miring-kan.

Bedanya yang diakhir kata/kalimat, simbol _ lebih dulu ditulis daripada simbol **.

4. Heading

- Contoh penulisan -
1# Heading 1     => h1
2## Heading 2     => h2
3### Heading 3     => h3
4#### Heading 4     => h4
5##### Heading 5     => h5
6###### Heading 6     => h6
- Keluaran atau output -

Heading 1 => h1

Heading 2 => h2

Heading 3 => h3

Heading 4 => h4

Heading 5 => h5
Heading 6 => h6

Gunakan simbol # diawal kata/kalimat dan berikan satu spasi sebelum menulis kata tersebut. Besaran Heading mengikuti banyaknya # yang ditulis.

- Contoh penulisan -
1[tulis teks link disini](https://urlmu.com)
- Keluaran atau output -

tulis teks link disini

Teks dari link ditulis di dalam kurung siku [] dan

link atau url diletakkan di dalam kurung biasa ().

- Contoh penulisan -
1Kucing adalah [hewan][[refHewan] kategori mamalia. [Hewan][[refHewan] mamalia adalah [hewan][[refHewan] yang menyusui dan melahirkan.
2
3[refHewan]: https://id.wikipedia.org/wiki/Hewan
- Keluaran atau output -

Kucing adalah hewan kategori mamalia. Hewan mamalia adalah hewan yang menyusui dan melahirkan.

Kita juga dapat menyiapkan link yang merujuk. Maksud merujuk disini adalah kita menggunakan kata yang kita definisikan yang akan menuju ke link tujuan yang telah kita atur.

Cara pengaturannya cukup mudah, kita hanya perlu memasukkan kata yang kita definisikan (pada contoh diatas yaitu kata refHewan) dan kemudian mengatur link tujuannya.

Cara menggunakan linknya juga sangat mudah. Kita hanya perlu memanggil kata tersebut (refHewan) sebagai pengganti link atau url tujuan pada halaman, postingan, artikel kita dan gunakan kurung siku [], bukan kurung biasa ().

7. Menyisipkan Foto atau Gambar

- Contoh penulisan -
1![Ketik teks alternatif disini (yaitu atribut alt jika di HTML)](https://www.url.com/markdown.svg)
- Keluaran atau output -

Ketik teks alternatif disini (yaitu atribut alt jika di HTML)

Untuk menyisipkan sebuah gambar ke halaman/postingan, gunakan cara yang sama seperti membuat sebuah link.

Bedanya, kita perlu menambahkan simbol ! diawal, sebelum kurung siku [].

8. Image reference yang dapat digunakan berkali-kali

- Contoh penulisan -
1![Kucing][cat] adalah hewan kategori mamalia. ![Kucing][cat] banyak dipelihara manusia karena tidak berbahaya.
2
3[cat]: https://domainku.com/images/cat1.jpg
- Keluaran atau output -

Kucing adalah hewan kategori mamalia. Kucing banyak dipelihara manusia karena tidak berbahaya. source foto: pexels.com

Cara pengaturan dan penggunaannya sama dengan membuat link reference. Bedanya hanya di tanda seru !.

Pastikan sumber gambar yang dituju valid.

9. Kutipan atau Blockquote

- Contoh penulisan -
1> Kucingku bernama hebe. Dia sangat lucu :)
- Keluaran atau output -

Kucingku bernama hebe. Dia sangat lucu :)

Gunakan simbol anak panah kanan > ditambah satu spasi untuk membuat sebuah kutipan atau blockquote.

10. Kutipan atau Blockquote dengan indentasi

- Contoh penulisan -
1> Kucingku bernama hebe. Dia sangat lucu :)
2> 
3> Apa kamu suka kucing?
- Keluaran atau output -

Kucingku bernama hebe. Dia sangat lucu :)

Apa kamu suka kucing?

Untuk membuat jarak atau indentasi di dalam blockquote. Kita harus menambahkan simbol > di baris baru, tanpa harus menuliskan sesuatu pada baris tersebut.

11. List tak-terurut

- Contoh penulisan -
1* Kucing
2* Angsa
3* Kancil
- Keluaran atau output -
  • Kucing
  • Angsa
  • Kancil

Gunakan simbol bintang * ditambah satu spasi untuk membuat list tak terurut.

12. Sub-list tak-terurut

- Contoh penulisan -
1* Resep ikan bakar
2    * kunyit
3    * bawang
4        * merah
5        * putih
6    * Jeruk nipis
7    * Kecap bangau
8    * Garam
9    * Micin
- Keluaran atau output -
  • Resep ikan bakar
    • kunyit
    • bawang
      • merah
      • putih
    • Jeruk nipis
    • Kecap bangau
    • Garam
    • Micin

13. List angka

- Contoh penulisan -
11. Nomor satu
22. Nomor dua
33. Nomor tiga
- Keluaran atau output -
  1. Nomor satu
  2. Nomor dua
  3. Nomor tiga

Gunakan angka untuk membuat list angka. Beri jarak satu spasi setelah menuliskan angkanya.

14. Paragraf di antara list

- Contoh penulisan -
11. Harga sepatu  
2 Harga sepatu mulai dari 50 ribu sampai dengan 1 juta rupiah. Sesuaikan dengan kemampuan anda.
32. Harga sandal  
4 Harga sandal relatif murah jika dibandingkan dengan harga sepatu. Anda dapat membelinya mulai dari 10 ribu sampai dengan 400 ribu rupiah.
  1. Harga sepatu
    Harga sepatu mulai dari 50 ribu sampai dengan 1 juta rupiah. Sesuaikan dengan kemampuan anda.
  2. Harga sandal
    Harga sandal relatif murah jika dibandingkan dengan harga sepatu. Anda dapat membelinya mulai dari 10 ribu sampai dengan 400 ribu rupiah.

Setiap ingin membuat paragraf di dalam list. Beri 2 spasi di akhir setiap listnya.

Dan berikan 1 spasi didepan sebelum menulis paragraf.

15. Membuat jarak atau indentasi (break line)

- Contoh penulisan -
1Di desa acimalaka terjadi kebakaran!.  
2Pemadam kebakaran sedang dalam perjalanan ke lokasi kebakaran.
- Keluaran atau output -

Di desa acimalaka terjadi kebakaran!.
Pemadam kebakaran sedang dalam perjalanan ke lokasi kebakaran.

Berikan 2 spasi diakhir kata/kalimat agar kata atau kalimat selanjutnya diletakkan pada baris selanjutnya.

16. Blok kode satu baris (Inline Code Block)

- Contoh penulisan -
1`Tulis code satu baris kamu disini`
- Keluaran atau output -

Tulis code satu baris kamu disini

Gunakan backtick ` diawal dan diakhir code.

17. Blok kode panjang (Code Blocks)

- Contoh penulisan -
1package main
2import "fmt"
3
4func main() {
5    fmt.Println("Hello World")
6}

Gunakan triple backtick ``` diawal dan diakhir code.

18. Blok kode panjang dengan Highlight

- Contoh penulisan -
```html
<DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>
```

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

Tuliskan nama bahasa yang ingin di highlight di akhir backtick ```. Silahkan cek link di bawah ini untuk melihat bahasa yang di dukung di framework Hugo.

Daftar bahasa yang mendukung Highlight

Klik disini untuk melihatnya

19. Tabel

- Contoh penulisan -
1 judul 1 | judul 2 | judul 3 
2---------|---------|---------
3 isi 1   | isi 2   | isi 3   
4 isi 1.1 | isi 2.1 | isi 3.1 
- Keluaran atau output -
judul 1 judul 2 judul 3
isi 1 isi 2 isi 3
isi 1.1 isi 2.1 isi 3.1

“Tidak perlu rapi seperti diatas, seperti dibawah ini juga bisa”.

1judul 1|judul 2|judul 3
2---|---|---
3isi 1 | isi 2 | isi 3 
4isi 1.1 | isi 2.1 | isi 3.1 
- Hasil akhirnya sama saja -
judul 1 judul 2 judul 3
isi 1 isi 2 isi 3
isi 1.1 isi 2.1 isi 3.1

20. Membuat tabel rata kanan, tengah, atau kiri

- Contoh penulisan -
1|  judul 1  |   judul 2   |   judul 3  |
2|   :---    |    :---:    |    ---:    |
3| rata kiri | rata tengah | rata kanan |
4|           |             |            |
- Keluaran atau output -
table head table head table head
kiri tengah kanan

Rata Kiri gunakan :—

Rata Tengah gunakan :—:

Rata Kanan gunakan —:

21. Penanda untuk kata atau kalimat yang penting

- Contoh penulisan -
1Saat ini, kucing[^1] adalah salah satu hewan peliharaan terpopuler di dunia. Kucing yang garis keturunannya tercatat secara resmi sebagai kucing peranakan murni[^2] (pure breed), adalah kucing jenis persia, siam, manx, dan sphinx.
2
3[^1]: teks catatan pertama
4[^2]: teks catatan kedua

Gunakan [^angka] di bagian yang ingin ditandai, dan tulis juga di bagian paling bawah (akhir) dokumen markdown beserta penjelasan dari penanda tersebut. Seperti contoh diatas.

Antara [^1] yang disematkan di paragraf dan [^1]: yang berada di bawah halaman, adalah saling terhubung satu sama lain dan dapat diklik.

22. Cara lain membuat penanda

- Contoh penulisan -
1[catatan 1](#note1)
- Keluaran atau output -

catatan 1

Kita dapat menggunakan link ini yang akan langsung menuju link yang ditandai Biasanya cara ini digunakan untuk membuat penanda di judul artikel.

Cara menggunakannya adalah dengan membagikan link yang ditandai (https://domainku.com/post1#note1) ke media lainnya.

Misalnya ke facebook, twitter, linkedin, instagram, tiktok, whatsapp, dan media lainnya.

23. Mencoret kata / kalimat

- Contoh penulisan -
1~~kata yang dicoret~~
- Keluaran atau output -

kata yang dicoret

Gunakan simbol double Tilde ~~ diawal dan diakhir kata/kalimat untuk menjadikan teks atau kalimat dicoret.

Teks dicoret biasanya digunakan untuk teks yang sudah tidak lagi relevan seperti contohnya tanggal kadaluarsa makanan atau minuman, atau untuk mencoret harga asli pada produk yang di diskon.

24. TO DO LIST atau Daftar Tugas

- Contoh penulisan -
11. [x] Write the press release
22. [ ] Update the website
33. [ ] Contact the media
- Keluaran atau output -
  1. Write the press release
  2. Update the website
  3. Contact the media

Sematkan video youtube ke file markdown

- Contoh penulisan -
1[![Teks untuk Video](https://img.youtube.com/vi/gnJbPO-GFIw/mqdefault.jpg)](https://www.youtube.com/watch?v=gnJbPO-GFIw)
- Keluaran atau output -

Teks untuk Video

Kita hanya perlu mengubah kode id video youtube gnJbPO-GFIw menjadi kode video youtube yang ingin disematkan ke file markdown.

Untuk video biasa (selain video youtube). Kita perlu menggunakan tag html <video> atau tag html <embed>.

25. Sematkan video youtube menggunakan shortcodes (untuk pengguna Hugo)

- Contoh penulisan -

{{< youtube 11_kode_video_youtube >}}

{{< youtube 0GZxidrlaRM >}}

- Keluaran atau output -

Selesai

Kategori: Markdown

captcha-img