Heading 1 - Judul Utama

Ini adalah paragraf biasa. Teks ini akan ditampilkan dengan styling custom yang sudah diatur di komponen markdown. Paragraf akan memiliki text-justify alignment dan warna amber-900.

Heading 2 - Subjudul dengan Anchor Link#

Heading level 2 memiliki accent bar di sebelah kiri dan anchor link yang muncul saat hover.

Heading 3 - Sub-subjudul#

Heading level 3 juga memiliki anchor link saat hover.

Heading 4 - Level Empat

Heading 5 - Level Lima

Heading 6 - Level Enam (Uppercase)

Text Formatting#

Ini adalah teks bold/tebal yang menggunakan komponen Bold.

Ini adalah teks italic/miring yang menggunakan komponen Italic.

Ini adalah teks ~~strikethrough/coret~~ yang menggunakan komponen Strikethrough.

Kombinasi bold dan italic secara bersamaan.

Inline Code#

Gunakan console.log() untuk debugging. Atau import dengan import React from 'react'.

Contoh variabel: const isActive = true dan let counter = 0.

Links#

Ini adalah link internal ke halaman blog.

Ini adalah link eksternal ke Google yang akan memiliki icon external link.

Ini adalah link ke GitHub - lihat icon panah kecil di sebelahnya.

Lists#

Unordered List#

Item pertama dalam unordered list
Item kedua dengan penjelasan lebih panjang untuk melihat bagaimana text wrapping bekerja
Item ketiga
Item keempat

Ordered List#

Langkah pertama
Langkah kedua
Langkah ketiga dengan deskripsi lebih panjang
Langkah keempat

Nested List#

Item parent pertama
- Sub-item satu
- Sub-item dua
Item parent kedua
- Sub-item A
- Sub-item B
- Sub-item C

Blockquotes#

Ini adalah blockquote biasa. Styling-nya menggunakan border kiri warna primary dan background yang sedikit transparan.

"The best way to predict the future is to invent it." - Alan Kay

Callouts / Admonitions#

[!NOTE] Ini adalah catatan penting yang perlu diperhatikan oleh pembaca.

[!TIP] Tips berguna: Gunakan keyboard shortcut Ctrl+S untuk menyimpan file.

[!IMPORTANT] Informasi penting yang tidak boleh dilewatkan.

[!WARNING] Peringatan: Pastikan backup data sebelum melanjutkan.

[!CAUTION] Hati-hati! Tindakan ini tidak dapat dibatalkan.

Code Blocks#

code.javascript

// Ini adalah code block dengan syntax highlighting
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome, ${name}`;
}

const result = greet('World');

code.python

# Python code example
def calculate_sum(numbers):
    total = 0
    for num in numbers:
        total += num
    return total

result = calculate_sum([1, 2, 3, 4, 5])
print(f"Sum: {result}")

code.css

/* CSS Styling Example */
.button {
  background-color: #fdba74;
  color: #1a1410;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: bold;
  transition: all 0.2s ease;
}

.button:hover {
  background-color: #f59e0b;
  transform: translateY(-2px);
}

Tables#

Nama	Jabatan	Departemen
John Doe	Manager	Engineering
Jane Smith	Designer	Creative
Bob Wilson	Developer	Engineering
Alice Brown	Analyst	Data Science

Table dengan Data Lain#

Fitur	Status	Keterangan
Dark Mode	✅	Sudah dihapus
Parallax	❌	Tidak aktif
Related Posts	✅	Aktif
Custom Components	✅	Baru dibuat

Horizontal Rules#

Horizontal rule di atas menggunakan gradient dari transparent ke amber.

LaTeX / Math Equations#

Gunakan code block dengan bahasa tex, latex, atau math untuk render persamaan matematika:

Persamaan Kuadrat#

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\mathcal{Z} = \int \mathcal{D}\phi \sqrt{-\det g_{\mu\nu}} \exp\left[ i \int d^4x \left( R - \frac{1}{4}F_{\mu\nu}F^{\mu\nu} + \bar{\psi}(i\gamma^\mu D_\mu - m)\psi + \oint_C \frac{e^{kz}}{z} dz \right) \right]

Integral#

\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Matriks#

\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}

Limit dan Summation#

\lim_{n \to \infty} \sum_{k=1}^{n} \frac{1}{k^2} = \frac{\pi^2}{6}

Greek Letters dan Symbols#

\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu, \pi, \sigma, \omega

Persamaan Kompleks#

\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}

No component provided for HeaderLink

Images#

Gambar akan menggunakan komponen TinaImage dengan styling khusus.

Mixed Content#

Berikut adalah contoh konten campuran dengan berbagai elemen:

Langkah pertama: Buat folder baru dengan perintah mkdir project
Langkah kedua: Masuk ke folder dengan cd project
Langkah ketiga: Inisialisasi project dengan menjalankan:

code.bash

npm init -y
npm install react react-dom

[!TIP] Jangan lupa untuk menambahkan file .gitignore sebelum melakukan commit pertama!

Setelah selesai, kamu bisa melihat hasilnya di localhost:3000.

Kesimpulan#

Semua komponen markdown custom telah diuji dalam postingan ini:

✅ Headings (H1-H6)
✅ Paragraphs
✅ Bold, Italic, Strikethrough
✅ Inline Code
✅ Links (internal & external)
✅ Unordered & Ordered Lists
✅ Blockquotes & Callouts
✅ Code Blocks
✅ Tables
✅ Horizontal Rules
✅ LaTeX / Math Equations (KaTeX)

Selamat menggunakan komponen markdown yang baru! 🎉