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
Note: file markdown sendiri memiliki format
.md
misalhello.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__
Membuat Link
Link di markdown cukup tambahkan kurung siku, dan kurung biasa
[Pasuruan Dev](https://pasuruan.dev)
Hasilnya :
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:
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:
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 :
Nama | Club |
L. Messi | Barcelona |
C. Ronaldo | Juventus |
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
Menulis Inline Code
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
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.