Home
Blog
TutorialsEventsProjectsAboutContact

Menu

Departures

Latest posts

  1. 16 OCTDRNReview DJI Zenmuse H30 Series Sensor Flagship EnterpriseOn time
  2. 16 OCTDRNKebakaran Hutan, Drone Thermal, dan Modifikasi CuacaOn time
  3. 16 OCTTCHMathspocalypse dan Dampak AI terhadap Dunia Matematika ModernOn time
  4. 16 OCTDRNPanduan Sidopi Go untuk Registrasi Drone dan PilotOn time
  5. 16 OCTDRNPerusahaan Drone Terbaik 2026, 36 Pembuat Hardware dan AppOn time
All departures
Format Penulisan Markdown

WDELogbook entry· 3 min read

Format Penulisan Markdown

Panduan ini akan membantu Anda memahami cara menulis artikel blog yang efektif dan menarik di platform ini dengan format MDX.

Liu Purnomo
Oleh Liu PurnomoDi tulis tanggal 22 Juli 2025
Web Development
3 min read

Sponsored

Frequencies

  • #MDX

Sponsored

Liu PurnomoCallsign · LPLiu Purnomo

Pendiri Drone Indonesia, direktur Remote Pilot Indonesia, software engineer, dan penulis tiga buku tentang drone.

Selengkapnya
seedbacklinkDMCA.com Protection StatusBanner BlogPartner Backlink.co.id

NAVJelajahi

  • Beranda
  • Blog
  • Tutorial
  • Events
  • Projects
  • Buku

INFTentang

  • Tentang Saya
  • Kerja Sama
  • Kontak
  • Buku Tamu
  • Bio Links
  • Traktir Author

SYSOthers

  • Changelog
  • Systems
  • Sitemap
  • Kalkulator GSD
  • QR Code Generator
0927

Tower online · Jakarta (WIB)

© 2026 Liu Purnomo. Some rights reserved.

Kebijakan PrivasiKetentuan Penggunaan
Ikuti tulisan baru

Kecuali dinyatakan lain, tulisan di situs ini dilisensikan di bawah Creative Commons Attribution 4.0 International (CC BY 4.0). Anda boleh mengutip, menyalin, menerbitkan ulang, dan menjadikannya referensi, termasuk untuk keperluan komersial, selama menyebutkan Liu Purnomo sebagai penulis dan menautkan ke artikel aslinya. Foto atau materi pihak lain, logo, dan merek dagang tidak termasuk. Ketentuan lengkap

0
0

Petunjuk Menulis Blog

Ini adalah panduan tentang struktur penulisan artikel blog menggunakan format MDX. Panduan ini mencakup cara menyusun metadata, menulis konten, dan menyisipkan komponen React.

Struktur Dasar MDX

Untuk menulis artikel blog, Anda perlu mengikuti struktur dasar MDX berikut:

Struktur HARUS dimulai dengan blok metadata yang berisi informasi penting tentang artikel, seperti judul, tanggal, penulis, ringkasan, kategori, gambar, tag, dan layout. Untuk pemahaman dasar tentang Markdown, baca dulu artikel cara menulis markdown.

Menyisipkan Komponen

Anda dapat menyisipkan komponen React di dalam artikel MDX Anda. Berikut adalah beberapa contoh:

Baca juga

Ringkasan Isi Blog Ini

Web Development · 21 menit baca

Link

Hindari menggunakan tautan dengan prop showExternalIcon langsung di MDX. Gunakan komponen Button atau Link custom agar prop tidak bocor ke DOM.

contoh output:

Kunjungi Next.js

Button

contoh output:

Sponsored

Hubungi Saya

Gambar

contoh output:

Video

Anda bisa menyisipkan src atau url video yang ingin ditampilkan, berlaku untuk video mp4, webm, youtube, dan lainnya.

Package Manager Tab

Digunakan untuk menampilkan perintah instalasi paket, dari sini akan di convert kedalam format tab untuk npm, yarn, pnpm dan bun.

Cara Menulis Markdown

Baca juga

Cara Menulis Markdown

Web Development · 12 menit baca

tidak perlu menyertakan kata npm atau yarn atau lainnya, karena akan otomatis terisi sesuai dengan package manager yang digunakan. cukup menuliskan perintahnya saja.

Quote

Ini untuk menampilkan kutipan atau testimoni. Anda dapat menggunakan komponen Quote untuk ini.

Author itu adalah nama penulis kutipan, dan isi kutipan itu sendiri.

Author opsional, jika tidak ada, bisa dihilangkan, otomatis akan terisi Anonymous.

Fuel the next flight

Suka dengan tulisan ini?

Kalau artikel ini membantu, traktir saya secangkir kopi. Dukunganmu bikin saya bisa terus menulis dan berbagi lebih banyak.

Traktir kopi

Tabel

Comments

You must be logged in to comment

No comments yet. Be the first to comment!

Crew ID · Flight deckCaptain
Photo of Liu Purnomo

Written by

Liu Purnomo

I'm a Software Engineer who turns coffee into code, and sometimes I even make interactive web things that work! ☕💻 I'm also a certified multitasker: an Expert Drone Pilot (ask me for aerial selfies!), a Certified Instructor/Public Speaker (I talk a lot), and a Seasonal Runner who believes in running only when the weather is perfect. Let's connect!

Callsign
LPI
Handle
@liupurnomo
Home base
Jakarta, Indonesia
On dutyView profile
Connecting flights

Related posts

More articles headed the same way as this one.

  1. Gate 01WDEWDE15 Jul 2025Ringkasan Isi Blog IniPanduan lengkap untuk navigasi semua konten blog, dari dasar drone hingga tutorial web development.Via #MDXDuration21mBoarding
  2. Gate 02WDEWDE21 Oct 2023Cara Menulis MarkdownJika Anda kesulitan dengan tabel MDX yang tidak dirender di proyek Next.js Anda, panduan ini akan membantu Anda memecahkan masalah dan memperbaikinya secara efektif.Via #MDXDuration12mBoarding
  3. Gate 03WDEWDE2 Dec 2025Setup awal Nextjs 16 dan Prisma 7Nextjs 16 adalah versi yang baru dari Next, framework React populer. Prisma merupakan ORM yang mempermudah akses data ke database. Artikel ini memberikan contoh setup awal untuk Nextjs 16 dan Prisma 7.Sector Web DevelopmentDuration--Boarding
  4. Gate 04WDEWDE31 Jul 2025How to Fix "params should be awaited" Error in Next.js 15+If you have recently upgraded to Next.js 15 or started a new project, you might have encountered this frustrating error when working with dynamic routes:Sector Web DevelopmentDuration4mBoarding
  1. WPT 01Struktur Dasar MDX
  2. WPT 02Menyisipkan Komponen
  3. WPT 03Video
  4. WPT 04Package Manager Tab
  5. WPT 05Quote
  6. WPT 06Tabel

Sponsored

Departures

Latest posts

  1. 16 OCTDRNReview DJI Zenmuse H30 Series Sensor Flagship EnterpriseOn time
  2. 16 OCTDRNKebakaran Hutan, Drone Thermal, dan Modifikasi CuacaOn time
  3. 16 OCTTCHMathspocalypse dan Dampak AI terhadap Dunia Matematika ModernOn time
  4. 16 OCTDRNPanduan Sidopi Go untuk Registrasi Drone dan PilotOn time
  5. 16 OCTDRNPerusahaan Drone Terbaik 2026, 36 Pembuat Hardware dan AppOn time
All departures
mdx
1---

2title: 'Judul Artikel Yang Menarik' // Judul artikel yang akan ditampilkan di halaman

3date: '2025-07-15' // Tanggal penulisan artikel

4author: 'Nama Penulis'

5summary: 'Ringkasan singkat artikel. akan menjadi meta deskripsi.' // Ringkasan artikel yang akan ditampilkan di halaman daftar artikel

6categories:

7  - Kategori 1 //sebaiknya satu kategori saja

8image: '/path/to/image.webp'

9tags:

10  - Tag 1

11  - Tag 2

12excerpt: 'Ini adalah ekstrak artikel yang akan ditampilkan di daftar artikel. Ini memberikan gambaran singkat tentang isi artikel.'

13layout: Post // selalu gunakan Post untuk layout

14---

15

16Ini adalah konten artikel Anda. Anda dapat menggunakan Markdown untuk format teks, seperti **tebal**, _miring_, dan [tautan](https://example.com).
mdx
1<Button as="a" href="https://nextjs.org" target="_blank" showExternalIcon>

2  Kunjungi Next.js

3</Button>
mdx
1<Button as="a" href="/contact">

2  Hubungi Saya

3</Button>
mdx
1<Image

2  src="/bg/1.webp"

3  alt="Contoh Gambar"

4  title="Sky Day"

5  width={600}

6  height={300}

7/>
Contoh Gambar
Sky Day
npm install my-package
“
Puncak dari kreativitas adalah kemampuan untuk melihat hubungan antara hal-hal
yang tampaknya tidak terkait.
”
— Steve Jobs
FrameworkLanguageYearPopularity
ReactJavaScript2013⭐⭐⭐⭐⭐
Vue.jsJavaScript2014⭐⭐⭐⭐
AngularTypeScript2010⭐⭐⭐
SvelteJavaScript2016⭐⭐⭐