Was ist MDX?

MDX ist ein Format, das es ermöglicht, JSX direkt in Markdown-Dokumenten zu schreiben. Es kombiniert die Einfachheit von Markdown für die Inhaltserstellung mit der Leistungsfähigkeit von React-Komponenten und ist daher beliebt für Dokumentationsseiten, Blogs und inhaltsreiche Anwendungen, die mit Frameworks wie Next.js, Gatsby und Docusaurus erstellt werden. Eine MDX-Datei kann Standard-Markdown-Syntax zusammen mit Import-Anweisungen, exportierten Variablen und inline JSX-Komponenten enthalten – alles in einer einzigen Datei.

Im Gegensatz zu einfachem Markdown wird MDX zu JavaScript kompiliert, was bedeutet, dass Syntaxfehler in Ihrem JSX oder in Import-Anweisungen das gesamte Dokument beschädigen können. Dies macht die Validierung und korrekte Formatierung besonders wichtig bei der Arbeit mit MDX-Inhalten.

Beschreibung des Tools

Der MDX-Editor bietet eine browserbasierte Umgebung zum Schreiben, Validieren und Formatieren von MDX-Inhalten. Er verfügt über Syntax-Highlighting für Markdown und JSX, einen integrierten Validator, der Ihren MDX auf Kompilierungsfehler prüft, sowie einen Formatter, der Abstände und Struktur für konsistente, lesbare Dokumente bereinigt.

Beispiele

Vor der Formatierung:

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


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

Nach der Formatierung:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funktionen

  • Syntax-Highlighting für Markdown und JSX in einem einzigen Editor
  • MDX-Validierung, die in Echtzeit auf Kompilierungsfehler prüft
  • Automatische Formatierung, die Leerzeilen und Abstände normalisiert
  • Schaltfläche zum Zurücksetzen, um den Editor schnell zu leeren
  • Kopierfunktion für den einfachen Export Ihrer formatierten Inhalte

So funktioniert es

  • Validieren: Kompiliert Ihren MDX-Inhalt mithilfe des @mdx-js/mdx-Compilers. Wenn das Dokument Syntaxfehler enthält – wie fehlerhaftes JSX, nicht geschlossene Tags oder ungültige Imports – zeigt der Validator die Fehlermeldung an, damit Sie diese beheben können.
  • Formatieren: Normalisiert Leerzeichen, indem mehrere aufeinanderfolgende Leerzeilen zu einer zusammengefasst werden, Leerzeilen vor Überschriften und um Import-/Export-Blöcke sichergestellt werden und abschließende Leerzeichen entfernt werden. Das Ergebnis ist ein sauberes, einheitlich strukturiertes Dokument.

Anwendungsfälle

  • Verfassen von Dokumentationen für React-basierte Projekte, die MDX für Inhaltsseiten verwenden
  • Debuggen von MDX-Kompilierungsfehlern vor der Bereitstellung einer statischen Website
  • Bereinigen von MDX-Dateien mit inkonsistenten Abständen, die von mehreren Autoren beigetragen wurden