Eine Einführung in MDXJS

Markdown war traditionell ein beliebtes Format für Programmierer, um Dokumentationen zu schreiben. Es ist einfach genug, dass fast jeder es lernen und anwenden kann, und es erleichtert das Formatieren und Gestalten von Inhalten. Es war so beliebt, dass Befehle aus Markdown in Chat-Anwendungen wie Slack und Whatsapp als Dokumentationsanwendungen verwendet wurden, wie Dropbox Paper und Notion. Als GitHub Markdown-Unterstützung für README-Dokumentationen einführte, renderten sie auch HTML-Inhalte daraus – so konnten wir zum Beispiel einige Link- und Bildelemente einfügen und sie würden einwandfrei gerendert.

Auch wenn Markdown weit davon entfernt ist, kaputt zu sein, gibt es immer Raum für Verbesserungen. Hier kommt Markdown Extended (MDX) ins Spiel.

Wann würden wir MDX gegenüber Markdown in Betracht ziehen? Ein Punkt bei MDX ist, dass JavaScript in Fällen integriert werden kann, in denen normales Markdown verwendet wird. Hier sind einige Beispiele, die veranschaulichen, wie praktisch das ist.

• Frontend Armory nutzt MDX in seinem Bildungs-Spielplatz, Demoboard. Der Spielplatz unterstützt MDX nativ, um Seiten zu erstellen, die sowohl als Demo als auch als Dokumentation dienen, was ideal ist, um React-Konzepte und Komponenten zu demonstrieren.
• Brent Jackson hat eine brandneue Methode, um Websites zu bauen, indem er MDX und Styled System kombiniert. Jede Seite wird in MDX geschrieben und Styled System stylt die Blöcke. Es befindet sich derzeit in der Entwicklung, aber Sie können weitere Details auf der Website finden.
• Mit mdx-deck oder Spectacle können Sie Ihre nächste Präsentation interessanter gestalten. Sie können Demos direkt in Ihrem Deck anzeigen, ohne den Bildschirm wechseln zu müssen!
• MDX Go, ok-mdx und Docz bieten Tools zur Dokumentation von Komponentenbibliotheken in MDX. Sie können Komponenten direkt in die Dokumentation mit Markdown einfügen, und es funktioniert einfach™.
• Einige Websites, darunter Zeit Now und Prisma docs, verwenden MDX, um Inhalte zu schreiben.

MDX glänzt in Fällen, in denen Sie einen React-basierten Blog pflegen möchten. Die Verwendung bedeutet, dass Sie keine benutzerdefinierten React-Komponenten-Seiten mehr erstellen müssen, wenn Sie etwas tun möchten, das in Markdown unmöglich ist (oder ein Plugin erstellen). Ich verwende es auf meinem Blog seit über einem Jahr und liebe die Erfahrung. Eines meiner Lieblingsprojekte bisher ist eine React-Komponente, die ich Playground nenne, die verwendet werden kann, um kleine HTML/CSS/JavaScript-Schnipsel zu demen, während Benutzern erlaubt wird, den Code zu bearbeiten. Sicher, ich hätte einen Drittanbieterdienst nutzen und Demos damit einbetten können, aber auf diese Weise muss ich überhaupt keine Drittanbieter-Skripte laden.

Apropos Einbetten, MDX macht es *so* einfach, iFrames von Drittanbieterdiensten einzubetten, wie z.B. YouTube, Vimeo, Giphy usw.

Verwenden Sie es neben Markdown

Sie wissen, dass eine Datei in MDX geschrieben ist, weil sie eine .mdx Erweiterung im Dateinamen hat. Aber schauen wir uns an, wie es aussieht, wenn man tatsächlich etwas in MDX schreibt.

import InteractiveChart from "../path/interactive-chart";


# Hello - I'm a Markdown heading


This is just markdown text


<InteractiveChart />

Sehen Sie das? Es ist immer noch möglich, Markdown zu verwenden, und wir können es neben React-Komponenten schreiben, wenn wir interaktive Visualisierungen oder Styling wünschen. Hier ist ein Beispiel aus meinem Portfolio.

Ein weiterer Vorteil von MDX ist, dass die Dateien, ähnlich wie Komponenten, komponierbar sind. Das bedeutet, dass Seiten in mehrere Teile aufgeteilt und wiederverwendet werden können, wobei sie alle auf einmal gerendert werden.

import Header from "./path/Header.mdx"
import Footer from "./path/Footer.mdx"

<Header />

# Here goes the actual content.

Some random content goes [here](link text)

<Footer />

MDX in Apps implementieren

Es gibt MDX-Plugins für die meisten gängigen React-basierten Integrationsplattformen, wie Gatsby und Next. 

Um es in ein create-react-app Projekt zu integrieren, bietet MDX ein Babel Macro, das in die App importiert werden kann.

import { importMDX } from './mdx.macro'
 
const MyDocument = React.lazy(() => importMDX('./my-document.mdx'))
 
ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <MyDocument />
  </React.Suspense>,
  document.getElementById('root')
);

Sie können MDX auch im Playground ausprobieren, den sie dafür erstellt haben.

MDX-Mitwirkende arbeiten sehr aktiv daran, Unterstützung für Vue zu bringen. Ein Beispiel ist bereits auf GitHub verfügbar. Dies ist jedoch in der Alpha-Phase und noch nicht für die Produktion bereit.

Editor-Unterstützung

Syntaxhervorhebung und Autovervollständigung haben beide die Unterstützung für VS Code, Vim und Sublime Text erhöht. Allerdings haben diese in der Praxis einige scharfe Kanten und sind schwer zu navigieren. Vieles davon rührt aus der Unfähigkeit her, vorherzusagen, ob wir uns im Kontext einer Seite für JavaScript oder Markdown entscheiden. Das ist etwas, das sicherlich verbessert werden kann.

MDX-Plugins und Erweiterungen

Ein wichtiger Vorteil von MDX ist, dass es Teil des unified Konsortiums für Inhalte ist, das remark Inhalte organisiert. Das bedeutet, dass MDX das riesige Ökosystem von remark-Plugins und rehype-Plugins direkt unterstützen kann – es ist nicht nötig, das Rad neu zu erfinden. Einige dieser Plugins, darunter remark-images und remark-redact, sind, gelinde gesagt, *bemerkenswert*. Um ein Plugin mit MDX zu verwenden, können Sie es zu Ihrem entsprechenden Loader oder Plugin hinzufügen. Sie können sogar Ihre eigenen MDX-Plugins schreiben, indem Sie sich auf den MDX-Leitfaden zum Erstellen von Plugins beziehen.

---

MDX ist erst ein paar Jahre alt, aber sein Einfluss im Content-Bereich wächst. Vom Schreiben von Blogbeiträgen und der Visualisierung von Daten bis hin zur Erstellung interaktiver Demos und Decks ist MDX für viele Anwendungen gut geeignet – weit über das hinaus, was wir hier in dieser Einführung behandelt haben.