Belum Kenal Markdown ya? Yok Kenalan


Hallooo… kenalin nih namanya Markdown. Dia itu adalah suatu markup language (mirip kayak HTML lah) yang bertugas ‘menghidupkan’ style pada tulisan. Contohnya miring, tebal, link, de el el.

Nah, di salah satu twitku, aku ngungkapin kalau Markdown itu bisa bertugas sebagai pengganti Microsoft Word. Kenapa? Soalnya, kalau kita nulis di Microsoft Word, terus dicopas ke blog mesti hancur. Maksudnya, kalau di Microsoft Word pake font Times New Roman. Nah, kalau di blog misalnya diatur jadi Calibri. Eh, pas tulisannya dicopas ke blog, malah jadinya Times New Roman. Susah dah diatur stylenya.

Bingung ya? Nggak papa dah.

Aku pake Markdown juga lo buat posting di blog 🙂

Syntax Markdown

Oke, kita langsung masuk ke syntaxnya.


Heading

Contoh Heading :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Ini source codenya :

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

Tulisan Tebal, Miring, dan Coret

Termasuk salah satu elemen yang penting dalam sebuah tulisan adalah tulisan tebal, miring, dan coret. Nah, berikut ini adalah source codenya :

*tulisan miring*
**tulisan tebal**
~~tulisan coret~~

List (Daftar Belanjaan. Hehehe…)

Langsung contohnya aja ya…

  1. Roti
  2. Blue Band
  3. Selai
    1. Nanas
    2. Wajan
  • Tidur
  • Makan
  • Jalan Kaki
    • Lari
      • Sprint
      • Maraton
    • Minum

Dan di bawah ini adalah source codenya :

1. Roti
2. Blue Band
3. Selai
  1. Nanas
  2. Wajan


* Tidur
* Makan
* Jalan Kaki
  * Lari
    * Sprint
    * Maraton
  * Minum

Contoh linknya :

Klik di sini

Source code :

[Klik di sini](https://mzaini30.wordpress.com)

Gambar

Langsung source codenya aja yah 🙂

![Attribut Alt](http://blog.com/gambar.jpg)

Highlight Code dan Syntax

Di bawah ini adalah source codenya :

Coba deh masukin `<html>`

`` `
Ini adalah source code
`` `

Hasilnya :

Coba deh masukin <html>

Ini adalah source code

Tabel

Contoh :

Nomor Nama Asal
1 Febri Surakarta
2 Joko Jogja
3 Martin Jombang

Ini source codenya :

| Nomor | Nama | Asal |
|-|-|-|
| 1 | Febri | Surakarta |
| 2 | Joko | Jogja |
| 3 | Martin | Jombang |

Gampang kan?


Quote

Ngantuk vroh

Source codenya :

> Ngantuk vroh

Garis Horizontal

Langsung source codenya vroh 🙂

***

Perbedaan Fundamental Antara HTML dan Markdown

Nah, setelah membaca bagian di atas pastinya kamu sudah bisa kan membedakan antara Markdown dengan HTML? Rasanya gimana? Enak yang mana? Pastinya enak yang Markdown kan? Coba deh, di bawah ini aku ada contoh yang akan dimarkup dengan HTML dan Markdown. Terus, kita akan bandingkan gampang yang mana.


Lorem ipsum

Dolor sit amet,

  1. consectetuer
  2. adipiscing
  3. elit.
  • Maecenas porttitor
  • congue massa.
  • Fusce posuere,
magna sed pulvinar ultricies,
purus lectus malesuada libero,
sit amet commodo magna eros

quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.


Ini kalau pake HTML :

<h1 id="lorem-ipsum">Lorem ipsum</h1>
<h2 id="dolor-sit-amet-">Dolor sit amet,</h2>
<ol>
    <li>consectetuer </li>
    <li>adipiscing </li>
    <li>elit. </li>
</ol>
<ul>
    <li>Maecenas porttitor </li>
    <li><code>congue</code> massa. </li>
    <li>Fusce <strong>posuere</strong>, </li>
</ul>
<table>
    <thead>
        <tr>
            <th>magna sed</th>
            <th>pulvinar</th>
            <th>ultricies,</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>purus lectus</td>
            <td>malesuada</td>
            <td>libero,</td>
        </tr>
        <tr>
            <td>sit amet</td>
            <td>commodo magna</td>
            <td>eros</td>
        </tr>
    </tbody>
</table>
<p>quis urna.</p>
<p>Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.</p>
<blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
</blockquote>

Terus, kalau pake Markdown, hanya ini yang perlu kita ketik :

# Lorem ipsum

## Dolor sit amet, 

1. consectetuer 
2. adipiscing 
3. elit. 


* Maecenas porttitor 
* `congue` massa. 
* Fusce **posuere**, 

| magna sed | pulvinar | ultricies, |
|-|-|-|
| purus lectus | malesuada | libero, |
| sit amet | commodo magna | eros |

quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Kelihatan kan bedanya? 🙂

Next?

Kalau sudah tau Markdown sama dah tau syntaxnya, terus mau diapain dong?

Oke, pertanyaan yang bagus. Sekarang, coba lihat gambar di bawah ini :

Contoh penggunaan Markdown

Nah, begitulah caraku ketika menggunakan Markdown. Di sisi kanan tu Notepad++, area buat ngetik file Tutorial Markdown.md. Sedangkan di sisi kiri itu adalah file Markdown yang sama cuma bukanya di Mozilla Firefox pake extensi Markdown. Jadi, cara kerjanya itu, ngetiknya di Notepad++ terus aku pencet Ctrl Shift Atl X dan otomatis akan terpreview di Mozilla Firefox di sisi kiri. Setelah itu, setiap habis ngedit, aku tinggal reload Firefoxnya aja.

Kalau cara copas ke blognya mah aku tinggal copas aja yang di Firefox. Simpel kan?

Twitter Penulis : @mzaini30

Iklan

2 thoughts on “Belum Kenal Markdown ya? Yok Kenalan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s