MDX Nedir?

MDX, JSX'i doğrudan Markdown belgelerinin içine yazmanıza olanak tanıyan bir formattır. İçerik yazımı için Markdown'ın sadeliğini React bileşenlerinin gücüyle birleştirir; bu sayede Next.js, Gatsby ve Docusaurus gibi framework'lerle oluşturulan dokümantasyon siteleri, bloglar ve içerik ağırlıklı uygulamalar için popüler bir tercih haline gelmiştir. Bir MDX dosyası; standart Markdown sözdiziminin yanı sıra import ifadelerini, dışa aktarılan değişkenleri ve satır içi JSX bileşenlerini tek bir dosyada barındırabilir.

Düz Markdown'ın aksine MDX, JavaScript'e derlenir; bu da JSX veya import ifadelerindeki sözdizimi hatalarının tüm belgeyi bozabileceği anlamına gelir. Bu durum, MDX içeriğiyle çalışırken doğrulama ve doğru biçimlendirmeyi özellikle önemli kılar.

Araç Açıklaması

MDX Editörü, MDX içeriği yazmak, doğrulamak ve biçimlendirmek için tarayıcı tabanlı bir ortam sunar. Hem Markdown hem de JSX için sözdizimi vurgulama, MDX'inizi derleme hataları açısından kontrol eden yerleşik bir doğrulayıcı ve tutarlı, okunabilir belgeler için boşlukları ve yapıyı düzenleyen bir biçimlendirici içerir.

Örnekler

Biçimlendirmeden önce:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

Biçimlendirmeden sonra:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Özellikler

  • Tek bir editörde Markdown ve JSX için sözdizimi vurgulama
  • Derleme hatalarını gerçek zamanlı olarak kontrol eden MDX doğrulama
  • Boş satırları ve boşlukları normalleştiren otomatik biçimlendirme
  • Editörü hızlıca sıfırlamak için temizle düğmesi
  • Biçimlendirilmiş içeriğinizi kolayca dışa aktarmak için kopyalama desteği

Nasıl Çalışır

  • Doğrula: MDX içeriğinizi @mdx-js/mdx derleyicisini kullanarak derler. Belgede sözdizimi hataları varsa — hatalı biçimlendirilmiş JSX, kapatılmamış etiketler veya geçersiz import'lar gibi — doğrulayıcı hata mesajını görüntüler ve düzeltmenizi sağlar.
  • Biçimlendir: Birden fazla ardışık boş satırı tek satıra indirerek, başlıkların önünde ve import/export bloklarının çevresinde boş satır bulunmasını sağlayarak ve sondaki boşlukları kırparak boşlukları normalleştirir. Sonuç, temiz ve tutarlı biçimde yapılandırılmış bir belgedir.

Kullanım Senaryoları

  • İçerik sayfaları için MDX kullanan React tabanlı projelere yönelik dokümantasyon yazma
  • Statik bir site yayınlamadan önce MDX derleme hatalarını ayıklama
  • Birden fazla yazar tarafından katkıda bulunulan, tutarsız boşluklara sahip MDX dosyalarını düzenleme