Home
Blog
TutorialsEventsProjectsAboutContact

Menu

Departures

Latest posts

  1. 09 NOVDRNDrone Penanggulangan Karhutla Alat Pejuang Masa KiniOn time
  2. 09 NOVDRNBaling-Baling Bambu Modern Menjaga Kedaulatan UdaraOn time
  3. 09 NOVEDTDrone Crowd Control Berbasis AI Ringan untuk Acara MassalOn time
  4. 09 NOVEDTMakna Salam Tiga Jari dalam Gelombang Aksi MahasiswaOn time
  5. 09 NOVNWSBaykar Kirim Lebih dari 1.000 Drone ke 41 Negara di DuniaOn 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

Flight Briefing · Newsletter

Suka tulisan ini? Dapatkan artikel berikutnya lewat email.

Tanpa spam. Berhenti kapan saja lewat link di setiap email.

NOTAMContent noticeREF C4251
Q)

Info only · Claim, credit, or removal on request

E)

Artikel ini dibuat untuk tujuan informasi. Kalau kamu pemilik gambar atau konten di halaman ini dan ingin mengklaim, meminta kredit, atau meminta penghapusan, saya terbuka untuk permintaan itu. Silakan hubungi saya.

This article is shared for informational purposes. If you own an image or content on this page and would like to claim it, request credit, or ask for its removal, I am open to that. Please contact me.

Contact tower[email protected]WhatsAppFull notice

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

Flight Briefing · Newsletter

Artikel pilihan, langsung ke inbox.

Catatan terbaru soal drone, regulasi penerbangan, dan software, dikirim sesekali saja.

Tanpa spam. Berhenti kapan saja lewat link di setiap email.

0927

Tower online · Jakarta (WIB)

© 2026 Liu Purnomo. Some rights reserved.

Kebijakan PrivasiKetentuan PenggunaanContent Notice
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

Petunjuk Menulis Blog

Web Development · 3 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.

Baca juga

Ringkasan Isi Blog Ini

Web Development · 21 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 2025Petunjuk Menulis BlogPanduan ini akan membantu Anda memahami cara menulis artikel blog yang efektif dan menarik di platform ini dengan format mdx file.Via #MDXDuration3mBoarding
  2. Gate 02WDEWDE15 Jul 2025Ringkasan Isi Blog IniPanduan lengkap untuk navigasi semua konten blog, dari dasar drone hingga tutorial web development.Via #MDXDuration21mBoarding
  3. Gate 03WDEWDE21 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
  4. Gate 04WDEWDE18 Oct 2026Belajar PHP untuk Pemula: Konsep Server-Side, XAMPP, dan Hello WorldPanduan dasar belajar PHP untuk pemula, mulai dari memahami server-side scripting, mengonfigurasi XAMPP dan htdocs, hingga menjalankan skrip pertama di localhost.Sector Web DevelopmentDuration--Boarding
  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. 09 NOVDRNDrone Penanggulangan Karhutla Alat Pejuang Masa KiniOn time
  2. 09 NOVDRNBaling-Baling Bambu Modern Menjaga Kedaulatan UdaraOn time
  3. 09 NOVEDTDrone Crowd Control Berbasis AI Ringan untuk Acara MassalOn time
  4. 09 NOVEDTMakna Salam Tiga Jari dalam Gelombang Aksi MahasiswaOn time
  5. 09 NOVNWSBaykar Kirim Lebih dari 1.000 Drone ke 41 Negara di DuniaOn 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⭐⭐⭐