Cos'è MDX?

MDX è un formato che consente di scrivere JSX direttamente all'interno di documenti Markdown. Combina la semplicità di Markdown per la creazione di contenuti con la potenza dei componenti React, rendendolo popolare per siti di documentazione, blog e applicazioni ricche di contenuti sviluppate con framework come Next.js, Gatsby e Docusaurus. Un file MDX può contenere sintassi Markdown standard insieme a istruzioni di importazione, variabili esportate e componenti JSX inline — il tutto in un unico file.

A differenza del semplice Markdown, MDX viene compilato in JavaScript, il che significa che errori di sintassi nel JSX o nelle istruzioni di importazione possono compromettere l'intero documento. Ciò rende la validazione e la formattazione corretta particolarmente importanti quando si lavora con contenuti MDX.

Descrizione dello strumento

L'editor MDX fornisce un ambiente basato su browser per scrivere, validare e formattare contenuti MDX. Include l'evidenziazione della sintassi sia per Markdown che per JSX, un validatore integrato che controlla gli errori di compilazione nel tuo MDX e un formattatore che riorganizza spaziatura e struttura per ottenere documenti coerenti e leggibili.

Esempi

Prima della formattazione:

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


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

Dopo la formattazione:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Funzionalità

  • Evidenziazione della sintassi per Markdown e JSX in un unico editor
  • Validazione MDX che controlla gli errori di compilazione in tempo reale
  • Formattazione automatica che normalizza le righe vuote e la spaziatura
  • Pulsante di cancellazione per reimpostare rapidamente l'editor
  • Supporto alla copia per un facile esport del contenuto formattato

Come funziona

  • Valida: Compila il contenuto MDX utilizzando il compilatore @mdx-js/mdx. Se il documento contiene errori di sintassi — come JSX malformato, tag non chiusi o importazioni non valide — il validatore mostra il messaggio di errore in modo da poterlo correggere.
  • Formatta: Normalizza gli spazi bianchi comprimendo più righe vuote consecutive in una sola, garantendo righe vuote prima delle intestazioni e attorno ai blocchi di importazione/esportazione, e rimuovendo gli spazi finali. Il risultato è un documento pulito e strutturato in modo coerente.

Casi d'uso

  • Scrittura di documentazione per progetti basati su React che utilizzano MDX per le pagine di contenuto
  • Debug degli errori di compilazione MDX prima del deploy di un sito statico
  • Pulizia di file MDX con spaziatura non uniforme apportata da più autori