Mikä on MDX?

MDX on formaatti, jonka avulla voit kirjoittaa JSX:ää suoraan Markdown-dokumenttien sisään. Se yhdistää Markdownin yksinkertaisuuden sisällöntuotannossa React-komponenttien tehoon, mikä tekee siitä suositun dokumentaatiosivustoilla, blogeissa ja sisältöpainotteisissa sovelluksissa, jotka on rakennettu Next.js:n, Gatsbyn ja Docusauruksen kaltaisilla kehyksillä. MDX-tiedosto voi sisältää tavallista Markdown-syntaksia import-lauseiden, vietyjen muuttujien ja inline-JSX-komponenttien rinnalla — kaikki yhdessä tiedostossa.

Toisin kuin tavallinen Markdown, MDX käännetään JavaScriptiksi, mikä tarkoittaa, että syntaksivirheet JSX:ssä tai import-lauseissa voivat rikkoa koko dokumentin. Tämä tekee validoinnista ja oikeasta muotoilusta erityisen tärkeää MDX-sisällön kanssa työskennellessä.

Työkalun kuvaus

MDX-editori tarjoaa selainpohjaisen ympäristön MDX-sisällön kirjoittamiseen, validointiin ja muotoiluun. Se sisältää syntaksikorostuksen sekä Markdownille että JSX:lle, sisäänrakennetun validaattorin, joka tarkistaa MDX:n käännösvirheitä varten, sekä muotoilijan, joka siistii välistyksen ja rakenteen yhtenäisten ja luettavien dokumenttien aikaansaamiseksi.

Esimerkit

Ennen muotoilua:

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


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

Muotoilun jälkeen:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Ominaisuudet

  • Syntaksikorostus Markdownille ja JSX:lle yhdessä editorissa
  • MDX-validointi, joka tarkistaa käännösvirheet reaaliajassa
  • Automaattinen muotoilu, joka normalisoi tyhjät rivit ja välistyksen
  • Tyhjennä-painike editorin nopeaan nollaamiseen
  • Kopiointituki muotoillun sisällön helppoa vientiä varten

Kuinka se toimii

  • Validoi: Kääntää MDX-sisältösi @mdx-js/mdx-kääntäjällä. Jos dokumentti sisältää syntaksivirheitä — kuten virheellistä JSX:ää, sulkemattomia tageja tai virheellisiä importeja — validaattori näyttää virheviestin, jotta voit korjata sen.
  • Muotoile: Normalisoi välilyönnit tiivistämällä useammat peräkkäiset tyhjät rivit yhdeksi, varmistaa tyhjät rivit otsikoiden edessä sekä import/export-lohkojen ympärillä ja poistaa loppuvälilyönnit. Tuloksena on siisti, johdonmukaisesti jäsennelty dokumentti.

Käyttötapaukset

  • Dokumentaation kirjoittaminen React-pohjaisille projekteille, jotka käyttävät MDX:ää sisältösivuilla
  • MDX-käännösvirheiden debuggaus ennen staattisen sivuston julkaisemista
  • MDX-tiedostojen siistiminen, joissa on epäyhtenäinen välistys useiden tekijöiden panoksesta johtuen