Mengenal Lebih Dekat Dengan Markdown

|

jika temen temen sering bermain main digithub atau mulai belajar membuat static site generator pastinya tidak asing dengan istilah markdown.

jika diantar temen temen sudah paham apa salahnya kita belajar kembali, dan yang belum mengerti sama sekali mari kita belajar letsgoo.

Pengertian Markdown

markdown adalah sebuah bahasa markup yang sangat ringan dibanding html, kenapa dibilang ringan dikarnakan mudahnya dalam pembacaan dan penulisannya (easy to read easy to write)

markdown berfungsi untuk mengkonversi dari text biasanya menjadi format html dengan menggunakan karakter karakter tertentu sebagai penanda.

mengapa kita menggunakan markdown?

hal yang menarik dari sebuah markdown ialah memudahkan kita untuk menulis sebuah dokumen web dibanding menuliskannya dengan html yang membuat cukup pusing, apalagi elemennya sudah bersarang(nested elemen)

oleh karna itu diciptakanlah markdown pada tahun 2004 oleh John Gruber.

Memulai menulis markdown

diatas gue bilang bahwa markdown lebih mudah ditulis dibandingkan dengan html apa benar? mari kita buktikan perbedaan menulis dengan markdown dan html.

menggunakan html

<!-- Menggunakan HTML BIASA -->
  <ul> 
    <li> Matahari </li>
    <li> Bumi </li>
    <li> Bulan </li>
  </ul>

menggunakan html

<!-- Menggunakan Markdown -->
+ matahari
+ bumi
+ bulan

mana yang lebih mudah dari studi kasus diatas menggunakan html atau markdown? haha pasti kita sepakat menggunakan markdown ya😁😓

Pembuatan File Markdown

untuk membuat sebuah file markdown sangatlah mudah, kalian cukup buka texteditor kalian bisa sublime, vscode bahkan notepad pun bisa haha😂

lalu buat file baru dengan ekstensi .md atau .markdown

lebih gampangnya pake .md aja ya temen temen

Formating pada markdown

untuk menkonversi text biasa menjadi elemen html markdown memerlukan suatu format/penanda biasanya dengan menggunakan sebuah karakter tertentu.

contoh awal

untuk membuat tulisan menjadi tebal(bold) didalam dokumen markdown kita menuliskannya seperti ini

<!-- menebalkan teks -->
**tulisan tebal**

oke itu hanya contoh awal kita lanjut untuk belajar formating lainnya mulai dari:

Membuat Heading

Heading adalah judul didalam markdown penulisannya menggunakan tanda #

contoh

<!-- pembuatan heading didalam markdown -->
# Heading level 1
## Heading level 2
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6

hasilnya

<!-- hasil -->
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

fungsi tanda pagar adalah untuk menentukan level dari heading.

Membuat paragraph

untuk membuat paragraph sangatlah sangatlah mudah wkwk, karna cukup ketikan sesuatu didalam file markdown maka format tersebut otomatis menjadi sebuah paragraph, selama kamu belum menenter atau membuat baris baru maka paragraph tersebut masi menjadi satu kesatuan.

contoh

<!-- pembuatan paragraph didalam markdown -->

Budi adalah anak yang rajin.

Setiap hari minggu ia kepasar dihari untuk membeli bawang.

hasilnya

<!-- hasil -->
<p>Budi adalah anak yang rajin.</p>
<p>Setiap hari minggu ia kepasar dihari untuk membeli bawang.</p>

Format Teks

format teks biasanya terdiri dari tulisan tebal(Bold), Tulisan Miring(Italic), Tulisan coret(strikeline), dll

Teks Miring (Italic)

untuk membuatnya teks menjadi italic menggunakan karakter * seperti contoh dibawah

contoh

<!-- pembuatan italic didalam markdown -->

*ini adalah tulisan miring*

Hasilnya

<!-- hasilnya -->
<i>ini tulisan miring</i>

Teks Bold (Bold)

untuk membuatnya teks menjadi italic menggunakan karakter ** seperti contoh dibawah

contoh

<!-- pembuatan bold didalam markdown -->

**ini adalah tulisan tebal**

Teks Bold Dan Italic (Bold)

untuk membuatnya teks bold sekaligus italic menggunakan karakter *** seperti contoh dibawah

contoh

<!-- pembuatan bold dan italic didalam markdown -->

***ini adalah tulisan tebal sekaligus miring***

Hasilnya

<!-- hasilnya -->

<strong><em>ini adalah tulisan tebal sekaligus miring</em></strong>

Teks Coret (Strikeline)

untuk membuatnya teks menjadi italic menggunakan karakter ~~ seperti contoh dibawah

contoh

<!-- pembuatan Strikeline didalam markdown -->

~~ini adalah teks Coret~~

Hasilnya

<!-- hasilnya -->
<del>ini tulisan tebal</del>

Membuat Link

untuk menyisipkan lin didalam markdown kita dapat membuatnya seperti ini

<!-- membuat link -->
[link ke youtube](https://www.youtube.com/)

hasilnya

link ke youtube

atau temen temen bisa pakai cara lainnya dengan menuliskan URL lengkapnya langsung

contoh

<!-- membuat link -->
https://www.youtube.com/

tinggal disesuaikan saja dengan kebutuhannya jika ingin menyisipkan link beserta deskripsinya gunakan cara pertama, jika ingin menyisipkan link untuk menampilkan URL nya saja gunakan cara kedua.

Menyisipkan Gambar

untuk menyisipkan gambar dimarkdown caranya hampir sama perbedaannya ialah dengan menggunakan tanda seru ( ! ) didepannya seperti contoh dibawah:

<!-- membuat link -->
![contoh gambar](https://picsum.photos/200/300)

hasilnya

Membuat Blokquote

untuk membuat blockquote temen-temen cukup menambahkan karakter > diawal paragraph

contohnya seperti ini

<!-- membuat link -->

> Semua orang hanya memikirkan dirinya sendiri termasuk aku -squidward

hasilnya

Semua orang hanya memikirkan dirinya sendiri termasuk aku -squidward

Blockquote bersarang (nested blockquote)

untuk membuat blockquote bersarang caranya seperti ini :

<!-- membuat link -->

> Semua orang hanya memikirkan dirinya sendiri termasuk aku -squidward
> 
>> aku akan bersantai meskipun itu akan membunuhku - squidward

hasilnya

Semua orang hanya memikirkan dirinya sendiri termasuk aku -squidward

aku akan bersantai meskipun itu akan membunuhku - squidward

Membuat List

untuk membuat list didalam html kita pastinya mengenal ul dan ol, ul merupakan singkatan dari unordered list sedangkan ol merupakan singkatan dari ordered list.

kita ketahui bersama unordered list adalah list dengan urutan berupa karakter spesial atau dengan simbol pada HTML, sedangkan ol Ol (Ordered List) merupakan tag beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa abjad, angka ataupun berupa angka romawi.

List beraturan (ordered list)

untuk membuat nya seperti ini

<!-- membuat ordered list -->

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

Hasilnya

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

List tidak beraturan (Unordered list)

untuk membuat nya seperti ini

<!-- membuat ordered list -->

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

Hasilnya

• First item
• Second item
• Third item
  • Indented item
  • Indented item
• Fourth item

Membuat Source Code(code block)

untuk membuat code block cukup dengan menambahkan tanda ``` seperti contoh dibawah

<!-- membuat code block -->
```python
print("Hello World")
```

Hasilnya

print("Hello World")