Memuat halaman…
Memuat halaman…
Halaman referensi internal yang menampilkan setiap komponen MDX yang tersedia di Dosen Programming — Callout, Tabs, Collapsible, CodeRunner, CodePlayground, Quiz, dan Figure.
Feedback kamu membantu kami memperbaiki materi berikutnya.
Silakan masuk terlebih dahulu untuk ikut berdiskusi
Login SekarangReza Maulana
Tim editorial Dosen Programming, fokus pada konten pemrograman berbahasa Indonesia yang praktis dan mendalam.
Halaman ini adalah showcase untuk setiap komponen MDX yang tersedia di Dosen Programming. Ditujukan untuk penulis konten sebagai referensi visual. Tidak untuk diterbitkan ke publik — lihat content/CONTENT_GUIDE.md untuk dokumentasi lengkap.
Catatan
Callout note cocok untuk catatan umum, pengingat, atau informasi tambahan yang tidak urgent.
Tip Praktis
Selalu tulis alt text untuk setiap gambar — ini membantu aksesibilitas dan SEO.
Informasi
Block info untuk konteks tambahan yang membantu pembaca memahami "mengapa".
Berhasil!
Gunakan success saat pembaca menyelesaikan sesuatu dengan benar.
Peringatan
Jangan pernah commit file .env ke repository.
Bahaya
API /api/users lama sudah dihapus di v2. Migrasi ke /api/v2/users sebelum 1 Juli 2026.
Kalau kamu perhatikan baik-baik, jawaban di atas memanfaatkan operator ternary dan template literal ES6. Kedua fitur ini sudah didukung di seluruh browser modern (Chrome 41+, Firefox 34+, Safari 9+), jadi tidak perlu polyfill.
Bisa juga ditulis pakai if/else:
Dua versi di atas sama-sama valid — pilih sesuai gaya tim.
Hanya syntax highlighting, tidak ada tombol Run.
run-*)Snippet pendek yang bisa langsung dijalankan:
playground-*)Snippet yang bisa diedit langsung dengan Monaco editor:
Kuis
Komponen MDX mana yang dipakai untuk blok kode yang bisa diedit dan dijalankan di artikel?
Kuis
Tipe Callout mana yang cocok untuk peringatan breaking change?
| Komponen | Use case |
|---|---|
Callout / :::tip | Sorotan, tips, peringatan |
Tabs | Konten dengan beberapa varian (OS, package manager) |
Collapsible | Pembahasan opsional, spoiler |
run-* | Snippet pendek yang bisa dijalankan |
playground-* | Latihan interaktif, snippet panjang |
Quiz | Self-check kuis dengan progress tersimpan |
Figure | Gambar dengan caption + zoom |
Lihat content/CONTENT_GUIDE.md untuk dokumentasi lengkap dan referensi API setiap komponen.
function greet(name: string): string {
if (name.startsWith("Dosen")) {
return `Selamat datang kembali, ${name}!`;
}
return `Halo, ${name}!`;
}type User = {
id: string;
name: string;
role: "admin" | "member";
};
const user: User = {
id: "u_001",
name: "Reza",
role: "admin",
};def fibonacci(n: int) -> list[int]:
seq = [0, 1]
for _ in range(n - 2):
seq.append(seq[-1] + seq[-2])
return seq[:n]
print(fibonacci(10))const items = ["TypeScript", "JavaScript", "React", "Next.js"];
items.forEach((item, i) => console.log(`${i + 1}. Belajar ${item}`));
console.warn("Ini cuma peringatan");
console.info("Selesai!");def greet(name):
return f"Halo, {name}!"
for n in ["Reza", "Dosen", "Programming"]:
print(greet(n))type Course = {
title: string;
lessons: number;
tags: string[];
};
const courses: Course[] = [
{ title: "TypeScript untuk Pemula", lessons: 16, tags: ["ts"] },
{ title: "Belajar React Hooks", lessons: 12, tags: ["react"] },
];
const total = courses.reduce((sum, c) => sum + c.lessons, 0);
console.log(`Total pelajaran: ${total}`);
courses.forEach((c) => console.log(`- ${c.title} (${c.lessons} pelajaran)`));def greet(name: str, *, excited: bool = False) -> str:
return f"Halo, {name}{'!' if excited else '.'}"
names = ["Reza", "Dosen", "Programming"]
for i, name in enumerate(names, start=1):
print(f"{i}. {greet(name, excited=(i == 1))}")