Hva er MDX?

MDX er et format som lar deg skrive JSX direkte inne i Markdown-dokumenter. Det kombinerer enkelheten til Markdown for innholdsproduksjon med kraften til React-komponenter, noe som gjør det populært for dokumentasjonssider, blogger og innholdstunge applikasjoner bygget med rammeverk som Next.js, Gatsby og Docusaurus. En MDX-fil kan inneholde standard Markdown-syntaks sammen med import-setninger, eksporterte variabler og inline JSX-komponenter – alt i én enkelt fil.

I motsetning til vanlig Markdown kompileres MDX til JavaScript, noe som betyr at syntaksfeil i JSX eller import-setninger kan ødelegge hele dokumentet. Dette gjør validering og korrekt formatering spesielt viktig når man arbeider med MDX-innhold.

Verktøybeskrivelse

MDX-editoren tilbyr et nettleserbasert miljø for å skrive, validere og formatere MDX-innhold. Den har syntaksuthevning for både Markdown og JSX, en innebygd validator som sjekker MDX-en din for kompileringsfeil, og en formaterer som rydder opp i mellomrom og struktur for konsistente, lesbare dokumenter.

Eksempler

Før formatering:

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


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

Etter formatering:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funksjoner

  • Syntaksuthevning for Markdown og JSX i én enkelt editor
  • MDX-validering som sjekker for kompileringsfeil i sanntid
  • Automatisk formatering som normaliserer tomme linjer og mellomrom
  • Tøm-knapp for raskt å nullstille editoren
  • Kopieringsstøtte for enkel eksport av det formaterte innholdet ditt

Slik fungerer det

  • Valider: Kompilerer MDX-innholdet ditt ved hjelp av @mdx-js/mdx-kompilatoren. Hvis dokumentet inneholder syntaksfeil – som feilformatert JSX, ulukkede tagger eller ugyldige imports – viser validatoren feilmeldingen slik at du kan rette den.
  • Formater: Normaliserer mellomrom ved å slå sammen flere påfølgende tomme linjer til én, sikrer tomme linjer før overskrifter og rundt import/export-blokker, og fjerner etterfølgende mellomrom. Resultatet er et rent, konsistent strukturert dokument.

Bruksområder

  • Skrive dokumentasjon for React-baserte prosjekter som bruker MDX for innholdssider
  • Feilsøke MDX-kompileringsfeil før man publiserer et statisk nettsted
  • Rydde opp i MDX-filer med inkonsekvent mellomrom bidratt av flere forfattere