Panduan menulis Markdown lengkap

Panduan menulis Markdown lengkap

Pengenalan sintaks - sintaks penulisan markdown file

Hai temen - temen semua, saya akan bagiin ke kalian tentang gimana sih nulis di file markdown ? mungkin beberapa dari kalian udah banyak yang tahu tentang markdown ini.

Markdown sebenernya hampir sama sih dengan HTML, namun markdown lebih sederhana dan mudah. Sintaks nya pun nggak aneh - aneh kayak di html. Nah, markdown banyak digunakan untuk menulis dokumentasi.

Saat ini markdown udah banyak di gunakan seperti:

  • Penulisan Buku (gitbook)
  • CMS seperti Gohst, Gatsby, Jekyll
  • Format teks pada : Facebook, Whatsapp, Telegram
  • Dan lain - lain

Apa itu markdown

Markdown (lightweight markup language) merupakan bahasa markup yang lebih ringan dari pada HTML untuk formatting text.

Markdown dibuat pada tahun 2004 oleh John Gruber. Tujuannya untuk mempermudah penulisan dokumen web—mudah ditulis dan mudah dibaca—Karena menulis langsung HTML terasa melelahkan dan susah dibaca.

Contoh penulisan:

Aku *sedang* belajar **menulis** dengan [markdown](https://en.wikipedia.org/wiki/Markdown).

Baik kita bandingkan dengan sintaks HTML

Aku <em>sedang</em> belajar <strong>menulis</strong> dengan <a href="https://en.wikipedia.org/wiki/Markdown">markdown</a>.

Dari contoh diatas sudah kelihatan, dengan menggunakan markdown formatting text jadi lebih sederhana dan cepat. Saya pun merasakan perbedaannya ketika menulis blog yang menggunakan markdown sebagai content nya.

Persiapan software

Sebenarnya ada banyak software untuk menulis markdown atau bahkan kalian bisa pakai editor online seperti dillinger.io

Disini saya sarankan pake Visual Studio Code, karena software sudah populer dan banyak digunakan jadi nggak perlu install lagi. Bagi kalian yang belum punya ikuti link diatas.

Di perlukan plugin tambahan agar bisa dapat preview dari file markdown kayak di github. Kalian cari saja di extensions nya si VSCode lalu install. Seperti berikut

Ekstensi Markdown

Note: file markdown sendiri memiliki format .md misal hello.md.

Format dasar Markdown

Nah, lansung saja kita belajar cara penulisan di markdown

Membuat Header Text

Heading atau judul di markdown dapat dibuat dengan tanda pagar '#'.

# Heading 1
## Heading 2
### Heading 3

Sama seperti di HTML, heading memiliki 6 size tergantung jumlah # yang ada di depannya.

Format Teks

Untuk memformat teks tebal, miring, atau strikeline, maka bisa lakukan seperti ini

**Tebal**

*Miring*

~~~StrikeLine~~

__underscore__

Link di markdown cukup tambahkan kurung siku, dan kurung biasa

[Pasuruan Dev](https://pasuruan.dev)

Hasilnya :

Pasuruan Dev

Atau bisa menambahkan keterangan ketika link di hover

[Pasuruan Dev](https://pasuruan.dev/ "Link ke Pasuruan Dev")

Hasilnya hover linknya: Pasuruan Dev

atau jika ingin menampilkan url secara lengkap langsung saja tulis linknya seperti

https://pasuruan.dev

Maka akan seperti berikut:

pasuruan.dev

Menyisipkan Gambar

Caranya hampir sama dengan menampilkan link, dengan menambahkan (!) di depan kurung siku. Seperti berikut

![Contoh Gambar](https://images.unsplash.com/photo-1619640879184-9e19945e2a92?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80)

Hasilnya: Contoh Gambar

Membuat List

Tidak seperti di HTML dengan markdown lebih mudah untuk penulisannya

* Air putih
* Es jeruk
* Nasi
    * Nasi putih
    * Nasi jagung
* Sate kambing

1. Pasuruan
2. Jakarta
3. Surabaya

Maka akan menjadi:

  • Air putih
  • Es jeruk
  • Nasi
    • Nasi putih
    • Nasi jagung
  • Sate kambing

  • Pasuruan

  • Jakarta
  • Surabaya

Untuk unordered list, kita bisa menggunakan tanda bintang (*) dan juga minus (-). Seperti berikut

- Selasa
- Rabu
- Kamis

Menyisipkan Quote

Pada HTML penulisan quote menggunakan tag <blockquote> untuk membuat kutipan. Markdown cukup menambah tanda '>' didepan. Seperti contoh berikut:

> Lorem ipsum dolor sit amet

Hasilnya akan menjadi :

Lorem ipsum dolor sit amet

Nested quote atau quote dalam quote juga bisa dilakukan

>> Lorem ipsum dolor sit amet

Maka akan menjadi:

Lorem ipsum dolor sit amet

Membuat Tabel

Penulisan tabel pada Markdown bisa dilihat seperti dibawah ini

| Nama       | Club       |
| ---------- | ---------- |
| L. Messi   | Barcelona  |
| C. Ronaldo | Juventus   |

Hasilnya :

NamaClub
L. MessiBarcelona
C. RonaldoJuventus

Membuat Horizontal Line

Horizontal Line atau pada HTML lebih sering dikenal dengan tag <hr>, dapat dibuat dengan tanda ---. Seperti contoh berikut ini

Ini section atau paragraf 1

---

Ini section atau paragraf 2

Maka hasil nya seperti berikut ini

Ini section atau paragraf 1


Ini section atau paragraf 2

Inline code ini sangat banyak digunakan untuk blogging. Terlebih ketika materi blog nya tentang pemprograman, teknik ini akan sering sekali digunakan. Berikut pengimplementasiannya

Dengan menggunakan command `docker stop <container id>` maka container dengan id yang dimaksut akan berhenti berjalan

Hasilnya:

Dengan menggunakan command docker stop <container id> maka container dengan id yang dimaksut akan berhenti berjalan

Menulis source code di Markdown juga sering digunakan, ketika menulis README di repo banyak programmer yang menyematkan kodenya kedalam markdown. Nah, Caranya gimana

    ```kotlin
        fun main() {
            print("Hello World")
        }
hasilnya:
```kotlin
fun main() {
    print("Hello World")
}

Sudah terhiglighting, karena di awal saya sudah mendeskripsikan bahwa ini sintaks dari bahasa Kotlin. Markdown sendiri mendukung banyak bahasa untuk syntax higlighting nya. Kalian bisa ikuti Link, untuk lebih lengkapnya.

Referensi