Parmi Notes Random short any article

Mark Down Language

panduan lengkap format Markdown dengan contoh dan penjelasan untuk setiap sintaks:

๐Ÿ“š PANDUAN LENGKAP MARKDOWN

1. HEADINGS (JUDUL)

Sintaks:

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

Contoh:

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)
Heading 6 (H6)

Penjelasan:

  • Gunakan # di awal baris
  • Jumlah # menentukan level heading (1-6)
  • Harus ada spasi setelah #
  • Heading 1 biasanya untuk judul utama

2. TEKS FORMATTING

Bold (Tebal)

**teks tebal** atau __teks tebal__

contoh teks tebal

Italic (Miring)

*teks miring* atau _teks miring_

contoh teks miring

Bold + Italic

***teks tebal dan miring***

contoh teks tebal dan miring

Strikethrough (Coret)

~~teks tercoret~~

contoh teks tercoret

Highlight (Sorot)

==teks tersorot==

==contoh teks tersorot== (tergantung parser)

3. LISTS (DAFTAR)

Unordered List (Bullet)

- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
- Item 3
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
  • Item 3

Ordered List (Angka)

1. Pertama
2. Kedua
   1. Sub-pertama
   2. Sub-kedua
3. Ketiga
  1. Pertama
  2. Kedua
    1. Sub-pertama
    2. Sub-kedua
  3. Ketiga

Task List (Checkbox)

- [x] Task selesai
- [ ] Task belum selesai
- [ ] Task lainnya
  • [x] Task selesai
  • [ ] Task belum selesai
  • [ ] Task lainnya

4. LINKS & IMAGES

Link

[teks link](https://example.com)
[link dengan title](https://example.com "Judul Tooltip")

Contoh link

Link Otomatis

https://example.com
<email@example.com>

https://example.com email@example.com

Images (Gambar)

![alt text](https://via.placeholder.com/150 "Judul gambar")
![logo github](https://github.githubassets.com/favicon.ico "GitHub Logo")

contoh gambar

Gambar dengan Link

[![GitHub](https://github.githubassets.com/favicon.ico)](https://github.com)

GitHub

5. CODE & SYNTAX HIGHLIGHTING

Inline Code

Gunakan `print("Hello World")` di Python.

Gunakan print("Hello World") di Python.

Code Block (tanpa syntax highlighting)

```
function hello() {
  console.log("Hello World");
}
```

function hello() {
  console.log("Hello World");
}

Code Block dengan Bahasa

```javascript
function hello() {
  console.log("Hello World");
  return true;
}
```

```python
def hello():
    print("Hello World")
    return True
```

```html
<div class="container">
  <h1>Hello World</h1>
</div>
```

function hello() {
  console.log("Hello World");
  return true;
}

def hello():
    print("Hello World")
    return True

<div class="container">
  <h1>Hello World</h1>
</div>

6. TABLES (TABEL)

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Left     | Center   | Right    |
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Left Center Right

Alignment di Tabel

| Kiri     | Tengah   | Kanan    |
|:---------|:--------:|---------:|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |
Kiri Tengah Kanan
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

7. QUOTES & BLOCKQUOTES

Blockquote Sederhana

> Ini adalah blockquote.
> Baris kedua masih dalam blockquote.
>
> Paragraf baru dalam blockquote.

Ini adalah blockquote. Baris kedua masih dalam blockquote.

Paragraf baru dalam blockquote.

Nested Blockquote

> Level 1
>> Level 2
>>> Level 3

Level 1

Level 2

Level 3

Blockquote dengan Format Lain

> **Catatan Penting:** 
> Ini adalah catatan dengan format **tebal** dan `kode`.
> 
> - Point 1
> - Point 2

Catatan Penting: Ini adalah catatan dengan format tebal dan kode.

  • Point 1
  • Point 2

8. HORIZONTAL RULES (GARIS PEMISAH)

---
***
___

9. ESCAPE CHARACTERS (KARAKTER PELOLOS)

\*Teks dengan asterisk\*
\# Bukan heading
\[Bukan link\]\(

*Teks dengan asterisk* # Bukan heading [Bukan link](

Karakter yang perlu di-escape: \ ` * _ {} [] () # + - . !

10. FOOTNOTES (CATATAN KAKI)

Ini adalah teks dengan referensi[^1].

[^1]: Ini adalah catatan kaki yang muncul di bawah.

Ini adalah teks dengan referensi1.

11. DEFINITION LISTS

Kata Pertama
: Definisi pertama
: Definisi kedua

Kata Kedua
: Definisi kata kedua
Kata Pertama
Definisi pertama
Definisi kedua
Kata Kedua
Definisi kata kedua

12. ABBREVIATIONS (SINGKATAN)

MDN adalah sumber belajar web development.

*[MDN]: Mozilla Developer Network

MDN adalah sumber belajar web development.

13. EMOJI

:smile: :heart: :rocket: :+1: :-1:

:smile: :heart: :rocket: :+1: :-1:

Daftar lengkap: Emoji Cheat Sheet

14. SUPERSCRIPT & SUBSCRIPT

H~2~O (subscript)
X^2^ (superscript)

H~2~O (subscript) X^2^ (superscript) (tergantung parser)

15. KBD (KEYBOARD KEYS)

Tekan `Ctrl` + `C` untuk copy.
Tekan `Ctrl` + `V` untuk paste.

Tekan Ctrl + C untuk copy. Tekan Ctrl + V untuk paste.

16. COMMENTS (KOMENTAR)

```markdownTeks yang terlihat 

Teks yang terlihat

---

# 17. **MATH EXPRESSIONS (MATEMATIKA)**

```markdown
$$E = mc^2$$

$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$

Inline: $\pi \approx 3.14159$

$$E = mc^2$$

$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$

Inline: $\pi \approx 3.14159$ (tergantung parser)

18. DIAGRAMS & FLOWCHARTS

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;


*(Membutuhkan parser dengan dukungan Mermaid.js)*

---

# 19. **ATTRIBUTION & CITE**

```markdown
> In the beginning God created the heaven and the earth.
> โ€” <cite>Genesis 1:1</cite>
```

> In the beginning God created the heaven and the earth.
> โ€” <cite>Genesis 1:1</cite>

---

# 20. **CUSTOM IDs untuk HEADINGS**

```markdown
## Section Title {#custom-id}
```

Lalu bisa di-link: `[Link ke Section](#custom-id)`

---

# 21. **AUTOMATIC URL LINKING**

```markdown
Visit https://www.example.com or email info@example.com
```

Visit https://www.example.com or email info@example.com

---

# 22. **DISABLING MARKDOWN**

````markdown
```text
**Teks ini tidak akan diparsing**
[Link ini juga tidak](http://example.com)
```

**Teks ini tidak akan diparsing**
[Link ini juga tidak](http://example.com)

๐ŸŽฏ CONTOH FILE MARKDOWN LENGKAP

# ๐Ÿ“˜ Panduan Markdown Lengkap

## ๐ŸŽฏ Pengenalan

Markdown adalah **bahasa markup ringan** untuk membuat dokumen terformat dengan sintaks yang mudah. 
Dikembangkan oleh [John Gruber](https://daringfireball.net/projects/markdown/) pada 2004.

> **Quote:** "Markdown is intended to be as easy-to-read and easy-to-write as is feasible." 
> โ€” John Gruber

## โœจ Format Dasar

### Teks Biasa
Ini adalah paragraf biasa. Spasi kosong antar paragraf membuat pemisah.

Paragraf kedua dengan **teks tebal**, *teks miring*, dan ~~teks coret~~.

### Daftar

#### Daftar Tidak Berurutan:
- Item pertama
- Item kedua
  - Sub-item 2.1
  - Sub-item 2.2
- Item ketiga

#### Daftar Berurutan:
1. Langkah pertama
2. Langkah kedua
   1. Sub-langkah 2.1
   2. Sub-langkah 2.2
3. Langkah ketiga

### Kode

Kode inline: `console.log('Hello')`

Kode block:
```javascript
function hello(name) {
  console.log(`Hello, ${name}!`);
  return true;
}
```

## ๐Ÿ“Š Tabel Contoh

| Nama | Usia | Pekerjaan | Status |
|------|------|-----------|--------|
| Andi | 25   | Developer | Aktif  |
| Budi | 30   | Designer  | Aktif  |
| Cici | 28   | Manager   | Cuti   |

## ๐Ÿ”— Link dan Gambar

- Situs resmi: [Markdown Guide](https://www.markdownguide.org/)
- Gambar: ![Logo](https://via.placeholder.com/100x50/0088cc/ffffff?text=Logo)

## ๐Ÿงฎ Contoh Lainnya

### Mathematical Expression
$$ 
a^2 + b^2 = c^2 
$$

### Task List
- [x] Memahami dasar Markdown
- [x] Mempelajari format lanjutan
- [ ] Praktek membuat dokumentasi
- [ ] Bagikan dengan tim

### Footnotes
Ini adalah teks dengan catatan kaki[^1].

[^1]: Ini adalah konten dari catatan kaki.

---

## ๐Ÿ“ Tips dan Trik

1. Gunakan **ekstensi .md** atau **.markdown** untuk file
2. Preview dengan editor seperti VS Code, Typora, atau StackEdit
3. Untuk tabel panjang, gunakan [Table Generator Online](https://www.tablesgenerator.com/markdown_tables)
4. Test kompatibilitas dengan berbagai parser

## ๐Ÿš€ Parser Markdown Populer

| Parser | Bahasa | Fitur |
|--------|--------|-------|
| **Parsedown** | PHP | Cepat, mendukung GitHub Flavored Markdown |
| **Marked** | JavaScript | Ringan, bisa di-client side |
| **Python-Markdown** | Python | Extensible, banyak extension |
| **CommonMark** | Multiple | Standar baru, konsisten |

## ๐Ÿ“„ Contoh Export

File ini bisa diexport ke:
- HTML: `panduan.html`
- PDF: `panduan.pdf`
- DOCX: `panduan.docx`

---

> **๐Ÿ’ก Catatan:** Tidak semua parser mendukung semua fitur di atas.
> Pastikan parser Anda mendukung fitur yang ingin digunakan.

ยฉ 2024 Panduan Markdown | [Edit di GitHub](https://github.com)

๐Ÿ› ๏ธ PARSER YANG DIREKOMENDASIKAN

Untuk PHP (seperti yang Anda gunakan):

1. Parsedown (yang sudah Anda pakai)

require_once 'Parsedown.php';
$parsedown = new Parsedown();
echo $parsedown->text($markdown);

2. Parsedown Extra (dengan fitur tambahan)

require_once 'ParsedownExtra.php';
$parsedown = new ParsedownExtra();
echo $parsedown->text($markdown);

3. CommonMark (standar terbaru)

use League\CommonMark\CommonMarkConverter;
$converter = new CommonMarkConverter();
echo $converter->convert($markdown);

๐Ÿ“ FILE CONTOH UNTUK DIUJI

Buat file contoh_lengkap.md:

# ๐Ÿงช File Testing Markdown Lengkap

## Bagian 1: Format Teks
**Tebal**, *Miring*, ***Tebal dan Miring***, ~~Coret~~

## Bagian 2: List
- [x] Checkbox checked
- [ ] Checkbox unchecked
1. Ordered 1
2. Ordered 2

## Bagian 3: Kode
```php
<?php
echo "Hello World";
?>
```

## Bagian 4: Tabel
| Syntax | Description |
|--------|-------------|
| Header | Title       |
| Paragraph | Text      |

## Bagian 5: Blockquote
> Ini quote dengan **format**

## Bagian 6: Link & Gambar
[Google](https://google.com)
![Gambar](https://via.placeholder.com/150)

---

*File testing untuk cek semua fitur*

๐Ÿ” TOOLS YANG MEMBANTU:

  1. Editor Online:

  2. Validator:

  3. Converter:

    • Pandoc - Konversi ke berbagai format

  4. Browser Extension:

    • Markdown Viewer (untuk preview .md di browser)

๐Ÿ“š REFERENSI:

  1. Official Markdown Syntax
  2. GitHub Flavored Markdown
  3. CommonMark Spec
  4. Markdown Guide

Kesimpulan: Markdown sangat powerful untuk dokumentasi, README, blog, dan catatan. Sintaksnya sederhana tapi bisa menghasilkan dokumen yang profesional dengan dukungan parser yang tepat!

Ingin saya buatkan file contoh praktis yang bisa langsung Anda gunakan untuk testing?

  1. Ini adalah catatan kaki yang muncul di bawah. ↩︎