Belajar Markdown

Updated 10 January 2024 by Heru - Tutorial

Jika Anda baru membuat website statis seperti di Github Pages, Hugo atau lainnya dan sekarang Anda bingung untuk membuat artikel atau konten nya, berarti Anda berada di halaman yang tepat. Karena disini kita akan belajar Markdown yaitu bahasa yang digunakan untuk membuat artikel di website statis.

Markdown adalah sebuah cara untuk memformat text di website. Kurang lebih hampir sama dengan HTML namun lebih sederhana. File yang dihasilkan Markdown yaitu berakhiran .md atau .markdown, sedangkan pada html berakhiran .html.

Dengan markdown kita dapat mengontrol tampilan dokumen seperti memformat kata dengan cetak miring atau tebal, menambahkan image, membuat heading, membuat list, membuat link, membuat quotes, membuat tabel, syntax highlight dan beberapa kontrol tampilan dokumen lainnya.

Membuat Heading

Untuk membuat heading atau judul di Markdown sangat mudah yaitu menggunakan hashtag #. Hashtag lalu diikuti kata untuk judulnya. 1 buah hashtag berarti heading 1. 2 buah hashtag berarti heading 2, dan seterusnya. Contoh :

Ini heading 3, menggunakan ###

Ini heading 4, menggunakan ####

Membuat List

Untuk mebuat list di Markdown cara nya sangat simple. Berikut ini contohnya :

Numbered List

Untuk numbered list atau ordered list, kalian tinggal tulis angka dan tanda titik lalu isi listnya. Contoh :

1. Kopi, menggunakan 1. Kopi
2. Teh, menggunakan 2. Teh
3. Madu, menggunakan 3. Madu

Bulleted List

Untuk bulleted list atau unordered list, kalian tinggal tulis tanda strip - atau tanda bintang * lalu isi listnya. Contoh dengan tanda strip :

• Kopi, menggunakan - Kopi
• Teh, menggunakan - Teh
• Madu, menggunakan - Madu

Contoh dengan tanda bintang :

• Kopi, menggunakan * Kopi
• Teh, menggunakan * Teh
• Madu, menggunakan * Madu

Inline HTML Elemen

Pada HTML banyak sekali tag untuk memformat dokumen. Berikut ini tag yang sering digunakan baik di HTML maupun di Markdown :

• Untuk menebalkan huruf, gunakan tanda bintang 2 kali **Ini Contoh Tebal**. Bisa juga dengan tanda double garis 2 __, contoh __contoh tebal__

• Untuk memiringkan huruf, gunakan tanda garis bawah _Ini Contoh Miring_. Bisa juga dengan tanda bintang *, contoh *contoh miring*

• Gabungan tebal miring, contoh _**tebal miring**_

• Untuk menuliskan kode dalam kalimat, gunakan tanda backtick 1 kali `Contoh kode`

• Untuk menuliskan kode secara penuh, gunakan tanda backtick 3 kali di ikuti bahasa pemrogramannya (optional). Contoh :

  ```js
  // Example can be run directly in your JavaScript console
  
  // Create a function that takes two arguments and returns the sum of those arguments
  var adder = new Function("a", "b", "return a + b");
  
  // Call the function
  adder(2, 6);
  // > 8
  ```
  

  Hasilnya :

  // Example can be run directly in your JavaScript console
  
  // Create a function that takes two arguments and returns the sum of those arguments
  var adder = new Function("a", "b", "return a + b");
  
  // Call the function
  adder(2, 6);
  // > 8
  

  Hasil nya tidak terlalu kelihatan jika di Hugo, berbeda dengan di Github Pages. Untuk mengakalinya, teman-teman dapat menggunkan syntax highlighter milik Hugo.

Link URL

Untuk menambahkan link url markdown seperti ini : [Text](url).

Contoh : [Belajarisme](https://www.belajarisme.com/)

Hasilnya : Belajarisme

Link Image

Untuk menambahkan link gambar di markdown seperti ini : ![Alt Teks](url "Title Teks").

Contoh : ![logo](/assets/img/web/belajarisme-avatar.png "Logo Belajarisme") .

Hasilnya :

Blockquotes

Untuk menggunakan quotes di markdown caranya sangat mudah, yaitu dengan menggunakan tanda lebih besar dari >. Contoh :

> Jangan tanyakan apa yang negara berikan kepadamu, tapi tanyakan apa yang kamu berikan kepada negaramu! 
> -John F. Kennedy-

Hasilnya :

Jangan tanyakan apa yang negara berikan kepadamu, tapi tanyakan apa yang kamu berikan kepada negaramu! -John F. Kennedy-

Di Hugo hasilnya tidak terlalu kelihatan seperti di Github Pages. Untuk mengakalinya bisa menggunakan <q> dan </q>. Hasilnya :

Jangan tanyakan apa yang negara berikan kepadamu, tapi tanyakan apa yang kamu berikan kepada negaramu!

Membuat Tabel

Untuk membuat tabel di markdwon caranya sangat mudah, yaitu dengan menggunakan tanda garis - untuk garis judul nya dan tanda | sebagai garis pemisah horizontal antar kolom nya. Contoh :

Judul 1 | Judul 2
------- | -------
Isi baris 1 | Isi baris 1 lagi
Isi kolom 1 | Isi kolom 2

Hasilnya (Untuk di Hugo, hasil border tabelnya tidak terlalu terlihat) :

Lain-lain

Untuk tag lainnya, bisa menggunakan tag yang ada pada HTML seperti :

• Delete Elemen dengan <del>

• Insert Elemen dengan <ins>

• Subscript _Elemen dengan <sub>

• Superscript ^Elemen dengan <sup>

• Abbreviation Tag dengan <abbr> dengan atribut title. Contoh : <abbr title="HyperText Markup Langage">HTML</abbr>. Hasilnya : HTML

• Cite Tag dengan <cite>. Contoh <cite>&mdash; Belajarisme</cite>. Hasilnya : — Belajarisme

• Menampilkan video dengan <iframe>.

  Contoh : <iframe src="https://www.youtube.com/embed/r00ikilDxW4" width="100%" height="480" frameborder="0" scrolling="no"></iframe>

  Hasilnya :

Kesimpulan

Jika kita perhatikan dan lihat koding dalam Markdown itu lebih sederhana dibandingkan koding HTML. Namun di Markdown tidak selengkap HTML.

Untuk belajar Markdown lebih detil silakan kunjungi GitHub Flavored Markdown. Jika ingin berbagi pengalaman atau ada yang ingin ditanyakan, silakan berkomentar dibawah, dan jangan lupa di share ya. Terima kasih, semoga bermanfaat.