Mis on MDX?

MDX on formaat, mis võimaldab kirjutada JSX-i otse Markdowni dokumentide sees. See ühendab Markdowni lihtsuse sisuloomeks React-komponentide võimsusega, muutes selle populaarseks dokumentatsioonisaitide, blogide ja sisumahukate rakenduste jaoks, mis on ehitatud selliste raamistike nagu Next.js, Gatsby ja Docusaurus abil. MDX-fail võib sisaldada standardset Markdowni süntaksit koos import-lausete, eksporditud muutujate ja inline JSX-komponentidega — kõik ühes failis.

Erinevalt tavalisest Markdownist kompileeritakse MDX JavaScriptiks, mis tähendab, et süntaksivead teie JSX-is või import-lausetes võivad kogu dokumendi katki teha. See muudab valideerimise ja korrektse vormindamise eriti oluliseks MDX-sisuga töötamisel.

Tööriista kirjeldus

MDX Editor pakub brauseripõhist keskkonda MDX-sisu kirjutamiseks, valideerimiseks ja vormindamiseks. See sisaldab süntaksi esiletõstmist nii Markdowni kui ka JSX-i jaoks, sisseehitatud validaatorit, mis kontrollib teie MDX-i kompileerimisvigade suhtes, ning vormindajat, mis korrastab tühikuid ja struktuuri ühtlaste, loetavate dokumentide jaoks.

Näited

Enne vormindamist:

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


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

Pärast vormindamist:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funktsioonid

  • Süntaksi esiletõstmine Markdowni ja JSX-i jaoks ühes redaktoris
  • MDX valideerimine, mis kontrollib kompileerimisvigade olemasolu reaalajas
  • Automaatne vormindamine, mis normaliseerib tühje ridu ja tühikuid
  • Tühjendamisnupp redaktori kiireks lähtestamiseks
  • Kopeerimise tugi vormindatud sisu lihtsaks ekspordiks

Kuidas see töötab

  • Valideeri: Kompileerib teie MDX-sisu kasutades @mdx-js/mdx kompilaatorit. Kui dokument sisaldab süntaksivigu — näiteks vigane JSX, sulgemata sildid või kehtetud import-laused — kuvab validaator veateate, et saaksite selle parandada.
  • Vorminda: Normaliseerib tühikuid, ahendades mitu järjestikust tühja rida üheks, tagades tühjad read pealkirjade ees ning import/export-plokkide ümber, ja eemaldades lõpus olevad tühikud. Tulemuseks on puhas, ühtlaselt struktureeritud dokument.

Kasutusjuhud

  • Dokumentatsiooni kirjutamine React-põhistele projektidele, mis kasutavad MDX-i sisulehtede jaoks
  • MDX kompileerimisvigade silumine enne staatilise saidi juurutamist
  • MDX-failide korrastamine ebaühtlaste tühikutega, mille on lisanud mitu autorit