Kupas tuntas Markdown dengan Cheatsheet

Tutorial belajar markdown dengan cepat dibahas sampai tuntas.

irfnrdh
irfnrdh  

Markdown adalah sebuah bahasa markup dari text to html. Kesederhanaan markdown membuatnya begitu populer saat ini dalam dunia tulis menulis secara digital. Apalagi kemunculan Jamstack membuat markdown jelas tak dipandang sebelah mata.

Jamstack (JavaScript, APIs, and Markup) adalah sebuah cara baru dalam membangun sebuah website. Contohnya seperti website desainex ini yang menggunakan arsitektur Jamstack dalam pengembangan web agar memberikan kinerja yang lebih baik, keamanan yang tinggi dan jelas biaya yang lebih hemat. Selengkapnya pembahasan Jamstack.

Tidak hanya penggunaannya pada Jamstack saja. Markdown juga biasa digunakan dibeberapa tempat seperti github, CMS, dokumentasi dan pesan instan seperti whatsapp, telegram dan lainya.

Karena kesederhanaan dan mudah


Ingat ya, markdown disini bukanlah istilah “Penurunan harga”, tapi sebuah format bahasa.

Oke. Langsung saja kita bahasa satu persatu.

Daftar Isi

dimulai dari ..

Cheatsheet

Berikut adalah cheatsheet markdown atau sebuah rangkuman dari beberapa kegunaan yang ada pada markdown yang biasa digunakan sebagai referensi. Untuk penjelasannya silahkan diklik di element yang ingin kamu ketahui.

Element Markdown Syntax
Heading # H1
## H2
### H3
Bold **bold text**
Italic *italicized text*
Blockquote > blockquote
Ordered List 1. First item
2. Second item
3. Third item
Unordered List - First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
Code `code`
Horizontal Rule ---
Link [title](https://www.example.com)
Image ![alt text](image.jpg)
Table | Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
Fenced Code Block ```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
Footnote Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
Heading ID ### My Great Heading {#custom-id}
Definition List term
: definition
Strikethrough ~~The world is flat.~~
Task List - [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Sintak Dasar

Heading (Judul)

Heading digunakan untuk membuat judul dan bagian-bagian dari judul secara sistematika. Penggunaan heading ini sangat erat kaitannya dengan aturan teknis pada seo dengan penggunaan judul sesuai dengan tingkatannya.

# Judul tingkat 1 #
## Judul tingkat 2 ##
### Judul tingkat 3 ###          
#### Judul tingkat 4 ####
##### Judul tingkat 5 ##### 

Catatan : tanda pagar sebelah kanan merupakan sebuah opsional yang tidak wajib. Bisa juga seperti dibawah ini

# Judul tingkat 1 
## Judul tingkat 2 
### Judul tingkat 3         
#### Judul tingkat 4 
##### Judul tingkat 5 

Paragraf (Tulisan)

Paragraf adalah bagian terpenting dalam sebuah tulisan. Membuat paragraf bisa menggunakan baris baru untuk memisahkan antar paragraf.

Saya sangat suka menggunakan Markdown.

Saya pikir saya akan menggunakannya untuk semua format dokumen tulisan saya saat ini. 

jika dirender dan dilihat html formatnya maka hasilnya akan seperti

<p>Saya sangat suka menggunakan Markdown.</p>

<p>Saya pikir saya akan menggunakannya untuk semua format dokumen tulisan saya saat ini.</p>

Catatan : Jangan melakukan indentasi diawal paragraf dengan spasi atau tabs. Biarkan paragraf tetap berada di posisi sebelah kiri.

Line Break (Baris Baru)

Membuat garis baru dapat menggunakan dua spasi atau lebih. Bisa juga menggunakan html tag seperti <br>.

Baris pertama selanjutnya diakhiri dengan dua spasi selanjutnya.  
dan di baris berikutnya.

Bisa juga dibaris pertama menggunakan tag HTML setelahnya. <br>
dan baris berikutnya.

Baris dengan backslash. \
bisa juga tapi tidak semuanya support.

Catatan : dibeberapa aplikasi markdown bisa membuat baris baru dengan backslash \ tapi tidak begitu direkomendasikan.
Nanti bisa menjadi kendala jika pindah-pindah teknologi stacknya.

Bold (Huruf Tebal)

Membuat tulisan tebal dimarkdown bisa menggunakan bintang dan garis bawah sebelum dan susudah tulisan.

I just love **bold text****.  
I just love __bold text____.  
Love**is**bold  

jika dirender maka akan seperti ini,

I just love <strong>bold text</strong>. 
I just love <strong>bold text</strong>.
Love<strong>is</strong>bold

Catatan : Sebaiknya gunakan tanda bintang dua kali sebelum dan sesuah kalimat yang ingin dijadikan huruf tebal.

Italic (Huruf Miring)

Membuat tulisan huruf cetak miring atau italic di markdown bisa menggunakan bintang dan garis bawah sebelum dan susudah tulisan hanya satu kali.

Italicized text is the *cat's meow*.	
Italicized text is the _cat's meow_.	
A*cat*meow

jika dirender, HTML nya akan jadi seperti ini

Italicized text is the <em>cat's meow</em>.
Italicized text is the <em>cat's meow</em>.
A<em>cat</em>meow

Bold & Italic (Huruf Tebal dan Miring)

Membuat tulisan huruf cetak miring dan tebal sekaligus dimarkdown dapat menggunakan tanda bintang tiga kali sebelum tulisan dan sesudahnya.

This text is ***really important*****.	

This text is ___really important_____.	
This text is __*really important*____.	
This text is **_really important_****.	
This is really***very***important text.

jika dirender, HTML nya akan jadi seperti ini

This text is <strong><em>really important</em></strong>.

This text is <strong><em>really important</em></strong>.
This text is <strong><em>really important</em></strong>.
This text is <strong><em>really important</em></strong>.
This is really<strong><em>very</em></strong>important text.

Catatan : Sebaiknya gunakan tanda bintang tiga kali sebelum dan sesuah kalimat yang ingin dijadikan huruf miring dan tebal.

Blockquotes (Kutipan)

Membuat kutipan blockquotes dapat menggunakan tanda lebih dari > diawal kalimat.

> Dorothy followed her through many of the beautiful rooms in her castle.

Jika dirender maka jadinya akan seperti berikut

Dorothy followed her through many of the beautiful rooms in her castle.

tampilannya akan berbeda menyesuaikan dengan style yang diterapkan.

Berikut jika ingin banyak paragraf dalam satu blockquotes

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

atau terdapat blockquotes dalam blockquotes atau istilahnya nested blockquotes.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

bisa juga menambahkan judul, list dan gaya tulisan di blockquotesnya seperti berikut

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan****.

list (Urutan)

Dalam membuat urutan setidaknya ada dua yang bisa kamu gunakan. Pertama urutan yang terurut dan urutan yang tidak terurut atau maksudnya tanpa angka yang bisa dihitung.

Ordered List (Urutan yang terurut)

1. First item
2. Second item
3. Third item
4. Fourth item

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

Code

Horizontal Rules

Images

Escaping Characters

HTML

Sintak Tambahan

Tables

Fenced Code Blocks

Footnotes

Heading IDs

Membuat ID pada setiap heading agar memudahkan kembali pada judul tersebut dengan pemanggilan melalui link.

Berikut contoh jika dalam tulisan ingin kembali kepada judul-judul menggunakan link pada heading dapat menggunakan seperti berikut

## Judul (Heading) {#id-disini}  
[Kembali ke Judul H2](#id-disini)

contohnya klik link kembali cheatsheet

Definition Lists

Strikethrough

Task Lists

Emoji

Automatic URL Linking

Disabling Automatic URL Linking

Downloads

Download semua sintax dan langsung di coba sendiri. Download cheat sheet.

Comments

comments powered by Disqus