MDX

Introducció#

MDX et permet utilitzar TSX en el teu contingut Markdown.

Pots importar components, com gràfics interactius o alertes, i incrustar-los dins del teu contingut. Això fa que escriure contingut de format llarg amb components sigui fantàstic. 🚀

De manera més pràctica, MDX es pot explicar com un format que combina markdown amb TSX i es veu així:

# Hello, world!

<div className="note">
  > Some notable things in a block quote!
</div>

El títol i la cita són markdown, mentre que aquestes etiquetes similars a HTML són TSX. El markdown sovint se sent més natural d’escriure que HTML o TSX per a coses comunes com èmfasi o títols. TSX és una extensió de TypeScript que sembla HTML, però fa que sigui convenient utilitzar components (coses reutilitzables).

Aquest exemple utilitza className en el <div>. Això és perquè va ser escrit per a React i React espera les classes d’aquesta manera.

Algunes altres característiques de TypeScript també són compatibles amb MDX: expressions entre claus ({1 + 1}) i ESM (import i export).

Sinatxi#

La sintaxi MDX combina markdown amb TSX. Això ens dona quelcom similar a la programació literal. També ens dona una barreja peculiar de dos llenguatges: markdown és sensible als espais en blanc i tolerant (el que escrius pot no funcionar exactament però no fallarà) mentre que TypeScript és insensible als espais en blanc i intolerant (falla amb errors de sintaxi).

Markdown#

El markdown sovint se sent més natural d’escriure que HTML o TSX per a coses comunes com èmfasi o títols. Markdown típicament sembla més el que es pretén i és més concís. En lloc del següent HTML:

<blockquote>
  <p>A blockquote with <em>some</em> emphasis.</p>
</blockquote>

Pots escriure l’equivalent en markdown (o MDX) així:

> A blockquote with *some* emphasis.

MDX suporta markdown estàndard per defecte (CommonMark):

# Heading (rank 1)
## Heading 2
### 3
#### 4
##### 5
###### 6

> Block quote

* Unordered
* List

1. Ordered
2. List

A paragraph, introducing a thematic break:

---

a [link](https://example.com), an ![image](./image.png), some *emphasis*,
something **strong**, and finally a little `code()`.