Markdown: Hugo - Hermit (4)

30 July 2019

Melanjutkan tulisan sebelumnya tentang menulis konten di Hugo dengan theme Hermit , kali ini saya akan lanjutkan dengan cara menulis konten dengan Markdown. Markdown merupakan bahasa markup seperti HTML, namun lebih sederhana tanpa tag. Markdown memang dirancang untuk memudahkan kita membuat konten web statis secara lebih manusawi.

Misal, Kalimat yang ditulis seperti ini:

Terdapat suatu pandangan bahwa National State telah mencerai-beraikan kita sebagai satu ummah

Bila ditulis dengan HTML, penulisannya:

<p>Terdapat suatu pandangan bahwa <i>National State</i> telah <u>mencerai-beraikan</u> <b><i><u>kita</u></i></b> sebagai <b>satu ummah</b>.</p>

Bandingkan jika menuliskannya dengan Markdown:

Terdapat suatu pandangan bahwa *National State* telah <u>mencerai-beraikan</u> <u>***kita***</u>sebagai **satu ummah**

Tentu penulisan di Markdown lebih mudah terbaca secara natural bila dibandingkan dengan format HTML. Namun, ada format yang tidak bisa di cover oleh Markdown, yaitu untuk membuat garis bawah (underline) seperti contoh pada kata “mencerai-beraikan” dan “kita” yang harus dibantu dengan tag HTML <u>. Secara semantic, format underline biasanya untuk menandakan kalau kata itu mengandung link (meski sekarang ini sering kali dibuat dengan warna yang berbeda bukan dengan garis bawah) sehingga memang tidak diperlukan di dalam Markdown.

Berikut ini format Markdown yang bisa kita gunakan untuk membuat file konten di Hugo.

1. Paragraf
2. Judul
3. ID Judul
4. Huruf Tebal, Miring, dan Tebal Miring
4.1. Huruf Dicoret
5. BlockQuotes
6. Daftar Urut
6.1 Daftar Urut Nomor
6.2 Daftar Urut Bukan Nomor
7. Gambar
8. Table
9. Garis Horizontal
10. Link
11. Menulis Code
12. Catatan Kaki
13. Daftar Definisi
14. Daftar Tugas
15. Mempertahankan Karakter
16. Kesimpulan

1. Paragraf

Membuat Paragraf di HTML, kita menggunakan tag p (<p>isi paragraf</p>) untuk membungkus isi tulisan yang kita buat.

Contoh:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptate, consectetur impedit aspernatur esse! Sapiente, animi corrupti doloribus sit, quibusdam accusantium repellat id reiciendis blanditiis nulla quisquam nostrum distinctio saepe!</p>

Di Markdown, kita tidak memerlukan tanda apa pun untuk membuat paragraf, cukup dituliskan seperti biasa:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias voluptate, consectetur impedit aspernatur esse! Sapiente, animi corrupti doloribus sit, quibusdam accusantium repellat id reiciendis blanditiis nulla quisquam nostrum distinctio saepe!

Selain paragraf dengan tag p, tag br yang berfungsi untuk pindah baris juga tidak perlu dituliskan. cukup dengan enter saja. Simple.

2. Judul (Heading)

Pada HTML kita mengenal judul atau heading dari level 1 sampai 6 dengan dituliskan sebagai berikut:

<h1>Judul Level 1</h1>
<h2>Judul Level 2</h2>
<h3>Judul Level 3</h3>
<h4>Judul Level 4</h4>
<h5>Judul Level 5</h5>
<h6>Judul Level 6</h6>

Tampilan yang dihasilkan di web browser:


Judul Level 1

Judul Level 2

Judul Level 3

Judul Level 4

Judul Level 5
Judul Level 6

Jadi semakin kita menambah nilai heading maka akan semakin rendah urutannya. Umumnya kita tidak menggunakan heading level 1 di dalam konten kecuali untuk judul utama, sehingga lebih banyak menggunakan heading level 2, atau lebih sesuai kebutuhan.

Di Markdown, memberi format judul pada baris adalah dengan memberinya tanda pagar (number sign/hash) #, jumlah pagar menandakan level heading yang diberikan.

# Heading Level 1
## Judul Level 2
### Judul Level 3
#### Judul Level 4
##### Judul Level 5
###### Judul Level 6

Selain dengan tanda pagar #, kita juga bisa menuliskannya dengan tanda strip (hypen) - dan sama dengan equals sign = (minimal lebih dari satu kali tanda strip) di bawah baris yang ingin kita jadikan sebagai judul. Hanya saja terbatas sampai pada judul level 2 saja. Tidak bisa lebih.

Judul Level 1

Judul Level 1
-----------

Judul Level 2

Judul
====

3 ID Judul

ID Judul atau Heading IDs adalah memberikan atribut id pada tag <h2> sehingga dapat dipanggil dari daftar isi (toc - table of content). Contohnya, bisa kita lihat pada postingan ini di mana saya membuat subjudulnya dengan menambahkan id sehingga saat kita klik akan berpindah ke bagian subjudul tersebut.

Membuat ID Judul di Markdown sangat mudah, kita hanya perlu menambahkan kurung kurawal {} dan mengisinya dengan tanda pagar # dan isi id-nya.

Contoh:

## ID Judul {#ID_Judul}

Hasilnya akan sama apabila ditulis dengan HTML seperti berikut:

<h2 id="ID_Judul">ID Judul</h2>

Setelah kita membuat ID Judul, biasanya diaplikasikan dengan membuat daftar isi sebagai kumpulan link ke ID Judul yang sudah kita buat. Atau, bisa juga diaplikasikan sebagai link di halaman web yang berbeda.

Di Markdown, kita membuatnya sebagai berikutny:

[3. ID Judul](#ID_Judul)

Lalu, bagaimana jika seandainya link dibuat di halaman yang berbeda dengan ID Judul? Tinggal tambahkan URL link-nya:

[3. ID Judul](https://www.fatoni.id/2019/07/hugo-hermit-4.html#ID_Judul)
## 3. ID Judul {#ID_Judul}

Hasilnya akan sama apabila ditulis dengan HTML seperti berikut:

Di Markdown, kita membuatnya sebagai berikutny:

3. ID Judul Lalu, bagaimana jika seandainya link dibuat di halaman yang berbeda dengan ID Judul? Tinggal tambahkan URL link-nya:

3. ID Judul

4. Huruf Tebal, Miring, dan Tebal Miring

Pada contoh sebelumnya sudah ditampilkan bagaimana kita memformat tulisan dengan huruf tebal, miring, dan kombinasi tebal - miring. Selain menggunakan tanda bintang sekali, dua kali, dan tiga kali untuk menghasilkan huruf tebal, miring, dan tebal miring. Kita bisa menggunakan tanda underscrore.

Lebih jelasnya perhatikan kalimat berikut yang dibuat dengan format tanda bintang (asterisk):

***Dinar - Dirham*** sebagai salah satu *penopang* kebangkitan ekonomi **umat**

Kita bisa menuliskannya dengan tanda underscore sekali untuk miring, underscore dua kali untuk tebal, dan underscore tiga kali untuk tebal dan miring.

___Dinar - Dirham___ sebagai salah satu _penopang_ kebangkitan ekonomi __umat__

Jadi kita bisa menggunakan dua cara, yaitu bisa menggunakan tanda bintang atau menggunakan tanda underscore.

4.1 Huruf Dicoret

Untuk membuat huruf dicoret (dicoret) di dalam HTML, kita bisa menggunakan tag <del> atau <s>.

Misal, untuk menampilkan tulisan berikut:

Persatuan yang lemah kuat diikat oleh satu simpul persamaan dan ditopang oleh seribu perbedaan.

Di Markdown, kita bisa membuatnya dengan tilde ~~ (two tilde symbols), sebagai berikut:

Persatuan yang ~~lemah~~ kuat diikat oleh satu simpul persamaan dan ditopang oleh seribu perbedaan

Memberikan tanda tilde ~~ tentu lebih nyaman dilihat daripada melihat tanda tag <s>, dan inilah kelebihan Markdown dalam memformat tampilan teks.

5. BlockQuotes

Format Blockquotes biasanya digunakan untuk menuliskan quote atau ungkapan, atau kata-kata yang menjadi poin penting tertentu yang dituliskan ulang.

Dalam HTML dituliskan:

<blockquote>"Lidah orang berakal berada di belakang hatinya, sedangkan hati orang bodoh berada di belakang lidahnya" - Ali bin Abi Thalib</blockquote>

Sementara untuk menuliskan hal sama di Markdown, ganti <blockquote> dengan tanda lebih dari greater-than sign >:

Hasilnya:

“Lidah orang berakal berada di belakang hatinya, sedangkan hati orang bodoh berada di belakang lidahnya” - Ali bin Abi Thalib

Jika quote dibuat lebih dari satu baris:

> sedangkan hati orang bodoh berada di belakang lidahnya
> - Ali bin Abi Thalib -

Lidah orang berakal berada di belakang hatinya, sedangkan hati orang bodoh berada di belakang lidahnya

  • Ali bin Abi Thalib -

6. Daftar Urut

Sama seperti menulis paragraf dan membuat baris baru, di Markdown kita tidak memerlukan penanda apa pun terutama saat membuat daftar urut berupa nomor.

6.1 Daftar Urut Nomor

Untuk membuat daftar berikut:

  1. Ketuhanan Yang Maha Esa
  2. Kemanusiaan yang adil dan beradab
  3. Persatuan Indonesia
  4. Kerakyatan yang dipimpin oleh hikmah kebijaksanaan dalam permusyawaratan/perwakilan
  5. Keadilan sosial bagi seluruh rakyat Indonesia

Kita hanya menuliskan hal sama di Markdown, seperti berikut:

1. Ketuhanan Yang Maha Esa
2. Kemanusiaan yang adil dan beradab
3. Persatuan Indonesia
4. Kerakyatan yang dipimpin oleh hikmah kebijaksanaan dalam permusyawaratan/perwakilan
5. Keadilan sosial bagi seluruh rakyat Indonesia

Namun, uniknya meski ditulis seperti di bawah ini, contoh:

1. Ketuhanan Yang Maha Esa
3. Kemanusiaan yang adil dan beradab
5. Persatuan Indonesia
4. Kerakyatan yang dipimpin oleh hikmah kebijaksanaan dalam permusyawaratan/perwakilan
2. Keadilan sosial bagi seluruh rakyat Indonesia

Hasil yang ditampilkan tetap urut sesuai nomor urutnya:

  1. Ketuhanan Yang Maha Esa
  2. Kemanusiaan yang adil dan beradab
  3. Persatuan Indonesia
  4. Kerakyatan yang dipimpin oleh hikmah kebijaksanaan dalam permusyawaratan/perwakilan
  5. Keadilan sosial bagi seluruh rakyat Indonesia

Sehingga menjadi tidak akan masalah jika kita menuliskan seperti berikut:

1. Ketuhanan Yang Maha Esa
1. Kemanusiaan yang adil dan beradab
1. Persatuan Indonesia
1. Kerakyatan yang dipimpin oleh hikmah kebijaksanaan dalam permusyawaratan/perwakilan
1. Keadilan sosial bagi seluruh rakyat Indonesia

Bila kita ingin menuliskan sub-list atau daftar yang menjorok masuk ke dalam, tambahkan spasi tiga ketuk.

1. Merah
   1. Biru
   1. Kuning
1. Hijau
1. Hitam

Hasilnya apabila ditampilkan di web browser:

  1. Merah
    1. Biru
    2. Kuning
  2. Hijau
  3. Hitam

6.2 Daftar Urut Bukan Nomor

Daftar urut bukan nomor adalah daftar dengan bulat hitam sebagai pengganti nomor atau disebut juga dengan nama Unordered Lists.

  • Merah
  • Biru
  • Kuning
  • Hijau
  • Hitam

Untuk membuatnya di Markdown, kita bisa menggunakan tiga tanda: dashes -, bintang (asterisk * ), atau plus +.

Penulisan dengan tanda bintang:

* Merah
* Biru
* Kuning
* Hijau
* Hitam

Penulisan dengan tanda strip:

- Merah
- Biru
- Kuning
- Hijau
- Hitam

Penulisan dengan tanda plus:

+ Merah
+ Biru
+ Kuning
+ Hijau
+ Hitam

Meski kita punya pilihan variasi tanda untuk digunakan, output yang ditampilkan tetap bulat hitam. Kecuali tanda untuk sub-daftar, yaitu berupa bulat putih dengan lingkaran hitam.

Merah
Biru
Kuning
Hijau
Hitam

Cara membuatnya dengan menambahkan spasi (minimal 2 spasi ) pada list yang ingin dijadikan sub-list:

* Merah
  *  Biru
  * Kuning
* Hijau
* Hitam

7. Gambar

Rasanya hambar bila konten tanpa gambar. Gambar tak semata untuk mendukung tulisan, tapi bisa memanjakan mata pembaca agar tak terlalu terpaku pada teks apabila teks terlalu menumpuk banyak.

Untuk memasukkan gambar ke dalam konten web menggunakan tag <img>

<img src="lokasi/namafilegambar.jpg" alt="Teks alternatif bila gambar tidak muncul" title="Teks saat gambar disorot"t>

di Markdown, kita bisa membuatnya seperti berikut:

![teks alternatif bila gambar tidak muncul](lokasi/namafilegambar.jpg "Teks saat gambar disorot")

Contoh:

![Payung Masjid Nabawi](https://1.bp.blogspot.com/-8oGs-4M523M/XUAkoxhUb_I/AAAAAAAAA48/UT-isRWB2TUZeuxFIN_83VXlGvfVz27dwCLcBGAs/s1600/statue-106987_640.jpg "Payung Masjid Nabawi")

Hasilnya:

Apabila gambar yang kita miliki ingin dijadikan sebagai link, kita bisa menggunakan format berikut:

[![teks alternatif bila gambar tidak muncul](lokasi/namafilegambar.jpg "Teks saat gambar disorot")](link gambar saat diklik) 

Bila diaplikasikan:

[![Payung Masjid Nabawi](https://1.bp.blogspot.com/-8oGs-4M523M/XUAkoxhUb_I/AAAAAAAAA48/UT-isRWB2TUZeuxFIN_83VXlGvfVz27dwCLcBGAs/s1600/statue-106987_640.jpg "Payung Masjid Nabawi")](https://pixabay.com/id/photos/patung-perunggu-patung-jalan-106987/)

Bila ditulis dengan HTML:

<a href="https://pixabay.com/id/photos/patung-perunggu-patung-jalan-106987/"><img src="https://1.bp.blogspot.com/-8oGs-4M523M/XUAkoxhUb_I/AAAAAAAAA48/UT-isRWB2TUZeuxFIN_83VXlGvfVz27dwCLcBGAs/s1600/statue-106987_640.jpg" alt="Payung Masjid Nabawi" title="Payung Masjid Nabawi"></a>

Hasilnya:

Payung Masjid Nabawi

Note: Pada gambar pertama saya sengaja menampilkannya dengan ukuran yang lebih kecil sebanyak 50% dari gambar kedua.

8. Table

Tabel merupakan struktur dalam HTML yang jarang dibuat dalam di dalam blog yang lebih fokus pada tulisan dan gambar. Namun, tak salah kita mengetahui cara membuatnya.

Untuk membuat tabel sederhana dengan HTML, kita menggunakan tag <table>:

<table>
 <tr>
  <td>No.</td>
  <td>Kolom 1</td>
  <td>Kolom 2</td>
 </tr>
 <tr>
  <td>1.</td>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>2.</td>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Bingung? Ya, bagi kita yang pertama kali melihatnya mungkin akan dibingungkan karena tidak mengerti maksudnya. Sekarang bagaimana kalau kita langsung tulis dengan Markdown:

| No. | Kolom 1         | Kolom 2         |
| ----| --------------- | --------------- |
| 1.  | Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| 2.  | Baris 2 Kolom 1 | Baris 2 Kolom 2 |

Orang yang tidak paham kode pun, jika melihat kode di atas akan mengerti kalau itu adalah tabel. Ya, benar karena source code yang dibuat Markdown mudah terbaca dan mudah juga untuk ditulis.

Uniknya, meski kita membuatnya tidak rapih seperti ini:

|No.|Kolom 1|Kolom 2|
|-|-|-|
|1.|Baris 1 Kolom 1|Baris 1 Kolom 2|
|2.|Baris 2 Kolom 1|Baris 2 Kolom 2|

Hasil yang ditampilkan di browser akan tetap sama, yaitu berupa table. Jadi tanda strip - tidak menjadi masalah berapa pun kita masukkan, minimal 1 buah.

Untuk membuat rata kiri pada kolom tabel kita menggunakan tanda titik dua : di kiri tanda strip - seperti ini :-, jadi kalau rata tengah kita menggunakan tanda ini :-:, dan rata kanan dengan ini -:. Simple.

|No.|Kolom 1|Kolom 2|
|:-|:-:|-:|
|1.|Baris 1 Kolom 1|Baris 1 Kolom 2|
|2.|Baris 2 Kolom 1|Baris 2 Kolom 2|

Walaupun kita bisa membuat table di Markdown dengan tidak rapih seperti di atas, tentu saja menjadi kurang enak dilihat apabila kita menginginan Source Code yang mudah terbaca. Terlebih tujuan Markdown dibuat adalah agar kode yang dituliskan menjadi lebih humanis.

Jadi, lebih baik ditulis seperti ini:

| No. | Kolom 1         | Kolom 2         |
| :-- | :-------------: | --------------: |
| 1.  | Baris 1 Kolom 1 | Baris 1 Kolom 2 |
| 2.  | Baris 2 Kolom 1 | Baris 2 Kolom 2 |

Mengapa kita tidak membuat judul kolomnya disesuaikan dengan perataan kolomnya sehingga menjadi lebih enak lagi dilihat lagi? Rasanya tidak perlu karena garis strip di bawahnya sudah menunjukkan pada kita perataan kolomnya. Titik dua (:) adalah rata kiri, titik dua di kanan - kiri berarti rata tengah, dan titi dua di kanan berarti rata kanan.

Tampilan tabel yang dibuat dengan kode di atas adalah tampilan default tabel, yaitu tanpa garis tabel.

No.Kolom 1Kolom 2
1.Baris 1 Kolom 1Baris 1 Kolom 2
2.Baris 2 Kolom 1Baris 2 Kolom 2

Sehingga harus mendapatkan sentuhan style CSS untuk memperindahnya sesuai dengan tampilan yang kita inginkan. Namun biasanya di dalam static site generator seperti Hugo sudah menyediakan style default untuk tampilan tabel.

9. Garis Horizontal

Garis horizontal di dalam web adalah garis panjang mendatar yang berfungsi untuk memisahkan bagian konten dengan konten lainnya. Garis ini dibuat dengan memasukkan tag <hr>.

Tampilannya seperti garis di bawah ini:


Di Markdown, garis horizontal dibuat dengan tiga cara, yaitu:

Dengan asterisks sign *** (bintang tiga kali):

***

Dengan dashes/hypen/minus sign — (strip tiga kali):

---

Atau, dengan underscore sign ___ (underscore tiga kali):

___

Link adalah tautan yang menghubungkan satu tempat ke tempat lain, entah di halaman yang sama atau di halaman yang berbeda saat link tersebut di klik.

Membuat link di Markdown hampir sama templatenya dengan memasukkan gambar, hanya saja tidak menggunakan tanda seru ! (exclamation mark) di awal.

[text](url link)

Kita juga bisa menambahkan title pada link yang akan menampilkan teks apabila kursor diarahkan.

[text](url link "Title Text")

Contoh:

HTML:

Ini contoh <i><a href="https://www.fatoni.id" title="Fatoni">Link</a></i>

Markdown

Ini contoh *[Link](https://www.fatoni.id "Fatoni")*

Hasil yang ditampilkan

Ini contoh Link

Sayangnya, kita tidak bisa menambahkan opsi target="_ blank" dan rel="nofollow" di dalam link yang dibuat dengan Markdown (anda bisa melakukannya dengan custom shortcode ).

Selain dengan cara di atas, kita bisa membuat link dengan cara lainnya, yaitu dengan cara dipisah antara teks link dengan url link. Seperti contoh di bawah ini:

Ini contoh *[Link][1]*

[1]: https://www.fatoni.id "Fatoni"

Pada bagian url dikosongkan [] lalu pada bagian keterangan di isi dengan text link-nya.

Contoh lainnya:

[A platform built for People][]

[A platform built for People]: https://medium.com/ "A platform built for People"

Lebih simpel lagi adalah dengan menuliskannya secara langsung:

https://www.fatoni.id

Hasilnya:

https://www.fatoni.id

Bila kita tidak ingin menampilkannya sebagai link, kita bisa mengapitnya dengan tanda back tick `:

`https://www.fatoni.id`

Sehingga hasil yang ditampilkannya berupa teks kode, seperti berikut: https://www.fatoni.id

11. Menulis Code

Penulisan code sebaiknya memang dibedakan dengan penulisan teks biasa agar bisa dibedakan mana code dan mana teks biasa. Umumnya, teks yang berupa code memiliki warna dan jenis huruf yang berbeda. Jenis huruf yang dipakai untuk penulisan code adalah jenis monospace.

Di HTML untuk menulis code secara inline (ditulis dalam satu baris pendek dan bercampur dengan teks biasa / dalam paragraf) bisa menggunakan <code>your code</code> dan untuk Block Code (ditulis dalam beberapa baris dan dipisah dari paragraf) menggunakan:

<pre><code><?php 
echo "your code";
?>
</code></pre>

Bagaimana jika ditulis di Markdown? Untuk code inline cukup diapit dengan tanda petik satu ` (tick marks), yaitu: `your code`. Hasilnya seperti ini your code. Sementara untuk Block Code dengan cara memberikan spasi minimal 4 spasi atau dengan menuliskan tanda petik sebanyak 3 kali:

    <?php
    echo "your code";
    ?>

Bisa juga menggunakan simbol tilde 3 kali ~~~:

~~~
<?php
echo "your code";
?>
~~~

Selain cara di atas, yang lebih mudah adalah menekan tab sekali:

    <?php
    echo "your code";
    ?>

Jika kita ingin agar kode di dalam Code Block yang kita buat menampilkan Syntax Highlight atau format warna sesuai jenis kodenya (perlu dukungan CSS), kita bisa menambahkan nama jenis kode itu setelah menuliskan tanda petik 3 kali:

```php
<?php
echo "your code";
?>
```

```json
{
'id': 1,
'nama': 'fatoni',
'web': 'www.fatoni.id'
}
```

12. Catatan Kaki

Catatan kaki atau footnote biasanya akrab untuk tulisan ilmiah atau dokumentasi yang memerlukan penyertaan sumber referensi atau catatan tambahan berupa penjelasan, keterangan, dan komentar di akhir halaman.

Untuk membuat catatan kaki dengan Markdown, kita bisa menuliskannya dengan tanda [^x] dengan x bisa diisi oleh apa pun.

Contoh:

Islam menjadi agama terbesar kedua di dunia setelah Kristen. [^1]

Sementara untuk keterangan pada catatan kakinya, kita bisa menuliskan sebagai berikut:

[^1]: Hackett & McClendon 2017.

Hasilnya

Islam menjadi agama terbesar kedua di dunia setelah Kristen. 1

(Lihat di bagian bawah halaman ini, akan terdapat footnote dari kalimat di atas).

Angka 1 pada [^1] bisa diganti dengan teks apapun, contoh:

Islam menjadi agama terbesar kedua di dunia setelah Kristen.[^ref]

[^ref]: Hackett & McClendon 2017.

Jika catatan kaki yang ingin ditampilkan lebih dari satu baris, pada baris selanjutnya dipisah satu baris (enter 2x) kemudian tekan tombol tab sehingga menjorok ke dalam.

Ada berbagai macam bentuk ibadah, salah satunya ibadah murni yang sudah ditentukan syarat dan rukunnya.[^2]

[^2]: Istilah klasik: ibadah naqishah.

    Istilah kontemporer: ibadah mahdhah

13. Daftar Definisi

Daftar Definisi (Definition Lists) atau bisa juga disebut Description Lists adalah suatu daftar yang biasanya berisi daftar istilah terminologi beserta arti dan penjelasannya.

Contoh:

HTML
Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.
PHP
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML

Kode HTML untuk membuat DL di atas seperti berikut:

<dl>
 <dt>HTML</dt>
  <dd><i>Hyper Text Markup Language</i>, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.</dd>
 <dt>PHP</dt>
  <dd><i>PHP: Hypertext Preprocessor</i> adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML</dd>
</dl>

Bagaimana kalau kita tulis di Markdown? Ternyata cukup sederhana.

HTML
: *Hyper Text Markup Language*, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web.

PHP
: *PHP: Hypertext Preprocessor* adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML

14. Daftar Tugas

Daftar Tugas atau Task Lists adalah suatu daftar item yang dilengkapi dengan kotak ceklis (checkbox) sehingga kita dapat memberikan tanda contreng pada suatu item yang kita anggap sudah kita kerjakan atau tersedia. Namun, checkbox ini bukan inputan untuk kita isi melainkan sekedar informasi sehingga kotak ceklis ini dalam kondisi disabled.

Daftar Tugas ini memang jarang sekali kita pakai untuk konten web, tapi cukup menarik jika kita pakai sebagai variasi konten saat manyampaikan hal-hal yang sudah dikerjakan, misalnya.

Bagaimana membuatnya? Sederhana saja.

- [x] Beribadah
- [x] Belajar
- [x] Bekerja
- [ ] Istirahat
- [ ] Makan
- [ ] Refreshing 

Hasilnya yang terlihat di browser (Apa yang terlihat bergantung pada style CSS theme):

  • Beribadah
  • Bekerja
  • Belajar
  • Istirahat
  • Makan
  • Refreshing

Jika dalam tampilan kamu terlihat bulatan hitam di samping daftar, kamu bisa hilangkan jika kamu anggap itu tidak perlu dengan menambahkan pada style CSS:

list-style: none;

15. Mempertahankan Karakter

Terkadang kita mau menampilkan karakter tertentu ke dalam konten web, seperti karakter/simbol bintang *, tanda pagar #, dan simbol-simbol lainnya. Masalahnya saat kita menuliskan simbol tersebut, tanda pagar misalnya, maka Markdown akan membacanya sebagai heading level 1 sehingga tanda pagar tersebut tidak akan tampil karena dikonversi sebagai <h2>. Sehingga diperlukan escaping character agar karakter tersebut dapat lolos dari konversi dan ditampilkan sebagaimana adanya. Lalu bagaimana caranya?

Caranya adalah menggunakan tanda backslash \ di awal karakter untuk memberitahukan Markdown kalau karakter tersebut ingin ditampilkan apa adanya.

Contoh:

\# Hello World
\*Halo dunia\*

Saat ditampilkan di web, hasilnya:

Karakter apa saja yang bisa kita skip untuk ditampilkan dengan backslash \?

Berikut daftarnya:

KarakterNama
*Asterisk
`Tick Mark
#Number Sign
+Plugs Sign
-Hypen, Minus Sign
_Underscore
()Parentheses
{}Curly Brackets
[]Brackets
\Backslash
!Exclamation Mark
.Dot

16. Kesimpulan

Penulisan dengan Markdown lebih Human-readable, baik saat menuliskannya maupun saat dibaca dalam bentuk source code. Markdown disimpan dalam file berektensi .md dan biasanya jika dibuka di GitHub atau GitLab, konten Markdown akan ditampilkan sesuai dengan format yang diberikan.

Selain menulis dengan cara manual, ada cara lain yang lebih simpel tanpa repot mengingat semua format Markdown di atas (tapi bisa juga digunakan untuk mempelajari sintaks-sintaks Markdown), yaitu dengan menggunakan Markdown Editor bernama Typora.

Setelah menulis di Typora, kita bisa menyalinnya dalam bentuk source code Markdown atau disimpan dalam bentuk file Markdown.

Demikian sedikit pembahasan tentang Markdown, selanjutnya kita akan membahas tentang git agar Hugo yang sudah kita buat di lokal dapat kita publish.


  1. Hackett & McClendon 2017. ↩︎

30 July 2019