Sintaks Dasar

Elemen-elemen Markdown yang dituliskan di dalam dokumen rancangan John Gruber.

Ikhtisar

Hampir semua aplikasi Markdown mendukung sintaks dasar yang diuraikan dalam dokumen desain asli John Gruber. Terdapat variasi kecil dan perbedaan antara prosesor Markdown - informasi tentang hal itu sedapat mungkin disampaikan secara langsung.

Judul dan Subjudul

Untuk menuliskan judul atau subjudul digunakan karakter # di depan teks judul atau subjudul. Banyaknya tanda # menandai tingkat subjudul. Markdown dapat membuat subjudul sampai tingkat 6, namun beberapa aplikasi Markdown hanya mampu membuat subjudul sampai tingkat 4. Tingkat subjudul menentukan besar/ukuran huruf.

Sintaks Markdown Sintaks HTML Tampilan Teks Hasilnya
# Judul (Subjudul Tingkat 1) <h1>Judul (Subjudul Tingkat 1)</h1>

Judul (Subjudul Tingkat 1)

## Subjudul Tingkat 2 <h2>Subjudul Tingkat 2</h2>

Subjudul Tingkat 2

### Subjudul Tingkat 3 <h3>Subjudul Tingkat 3</h3>

Subjudul Tingkat 3

#### Subjudul Tingkat 4 <h4>Subjudul Tingkat 4</h4>

Subjudul Tingkat 4

##### Subjudul Tingkat 5 <h5>Subjudul Tingkat 5</h5>
Subjudul Tingkat 5
###### Subjudul Tingkat 6 <h6>Subjudul Tingkat 6</h6>
Subjudul Tingkat 6

==Harap diperhatikan, perlu selalu diingat, sebaiknya tanda # harus dipisahkan dengan teks subjudul. Jika tanda # tidak dipisah mungkin Anda tidak akan mendapatkan apa yang Anda harapkan!==

Tuliskan:

# Teks Judul

dan jangan menuliskan dengan cara:

#Teks Judul.

Selain menggunakan karakter # untuk menuliskan subjudul tingkat 1 dapat menggunakan beberapa karakter = di bawah tulisan subjudul, sedangkan untuk subjudul tingkat 2 dapat menggunakan karakter beberapa -.

Sintaks Markdown Tampilan Teks Hasilnya
Judul (Subjudul Tingkat 1)
===========

Judul (Subjudul Tingkat 1)

Subjudul Tingkat 2
---------

Subjudul Tingkat 2

Paragraf

Dalam setiap naskah, di bawah setiap judul atau subjudul tentu berisi teks uraian yang menjelaskan isi atau maksud judul atau subjudul tersebut. Setiap dokumen ilmiah pasti memuat paragraf yang berisi ide-ide penulis yang disampaikan kepada pembaca. Paragraf biasanya terdiri atas beberapa kalimat yang menjelaskan satu gagasan tertentu.

Anda tidak perlu berfikir/merasa pusing bagaimana menulis paragraf. Langsung saja ketik ide yang keluar dari kecerdasan Anda dalam bentuk tulisan dengan kata-kata yang tersusun dalam kalimat-kalimat yang mudah dipahami pembaca. Sekali lagi, jangan berfikir hal-hal teknis, cukup ketik saja isi pikiran Anda! Jika ingin berganti alinea, sisipkan baris kosong. Cukup satu baris kosong! Inilah contohnya:

Saya sangat suka menggunakan Markdown.

Saya rasa saya akan menggunakannya untuk memformat semua dokumen saya mulai sekarang.

Saya sangat suka menggunakan Markdown.

Saya rasa saya akan menggunakannya untuk memformat semua dokumen saya mulai sekarang.

==Kecuali suatu paragraf merupakan daftar, jangan menulis kalimat pertama suatu paragraf diawali dengan spasi kosong atau dengan menekan tombol [Tab]. Biarkan paragraf rata kiri.==

==Untuk memaksa suatu kalimat di dalam paragraf ditulis di baris baru, akhiri kalimat sebelumnya dengan dua atau lebih spasi kosong dan tekan tombol [Enter], atau tuliskan tag HTML <br>.==

Pergantian Baris

Untuk menulis kalimat pada baris baru (pergantian baris dalam satu paragraf) (<br>), akhiri kalimat dengan dua spasi atau lebih, lalu ketik tombol [Enter].

Markdown HTML Tampilan
Kalimat pertama pada baris pertama.  
Kalimat kedua pada baris kedua.
<p>Kalimat pertama pada baris pertama.<br>
Kalimat kedua pada baris kedua.</p>

Kalimat pertama pada baris pertama.
Kalimat kedua pada baris kedua.

Praktik Terbaik Pergantian Baris

Anda dapat menggunakan dua spasi atau lebih (biasa disebut sebagai “trailing whitespace”) untuk berganti baris pada hampir setiap aplikasi Markdown, tetapi hal itu merupakan kontroversial. Sulit untuk melihat beberapa spasi kosong di editor, dan banyak orang secara tidak sengaja atau sengaja menempatkan dua spasi setelah setiap kalimat. Untuk alasan ini, Anda mungkin ingin menggunakan sesuatu selain spasi kosong dan [Enter] untuk melakukan pergantian baris. Untungnya, ada opsi lain yang didukung oleh hampir setiap aplikasi Markdown: tag HTML <br>.

Untuk kompatibilitas, gunakan beberapa spasi kosong atau tag HTML <br> di akhir baris.

Ada dua opsi lain yang tidak direkomendasikan. CommonMark dan beberapa bahasa markup ringan lainnya memungkinkan Anda mengetik garis miringkiri (\) di akhir baris, tetapi tidak semua aplikasi Markdown mendukung ini, jadi ini bukan pilihan yang bagus dari perspektif kompatibilitas. Dan setidaknya beberapa bahasa markup ringan tidak memerlukan apa pun di akhir baris - cukup tekan [Enter] dan hasilnya akan berganti baris.

✅  Gunakan yang ini ❌  Jangan gunakan seperti ini
Baris pertama diakhiri spasi kosong.  
Ini baris berikutnya.

Baris pertama diakhiri tag HTML.<br>
Ini baris berikutnya.

Baris pertama diakhiri garis miring kiri.\
Ini baris berikutnya.

Baris pertama tanpa diakhiri apa-apa (langsung tekan [Enter]).
Ini baris berikutnya.

Format Teks

Penekanan suatu teks dapat menggunakan huruf tebal atau huruf miring.

Tulisan Tebal

Untuk menebalkan teks, tambahkan dua tanda bintang atau garis bawah sebelum dan sesudah teks tersebut. Untuk menebalkan bagian tengah kata (untuk penekanan), tambahkan dua tanda bintang tanpa spasi di sekitar huruf.

Markdown HTML Hasil (Tampilan)
Hati-hati menggunakan **tulisan tebal**. Hati-hati menggunakan <strong>tulisan tebal</strong>. Hati-hati menggunakan tulisan tebal.
Hati-hati menggunakan __tulisan tebal__. Hati-hati menggunakan <b>tulisan tebal</b>. Hati-hati menggunakan tulisan tebal.
Jangan suka meng-**kafir**-kan orang. Jangan suka meng-<strong>kafir</strong>-kan orang. Jangan suka meng-kafir-kan orang.

Praktik Terbaik Menulis Tebal

Aplikasi Markdown tidak selalu dapat memproses tulisan tebal dengan garis bawah di tengah kata. Untuk kompatibilitas, gunakan tanda bintang dalam menebalkan tulisan di tengah kata (untuk penekanan).

✅  Gunakan ini ❌  Hindari yang ini
Jangan suka meng-**kafir**-kan orang. Jangan suka meng-__kafir__-kan orang.

Format Teks

Dalam menuliskan teks, Anda terkadang perlu menampilkan huruf, kata, frasa, atau kalimat, bahkan paragraf tertentu secara khusus, misalnya dengan huruf tebal, huruf miring, dan sebagainya. Untuk melakukan hal-hal semacam ini Markdown menggunakan pasangan satu, dua, atau tiga karakter (pasangan artinya mengapit tulisan) tertentu – disebut tag, yang dijelaskan pada tabel berikut ini.

Format Teks Tag Contoh
Huruf Tebal **teks** Teks dengan huruf tebal
Huruf Tebal __teks__ Teks dengan huruf tebal
Huruf Miring *teks* Teks dengan huruf miring
Huruf Miring _teks_ Teks dengan huruf miring
Huruf Tebal dan Miring ***teks*** Teks dengan huruf tebal dan miring
Huruf Tebal dan Miring **_teks_** Teks dengan huruf tebal dan miring
Huruf Tebal dan Miring ___teks___ Teks dengan huruf tebal dan miring
Huruf Tebal dan Miring _**teks**_ Teks dengan huruf tebal dan miring
Teks dicoret ~~teks~~ Teks ini dicoret
Teks diblok ==teks== ==Teks ini diblok warna kuning==
Indeks atau subskrip ~indeks~ Rumus kimia molekul air adalah H~2~O.
Pangkat atau superskrip ^pangkat^ Hasil 2^10^ adalah 1024.
Teks kode/perintah `kode/perintah` `x=10`
Garis bawah (tag HTML) <u>Digarisbawahi</u> Digarisbawahi

Teks Kutipan

Untuk menuliskan suatu kutipan (langsung), gunakan tanda > di depan teks kutipan. Teks kutipan dapat memuat teks dengan semua format.

> *Demi Kitab (Al-Qur'an) yang menerangkan. Sesungguhnya Kami menjadikan Al Quran dalam bahasa Arab supaya kamu memahami(nya).* (Q.S. Az-Zukhruf: 2-3)

Hasilnya akan tampak seperti:

Demi Kitab (Al-Qur’an) yang menerangkan. Sesungguhnya Kami menjadikan Al Quran dalam bahasa Arab supaya kamu memahami(nya). (Q.S. Az-Zukhruf: 2-3)

Kutipan Terdiri Atas Beberapa Paragraf

Untuk menuliskan kutipan yang terdiri atas beberapa paragraf, setiap paragraf diawali dengan tanda > dan antar paragraf dipisahkan dengan baris kosong yang diawali dengan tanda > .

Di antara sendi-sendi pergaulan sesama manusia menurut Al-Qur'an adalah sebagai berikut:
> (Q.S 49:11):
>> *Wahai orang-orang yang beriman! Janganlah suatu kaum mengolok-olok kaum yang lain (karena) boleh jadi mereka (yang diperolok-olokkan) lebih baik dari mereka (yang mengolok-olok) dan jangan pula perempuan-perempuan (mengolok-olokkan) perempuan lain (karena) boleh jadi perempuan (yang diperolok-olokkan) lebih baik dari perempuan (yang mengolok-olok). Janganlah kamu saling mencela satu sama lain dan janganlah saling memanggil dengan gelar-gelar yang buruk. Seburuk-buruk panggilan adalah (panggilan) yang buruk (fasik) setelah beriman. Dan barangsiapa tidak bertobat, maka mereka itulah orang-orang yang zalim.*  
>
>(Q.S 49:12):
>> *Wahai orang-orang yang beriman! Jauhilah banyak dari prasangka, sesungguhnya sebagian prasangka itu dosa dan janganlah kamu mencari-cari kesalahan orang lain dan janganlah ada di antara kamu yang menggunjing sebagian yang lain. Apakah ada di antara kamu yang suka memakan daging saudaranya yang sudah mati? Tentu kamu merasa jijik. Dan bertakwalah kepada Allah, sesungguhnya Allah Maha Penerima tobat, Maha Penyayang.* 

Tampilan hasilnya:

Di antara sendi-sendi pergaulan sesama manusia menurut Al-Qur’an adalah sebagai berikut:

(Q.S 49:11):

Wahai orang-orang yang beriman! Janganlah suatu kaum mengolok-olok kaum yang lain (karena) boleh jadi mereka (yang diperolok-olokkan) lebih baik dari mereka (yang mengolok-olok) dan jangan pula perempuan-perempuan (mengolok-olokkan) perempuan lain (karena) boleh jadi perempuan (yang diperolok-olokkan) lebih baik dari perempuan (yang mengolok-olok). Janganlah kamu saling mencela satu sama lain dan janganlah saling memanggil dengan gelar-gelar yang buruk. Seburuk-buruk panggilan adalah (panggilan) yang buruk (fasik) setelah beriman. Dan barangsiapa tidak bertobat, maka mereka itulah orang-orang yang zalim.

(Q.S 49:12):

Wahai orang-orang yang beriman! Jauhilah banyak dari prasangka, sesungguhnya sebagian prasangka itu dosa dan janganlah kamu mencari-cari kesalahan orang lain dan janganlah ada di antara kamu yang menggunjing sebagian yang lain. Apakah ada di antara kamu yang suka memakan daging saudaranya yang sudah mati? Tentu kamu merasa jijik. Dan bertakwalah kepada Allah, sesungguhnya Allah Maha Penerima tobat, Maha Penyayang.

Kutipan di dalam Kutipan

Untuk menuliskan kutipan di dalam kutipan digunakan tanda >> di dalam kutipan kedua.

> Telah menceritakan kepada kami [Muhammad bin Al Mutsanna], telah menceritakan kepada kami [Yahya], dari [Isma'il] berkata, telah menceritakan kepada saya [Qais], dari [Ibnu Mas'ud radliallahu 'anhu] berkata, Aku mendengar Nabi Shallallahu'alaihiwasallam bersabda: 
>>*Tidak boleh iri (dengki) kecuali kepada dua hal. (Yaitu kepada) seorang yang Allah berikan kepadanya harta lalu dia menguasainya dan membelanjakannya di jalan yang haq (benar) dan seorang yang Allah berikan hikmah (ilmu) lalu dia melaksanakannya dan mengajarkannya (kepada orang lain)*. 
>
> ([Shahih Bukhari hadis nomor 1320, Lihat: Fathul Bari Ibnu Hajar](https://carihadis.com/Shahih_Bukhari/=ilmu))

Tampilan hasil penulisan di atas adalah:

Telah menceritakan kepada kami [Muhammad bin Al Mutsanna], telah menceritakan kepada kami [Yahya], dari [Isma’il] berkata, telah menceritakan kepada saya [Qais], dari [Ibnu Mas’ud radliallahu ‘anhu] berkata, Aku mendengar Nabi Shallallahu’alaihiwasallam bersabda:

Tidak boleh iri (dengki) kecuali kepada dua hal. (Yaitu kepada) seorang yang Allah berikan kepadanya harta lalu dia menguasainya dan membelanjakannya di jalan yang haq (benar) dan seorang yang Allah berikan hikmah (ilmu) lalu dia melaksanakannya dan mengajarkannya (kepada orang lain).

(Shahih Bukhari hadis nomor 1320, Lihat: Fathul Bari Ibnu Hajar)

Kutipan dengan Komponen Dokumen Lain

Kutipan dapat memuat elemen-elemen dokumen Markdown lain, seperti butir-butir, teks dengan tulisan khusus, bahkan ekspresi matematika. Tidak semua elemen dokumen dapat dituliskan di dalam kutipan. Anda harus mencoba untuk mengetahuinya.

> ### Ciri-ciri orang beriman yang beruntung
> Menurut Al-Qur'an, ciri-ciri orang beriman yang beruntung adalah:
> 1. orang yang **khusyuk dalam salatnya**,
> 2. orang yang **menjauhkan diri dari (perbuatan dan perkataan) yang tidak berguna**,
> 3. orang yang **menunaikan zakat**,
> 4. orang yang **memelihara kemaluannya**,kecuali terhadap istri-istri mereka atau hamba sahaya yang mereka miliki; maka sesungguhnya mereka tidak tercela,
> 5. orang yang **memelihara amanat-amanat dan janjinya**,
> 6. orang yang **memelihara salatnya**.
>
>  *Mereka itulah orang-orang yang akan mewarisi surga Firdaus dan mereka kekal di dalamnya.* (Q.S. 23: 1 - 11)

Tampilan hasilnya adalah:

Ciri-ciri orang beriman yang beruntung

Menurut Al-Qur’an, ciri-ciri orang beriman yang beruntung adalah:

  1. orang yang khusyuk dalam salatnya,
  2. orang yang menjauhkan diri dari (perbuatan dan perkataan) yang tidak berguna,
  3. orang yang menunaikan zakat,
  4. orang yang memelihara kemaluannya,kecuali terhadap istri-istri mereka atau hamba sahaya yang mereka miliki; maka sesungguhnya mereka tidak tercela,
  5. orang yang memelihara amanat-amanat dan janjinya,
  6. orang yang memelihara salatnya.

Mereka itulah orang-orang yang akan mewarisi surga Firdaus dan mereka kekal di dalamnya. (Q.S. 23: 1 - 11)

Daftar Butir

Anda dapat menyusun daftar butir dalam bentuk daftar bernomor atau daftar butir tanpa nomor.

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

Markdown HTML Rendered Output
1. First item
2. Second item
3. Third item
4. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
1. Second item
1. Third item
1. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
8. Second item
3. Third item
5. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Indented item</li>
<li>Indented item</li>
</ol>
</li>
<li>Fourth item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

Ordered List Best Practices

CommonMark and a few other lightweight markup languages let you use a parenthesis ()) as a delimiter (e.g., 1) First item), but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. For compatibility, use periods only.

✅  Do this ❌  Don't do this
1. First item
2. Second item
1) First item
2) Second item

LOVE!

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

Markdown HTML Rendered Output
- First item
- Second item
- Third item
- Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
* First item
* Second item
* Third item
* Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
+ First item
+ Second item
+ Third item
+ Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
  • Fourth item
- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Indented item</li>
<li>Indented item</li>
</ul>
</li>
<li>Fourth item</li>
</ul>
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

Starting Unordered List Items With Numbers

If you need to start an unordered list item with a number followed by a period, you can use a backslash (\) to escape the period.

Markdown HTML Rendered Output
- 1968\. A great year!
- I think 1969 was second best.
<ul>
<li>1968. A great year!</li>
<li>I think 1969 was second best.</li>
</ul>
  • 1968. A great year!
  • I think 1969 was second best.

Unordered List Best Practices

Markdown applications don’t agree on how to handle different delimiters in the same list. For compatibility, don’t mix and match delimiters in the same list — pick one and stick with it.

✅  Do this ❌  Don't do this
- First item
- Second item
- Third item
- Fourth item
+ First item
* Second item
- Third item
+ Fourth item

Menambahkan Butir-butir dalam Daftar

Untuk menambahkan butir baru ke dalam suatu daftar sambil mempertahankan kelanjutan daftar, mulai butir baru dari barus baru diawali empat spasi/ketukan atau satu tombol tab, seperti ditunjukkan pada contoh-contoh di bawah ini.

Paragraf di dalam daftar butir

*   Ini adalah butir pertama.
*   Ini adalah butir kedua.

    Ini adalah paragraf yang disisipkan setelah butir kedua.

*   Ini adalah butir ke tiga, lanjutan daftar sebelumnya.

Hasil penulisan di atas adalah sebagai berikut:

  • Ini adalah butir pertama.
  • Ini adalah butir kedua.

    Ini adalah paragraf yang disisipkan setelah butir kedua.

  • Ini adalah butir ke tiga, lanjutan daftar sebelumnya.

Kutipan di dalam daftar butir

*   Ini adalah butir pertama.
*   Ini adalah butir kedua.

    > Ini adalah kutipan yang disisipkan setelah butir kedua.

*   Ini adalah butir ke tiga, lanjutan daftar sebelumnya.

Hasil penulisan di atas adalah sebagai berikut:

  • Ini adalah butir pertama.
  • Ini adalah butir kedua.

    Ini adalah kutipan yang disisipkan setelah butir kedua.

  • Ini adalah butir ke tiga, lanjutan daftar sebelumnya.

Blok kode/program di dalam daftar butir

Blok kode/program biasanya diawali empat spasi kosong atau satu tombol tab. Untuk blok kode di dalam daftar butir, tambahkan delapan spasi atau dua tombol tab sebelumnya.

1.  Buka file yang akan diperbarui.
2.  Cari blok kode berikut ini:

        <html>
          <head>
            <title>Judul Program</title>
          </head>

3.  Perbarui judul programnya sesuai dengan kegunaannya.

Hasilnya akan terlihat seperti di bawah ini:

  1. Buka file yang akan diperbarui.
  2. Cari blok kode berikut ini:

          <head>
            <title>Judul Program</title>
          </head>
    
  3. Perbarui judul programnya sesuai dengan kegunaannya.

Gambar di dalam daftar butir

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](/assets/images/tux.png)

3.  Close the file.

Hasilnya akan terlihat seperti di bawah ini:

  1. Open the file containing the Linux mascot.
  2. Marvel at its beauty.

    Tux, the Linux mascot

  3. Close the file.

Daftar di dalam daftar

Anda dapat membuat daftar bernomor di dalam daftar tanpa nomor, dan sebaliknya.

1. Butir pertama
2. Butir kedua
3. Butir ketiga
    - Anak butir ketiga pertama
    - Anak butir ketiga yang kedua
4. Butir keempat

Hasilnya akan terlihat seperti di bawah ini:

  1. Butir pertama
  2. Butir kedua
  3. Butir ketiga
    • Anak butir ketiga pertama
    • Anak butir ketiga yang kedua
  4. Butir keempat

Code

To denote a word or phrase as code, enclose it in backticks (`).

Markdown HTML Rendered Output
At the command prompt, type `nano`. At the command prompt, type <code>nano</code>. At the command prompt, type nano.

Escaping Backticks

If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (``).

Markdown HTML Rendered Output
``Use `code` in your Markdown file.`` <code>Use `code` in your Markdown file.</code> Use `code` in your Markdown file.

Code Blocks

To create code blocks, indent every line of the block by at least four spaces or one tab.

    <html>
      <head>
      </head>
    </html>

The rendered output looks like this:

<html>
  <head>
  </head>
</html>
Note: To create code blocks without indenting lines, use fenced code blocks.

Horizontal Rules

To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.

***

---

_________________

The rendered output of all three looks identical:


Horizontal Rule Best Practices

For compatibility, put blank lines before and after horizontal rules.

✅  Do this ❌  Don't do this
Try to put a blank line before...

---

...and after a horizontal rule.
Without blank lines, this would be a heading.
---
Don't do this!

Links

To create a link, enclose the link text in brackets (e.g., [Duck Duck Go]) and then follow it immediately with the URL in parentheses (e.g., (https://duckduckgo.com)).

My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

The rendered output looks like this:

My favorite search engine is Duck Duck Go.

Adding Titles

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in parentheses after the URL.

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

The rendered output looks like this:

My favorite search engine is Duck Duck Go.

URLs and Email Addresses

To quickly turn a URL or email address into a link, enclose it in angle brackets.

<https://www.markdownguide.org>
<fake@example.com>

The rendered output looks like this:

https://www.markdownguide.org
fake@example.com

To emphasize links, add asterisks before and after the brackets and parentheses. To denote links as code, add backticks in the brackets.

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

The rendered output looks like this:

I love supporting the EFF.
This is the Markdown Guide.
See the section on code.

Reference-style links are a special kind of link that make URLs easier to display and read in Markdown. Reference-style links are constructed in two parts: the part you keep inline with your text and the part you store somewhere else in the file to keep the text easy to read.

The first part of a reference-style link is formatted with two sets of brackets. The first set of brackets surrounds the text that should appear linked. The second set of brackets displays a label used to point to the link you’re storing elsewhere in your document.

Although not required, you can include a space between the first and second set of brackets. The label in the second set of brackets is not case sensitive and can include letters, numbers, spaces, or punctuation.

This means the following example formats are roughly equivalent for the first part of the link:

  • [hobbit-hole][1]
  • [hobbit-hole] [1]

The second part of a reference-style link is formatted with the following attributes:

  1. The label, in brackets, followed immediately by a colon and at least one space (e.g., [label]: ).
  2. The URL for the link, which you can optionally enclose in angle brackets.
  3. The optional title for the link, which you can enclose in double quotes, single quotes, or parentheses.

This means the following example formats are all roughly equivalent for the second part of the link:

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

You can place this second part of the link anywhere in your Markdown document. Some people place them immediately after the paragraph in which they appear while other people place them at the end of the document (like endnotes or footnotes).

An Example Putting the Parts Together

Say you add a URL as a standard URL link to a paragraph and it looks like this in Markdown:

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"), and that means comfort.

Though it may point to interesting additional information, the URL as displayed really doesn’t add much to the existing raw text other than making it harder to read. To fix that, you could format the URL like this instead:

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole][1], and that means comfort.

[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

In both instances above, the rendered output would be identical:

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

and the HTML for the link would be:

<a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle" title="Hobbit lifestyles">hobbit-hole</a>

Markdown applications don’t agree on how to handle spaces in the middle of a URL. For compatibility, try to URL encode any spaces with %20.

✅  Do this ❌  Don't do this
[link](https://www.example.com/my%20great%20page) [link](https://www.example.com/my great page)

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title after the URL in the parentheses.

![Philadelphia's Magic Gardens. This place was so cool!](/assets/images/philly-magic-gardens.jpg "Philadelphia's Magic Gardens")

The rendered output looks like this:

Philadelphia's Magic Gardens. This place was so cool!

Linking Images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![An old rock in the desert](/assets/images/shiprock.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

The rendered output looks like this:

An old rock in the desert

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (\) in front of the character.

\* Without the backslash, this would be a bullet in an unordered list.

The rendered output looks like this:

* Without the backslash, this would be a bullet in an unordered list.

Characters You Can Escape

You can use a backslash to escape the following characters.

Character Name
\ backslash
` backtick (see also escaping backticks in code)
* asterisk
_ underscore
{ } curly braces
[ ] brackets
< > angle brackets
( ) parentheses
# pound sign
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark
| pipe (see also escaping pipe in tables)

HTML

Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the color of text or changing the width of an image.

To use HTML, place the tags in the text of your Markdown-formatted file.

This **word** is bold. This <em>word</em> is italic.

The rendered output looks like this:

This word is bold. This word is italic.

HTML Best Practices

For security reasons, not all Markdown applications support HTML in Markdown documents. When in doubt, check your Markdown application’s documentation. Some applications support only a subset of HTML tags.

Use blank lines to separate block-level HTML elements like <div>, <table>, <pre>, and <p> from the surrounding content. Try not to indent the tags with tabs or spaces — that can interfere with the formatting.

You can’t use Markdown syntax inside block-level HTML tags. For example, <p>italic and **bold**</p> won’t work.

Menulis Matematika dengan $\LaTeX$

Teks matematika dengan $\LaTeX$ dapat ditampilkan dengan mudah di Web Github yang diakses menggunakan Google Chrome atau Microsoft Edge, dengan cara menginstal Ekstensi Chrome XHub. Ekstensi ini juga dapat diinstal ke Microsoft Edge dari situs Ekstensi Google Chrome. Ekstensi XHub menggunakan KaTeX untuk memproses/menampilkan matematika dengan LaTeX.

Teks matematika di file Markdown yang disimpan di Github ditulis dengan format $$\int_0^{\infty} \sum_{k=1}^n \binom{n}{k} x^k \ dx $$ untuk inline dan


$$
\int_0^{\infty} \sum_{k=1}^n \binom{n}{k} x^k \ dx 
$$

untuk display.

Teks matematika di tengah baris: \(\int_0^{\infty} \sum_{k=1}^n \binom{n}{k} x^k \ dx\).

Teks matematika pada baris terpisah:

[\int_0^{\infty} \sum_{k=1}^n \binom{n}{k} x^k \ dx]

Tips di atas ternyata gagal ketika file Markdown diakses sebagai blog di Gihub.

Di Github, use inline and display math like

Display math (see empty lines befor anda after LaTeX):

[ e^{i\pi} + 1 = 0]

and line math $a^2 + b^2 = c^2$ (no empty lines before/after LaTeX)

Hasilnya: Display math:

[e^{i\pi} + 1 = 0]

and line math $a^2 + b^2 = c^2$.

e.g., Cauchy’s Theorem:

Let $U$ be an open subset of the complex plane $\mathbb{C}$, and suppose the closed disk $D$ defined as

[D = \bigl{z: z-z_{0} \leq r\bigr}]

is completely contained in $U$. Let $f: U\to\mathbb{C}$ be a holomorphic function, and let $\gamma$ be the circle, oriented counterclockwise, forming the boundary of \(D\). Then for every $a$ in the interior of $D$,

[f(a) = \frac{1}{2\pi i} \oint _{\gamma}\frac{f(z)}{z-a} dz.]

Sampul buku Markdown Guide
Tingkatkan keterampilan Markdown Anda

Pelajari Markdown dalam 60 halaman. Dirancang untuk pemula dan ahli, buku Panduan Markdown ini adalah referensi komprehensif yang memiliki semua yang Anda butuhkan untuk memulai dan menguasai sintaks Markdown.

Dapatkan buku tersebut
Ingin belajar lebih lanjut tentang Markdown?

Jangan berhenti! 😎 Beri tanda bintang situs repositori GitHub, daftarkan alamat e-mail Anda untuk menerima tutorial Markdown yang baru melalui e-mail. Bebas spam!