Markdown

H1 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

H2 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

H3 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

H4 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

H5 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

H6 - The Quick Brown Fox

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Links

[internal link](#)

[external link](https://example.com)

[`code link`](#)

[![badge name](url-icon)](url-badge)

[![avatar name](url-avatar) name](url-profile)

[![avatar name](url-avatar)](url-profile)

[![icon name](/.github/assets/images/logo.svg) Astro](#_top)

<div class='avatar-stack'>

[![avatar a](../../../../../assets/images/author/bimaakbar.svg)](#_top)
[![avatar b](../../../../../assets/images/author/bimaakbar.svg)](#_top)
[![avatar c](../../../../../assets/images/author/bimaakbar.svg)](#_top)

</div>

[![avatar bima](../../../../../assets/images/author/bimaakbar-dev.svg)](#_top)

[![avatar bima](../../../../../assets/images/author/bimaakbar-dev.svg) Bima Akbar](#_top)

<https://example.com>

<[email protected]>

• internal link

• external link

• code link

• 

• Astro TailwindCSS React

• 

• 

• Bima Akbar

• https://example.com

• [email protected]

Text Formatting

<b>Bold</b> <!-- atau --> **Bold**

<strong>Bold</strong>

<i>Italic</i> <!-- atau --> *Italic*, _Italic_

<em>Italic</em>

<b><i>Bold Italic</i></b> <!-- atau --> ***Bold + Italic***, _**Bold + Italic**_

<strong><em>Bold Italic</em></strong>

<s>strikethrough</s>

<del>strikethrough</del> <!-- Atau --> ~~strikethrough~~

<ins>inserted</ins>

<u>inserted</u>

<mark>highlighted</mark>

<small>small</small>

<abbr title="HyperText Markup Language">HTML</abbr>

• Bold
  • Bold
• Italic
  • Italic
• Bold + Italic
  • Bold + Italic
• strikethrough
  • strikethrough
• inserted
  • inserted
• highlighted
• small
• HTML

Escape karakter

\*bukan italic\*

\_bukan italic\_

\`bukan code\`

\#bukan heading

\[bukan link\]

\\backslash

*bukan italic*

_bukan italic_

`bukan code`

#bukan heading

[bukan link]

\backslash

Inline Typography

<kbd>Ctrl</kbd> + <kbd>C</kbd>

<samp>Hello, World!</samp>

<var>x</var> = <var>y</var> + 2

<dfn>API</dfn>

`inline code`

Dia berkata <q>ini adalah quote pendek</q> di dalam paragraf.

• Ctrl + C
• Hello, World!
• x = y + 2
• API
• inline code
• Dia berkata ini adalah quote pendek di dalam paragraf.

Blockquote

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
>
> <cite>John Doe, Penulis</cite>

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

> **Catatan**
>
> > **Sub-catatan**
> >
> > > **Sub-sub-catatan**

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

John Doe, Penulis

Level 1

Level 2

Level 3

Catatan

Sub-catatan

Sub-sub-catatan

Subscript & Superscript

H<sub>2</sub>O dan CO<sub>2</sub>

x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

<!-- Atau -->

H^2^O dan CO^2^

x~2~ + y~2~ = z~2~

• H₂O dan CO₂

• x² + y² = z²

• H²O dan CO²

• x₂ + y₂ = z₂

Footnote: footnote¹ dan footnote².

Time & Address

<time datetime="2026-05-13">13 May 2026</time>

<address>Jl. Sudirman No. 123, Jakarta</address>

• 12 September 2026
• Jl. Sudirman No. 123, Jakarta

Ruby

<ruby>日本語<rt>にほんご</rt></ruby>

• 日本語にほんご

Lists

Unordered List

<!-- `-` Bisa diganti dengan `+` -->
- Item 1
- Item 2
    - Nested item 2.1
    - Nested item 2.2
      + Nested item 2.2.1
      + Nested item 2.2.2
- Item 3

• Item 1
• Item 2
  • Nested item 2.1
  • Nested item 2.2
    • Nested item 2.2.1
    • Nested item 2.2.2
• Item 3

Ordered List

1. First item
2. Second item
      1. Nested ordered 2.1
      2. Nested ordered 2.2
3. Third item

<!-- -->

1. Item pertama
2. Item kedua
   - Unordered di dalam ordered
   - Item lain
     - Nested lebih dalam
3. Item ketiga

4. Mulai dari 3
5. Lanjut dari 4
  - Item
    > Blockquote di dalam list
  - Item lain
    ~~~js
    code di dalam list
    ~~~

1. First item
2. Second item
   1. Nested ordered 2.1
   2. Nested ordered 2.2
3. Third item

---

1. Item pertama

2. Item kedua

   • Unordered di dalam ordered
   • Item lain
     • Nested lebih dalam

3. Item ketiga

4. Mulai dari 3

5. Lanjut dari 4

• Item

  Blockquote di dalam list

• Item lain

  code di dalam list

Task List

- [x] Task yang sudah selesai
- [ ] Task yang belum selesai
- [ ] Task lain dengan **bold** dan `code`
- [x] Task dengan [link](#)

• Task yang sudah selesai
• Task yang belum selesai
• Task lain dengan bold dan code
• Task dengan link

Definition List

HTML
: HyperText Markup Language adalah bahasa markup untuk web

CSS
: Cascading Style Sheets untuk styling

API
: Application Programming Interface

`code-term`
: Definisi untuk istilah yang berupa `code`

// Atau

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language adalah bahasa markup untuk web</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets untuk styling</dd>

  <dt>API</dt>
  <dd>Application Programming Interface</dd>

  <dt><code>code-term</code></dt>
  <dd>Definisi untuk istilah yang berupa <code>code</code></dd>
</dl>

HTML

HyperText Markup Language adalah bahasa markup untuk web

CSS

Cascading Style Sheets untuk styling

API

Application Programming Interface

code-term

Definisi untuk istilah yang berupa code

Images & Media

![Alt text image](/.github/assets/banner.jpg 'Title image')

<picture>
  <source srcset="image.jpg" type="image/jpg" />
  <img src="/og.jpg" alt="Alt text" />
</picture>

<figure>
  <img src="/og.jpg" alt="Alt text figure" />
  <figcaption>Ini adalah figcaption untuk figure di atas.</figcaption>
</figure>

<figure>
  <a href="/">
    <img src="/og.jpg" alt="Alt text" />
  </a>
  <figcaption>Klik gambar untuk membuka situs.</figcaption>
</figure>

<video title="Video" poster="/og.jpg" width={720} height={480} controls muted autoplay loop="false" preload>
  <source src="/.github/assets/videos/video.mp4" />
  Browser Anda tidak mendukung tag video.
</video>

[![Tonton video](/og.jpg)](https://youtu.be/VIDEO_ID)

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Klik gambar untuk membuka situs.

Ini adalah figcaption untuk figure di atas.

Table

| Column 1 | Column 2 | Column 3 |
| :---- | :----- | :----- |
| Data 1 | Data 2 | Data 3 |
| Data 1 | Data 2 | Data 3 |

// Atau

<table>
  <thead>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3

Details & Summary

<details>
<summary>Click untuk buka details</summary>

Ini adalah content di dalam details. Bisa ada **bold**, `code`, dan [link](#).

- List di dalam details
- Item 2

> Blockquote di dalam details

</details>

Click untuk buka details

Ini adalah content di dalam details. Bisa ada bold, code, dan link.

• List di dalam details
• Item 2

Blockquote di dalam details

Horizontal Rule

Di atas ada hr.

---

Di bawah ada hr.

---

Di atas ada hr.

---

Di bawah ada hr.

---

Hardline Break

Baris 1
Baris 2 (dua spasi di akhir baris)

Baris 1<br />
Baris 2 (pakai tag br)

Baris 1\
Baris 2 (backslash di akhir baris)

Baris 1
Baris 2 (dua spasi di akhir baris)

Baris 1
Baris 2 (pakai tag br)

Baris 1
Baris 2 (backslash di akhir baris)

<!-- Ini komentar, tidak akan muncul di output -->

Teks di bawah komentar.

Teks di bawah komentar.

Html Entitas

© ® ™ & < >   — – … « » × ÷

© ® ™ & < >   — – … « » × ÷

Emoji Code

:smile: :rocket: :fire: :tada: :sparkles: :heart: :+1: :-1:

:warning: :bulb: :books: :memo: :bug: :zap:

:smile: :rocket: :fire: :tada: :sparkles: :heart: :+1: :-1:

:warning: :bulb: :books: :memo: :bug: :zap:

Mermaid

Math

Inline: $$E = mc^2$$

Block:

$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$

Matrix:

$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

Inline: E = mc^2

Block:

\int_{a}^{b} f(x) \, dx = F(b) - F(a)

Matrix:

\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}

Footnotes

1. Ini adalah footnote pertama dengan bold dan code. ↩

2. Footnote kedua dengan link. ↩