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. Markdown juga sering digunakan dalam membuat isi readme file pada suatu project/aplikasi. Contohnya seperti file readme.md pada Github.
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
#### Ini heading 4
Hasilnya :
Ini heading 3
Ini heading 4
Secara default, heading akan mempunyai ID sesuai dengan nama heading nya (dapat dilihat melalui klik kanan halaman website lalu view page source). Jika kamu ingin nama ID nya berbeda, kamu dapat menggunakan tanda kurung kurawal {} untuk merubah nama ID nya. Contoh :
### Ini heading 3 {#heading3}
#### Ini heading 4 {#heading4}
Hasilnya :
Ini heading 3
Ini heading 4
🔶 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
2. Teh
3. Madu
Hasilnya :
- Kopi
- Teh
- 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
- Teh
- Madu
Hasilnya:
- Kopi
- Teh
- Madu
Contoh dengan tanda bintang :
* Kopi
* Teh
* Madu
Hasilnya :
- Kopi
- Teh
- Madu
🔵 Membuat Bold dan Italic Tulisan
Bold
Untuk membuat tulisan tebal pada markdwon, kamu bisa mengunakan tanda bintang dua kali ** atau tanda garis bawah dua kali __. Ini contoh nya :
**Ini contoh tulisan tebal dengan tanda bintang**
__Ini contoh tulisan tebal dengan tanda garis bawah__
Hasilnya :
Ini contoh tulisan tebal dengan tanda bintang
Ini contoh tulisan tebal dengan tanda garis bawah
Italic
Untuk membuat tulisan miring pada markdwon, kamu bisa mengunakan tanda bintang satu kali * atau tanda garis bawah satu kali __. Ini contoh nya :
*Ini contoh tulisan miring dengan tanda bintang*
_Ini contoh tulisan miring dengan tanda garis bawah_
Hasilnya :
Ini contoh tulisan miring dengan tanda bintang
Ini contoh tulisan miring dengan tanda garis bawah
Gabungan Bold dan Italic
Untuk menggabungkan tebal dan miring pada markdown, kamu dapat menggabungkan kode diatas misalnya menjadi tanda _** dan **_. Ini contohnya :
_**Ini tulisan miring dan tebal**_
Hasilnya :
Ini tulisan miring dan tebal
💾 Membuat Tulisan Dicoret
Untuk membuat tulisan dicoret pada markdown, kamu bisa menggunakan tanda ~~. Contoh :
~~Tulisan ini dicoret~~
Hasilnya :
Tulisan ini dicoret
⚛️ Penulisan Kode Program
Untuk menuliskan kode dalam kalimat, gunakan tanda backtick 1 kali `. Contoh :
Ini adalah tag image : `<img>`
Hasilnya :
Ini adalah tag image : <img>
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.
🔗 Membuat Link URL
Untuk menambahkan link url markdown seperti ini : [Text](url).
Contoh :
[Belajarisme](https://www.belajarisme.com/)
Hasilnya : Belajarisme
🖼️ Membuat Link Image
Untuk menambahkan link gambar di markdown seperti ini : .
Contoh :
Hasilnya :
Untuk membuat image yang responsive di markdown, kamu dapat mengakalinya dengan membuat css seperti ini :
img[src$='#auto']
{
max-width: 100%;
}
Setelah dibuatkan css nya, penulisan di markdown nya menjadi seperti ini :
🎬 Menampilkan Video Youtube dengan iframe
Berikut ini untuk menampilkan video dengan <iframe> di markdown :
Contoh :
<iframe src="https://www.youtube.com/embed/r00ikilDxW4" width="100%" height="480" frameborder="0" scrolling="no" allowfullscreen></iframe>
Hasilnya :
📓 Menampilkan PDF Google Drive dengan iframe
Berikut ini untuk menampilkan pdf dengan <iframe> di markdown :
Contoh :
<iframe src="https://drive.google.com/file/d/1WitPi7PYo3zUvMEpxjhjhuhxuhuxhg/preview" width="100%" height="480" frameborder="0" scrolling="no" sandbox="allow-scripts allow-same-origin"></iframe>
🆎 Membuat 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 Task List
Untuk membuat task list di markdown, kamu dapat membuatnya dengan tanda - [ ], dan tanda x untuk isi nya.
Contoh :
- [ ] Jalan-jalan
- [ ] Nonton
- [x] Ngoding
Hasilnya seperti dibawah ini :
- Jalan-jalan
- Nonton
- Ngoding
🦶 Membuat Catatan Kaki
Untuk membuat catatan kaki di markdown, kamu dapat membuatnya dengan cara memberikan tanda [^1]. Angka 1 bisa diganti sesuai nomor urut catatan kakinya. Contoh :
Belajar Markdown itu seru[^1]. Belajar HTML juga seru[^2].
[^1]: https://www.belajarisme.com/markdown/
[^2]: Belajar HTML di Belajarisme
Hasilnya seperti ini : Belajar Markdown itu seru1. Belajar HTML juga seru2.
💬 Membuat Komentar
Untuk membuat komentar di markdown kamu dapat menggunakan <!-- -->, maka tulisan atau konten yang ada didalam tag tersebut tidak akan terlihat.
⚠️ Mengabaikan Formating Markdwon
Jika kita ingin mengabaikan format pada markdown, kita dapat menggunakan tanda \ . Contoh :
\*Tulisan ini tidak miring.\*
Hasilnya :
*Tulisan ini tidak miring.*
🪑 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) :
| Judul 1 | Judul 2 |
|---|---|
| Isi baris 1 | Isi baris 1 lagi |
| Isi kolom 1 | Isi kolom 2 |
🚪 Lain-lain
Untuk tag lainnya, bisa menggunakan tag yang ada pada HTML seperti :
- Delete
Elemendengan<del> - Insert Elemen dengan
<ins> - Subscript Elemen dengan
<sub> - Superscript Elemen dengan
<sup> - Abbreviation Tag dengan
<abbr>dengan atributtitle. Contoh :<abbr title="HyperText Markup Langage">HTML</abbr>. Hasilnya : HTML - Cite Tag dengan
<cite>. Contoh<cite>— Belajarisme</cite>. Hasilnya : — Belajarisme
☕ 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. Agar konten markdown nya lebih menarik, kamu juga bisa menggunakan Emoji.
Terima kasih telah membaca materi di website kami. Jika Anda merasa informasi ini bermanfaat, jangan ragu untuk membagikannya dengan teman-teman atau rekan kerja Anda. Mari bersama-sama sebarkan kebaikan! 🙏✨
Belajar HTML di Belajarisme ↩︎
