Vad är MDX?

MDX är ett format som låter dig skriva JSX direkt i Markdown-dokument. Det kombinerar enkelheten i Markdown för innehållsskapande med kraften hos React-komponenter, vilket gör det populärt för dokumentationssajter, bloggar och innehållstunga applikationer byggda med ramverk som Next.js, Gatsby och Docusaurus. En MDX-fil kan innehålla standard Markdown-syntax tillsammans med import-satser, exporterade variabler och inline JSX-komponenter — allt i en enda fil.

Till skillnad från vanlig Markdown kompileras MDX till JavaScript, vilket innebär att syntaxfel i din JSX eller dina import-satser kan bryta hela dokumentet. Detta gör validering och korrekt formatering särskilt viktigt när man arbetar med MDX-innehåll.

Verktygsbeskrivning

MDX-editorn tillhandahåller en webbläsarbaserad miljö för att skriva, validera och formatera MDX-innehåll. Den erbjuder syntaxmarkering för både Markdown och JSX, en inbyggd validator som kontrollerar din MDX för kompileringsfel, samt en formaterare som städar upp mellanrum och struktur för konsekventa, lättlästa dokument.

Exempel

Före formatering:

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


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

Efter formatering:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funktioner

  • Syntaxmarkering för Markdown och JSX i en och samma editor
  • MDX-validering som kontrollerar kompileringsfel i realtid
  • Automatisk formatering som normaliserar tomma rader och mellanrum
  • Rensa-knapp för att snabbt återställa editorn
  • Kopieringsstöd för enkel export av ditt formaterade innehåll

Så här fungerar det

  • Validera: Kompilerar ditt MDX-innehåll med hjälp av @mdx-js/mdx-kompilatorn. Om dokumentet innehåller syntaxfel — såsom felaktig JSX, oavslutade taggar eller ogiltiga importer — visar validatorn felmeddelandet så att du kan åtgärda det.
  • Formatera: Normaliserar blanksteg genom att komprimera flera på varandra följande tomma rader till en, säkerställer tomma rader före rubriker och runt import/export-block, samt tar bort avslutande blanksteg. Resultatet är ett rent, konsekvent strukturerat dokument.

Användningsområden

  • Skriva dokumentation för React-baserade projekt som använder MDX för innehållssidor
  • Felsöka MDX-kompileringsfel innan en statisk sajt driftsätts
  • Städa upp MDX-filer med inkonsekvent mellanrum bidragit av flera författare