Τι είναι το MDX;

Το MDX είναι μια μορφή που σας επιτρέπει να γράφετε JSX απευθείας μέσα σε έγγραφα Markdown. Συνδυάζει την απλότητα του Markdown για τη σύνταξη περιεχομένου με τη δύναμη των React components, καθιστώντας το δημοφιλές για ιστότοπους τεκμηρίωσης, blogs και εφαρμογές με πλούσιο περιεχόμενο που δημιουργούνται με frameworks όπως το Next.js, το Gatsby και το Docusaurus. Ένα αρχείο MDX μπορεί να περιέχει τυπική σύνταξη Markdown παράλληλα με εντολές import, εξαγόμενες μεταβλητές και inline JSX components — όλα σε ένα μόνο αρχείο.

Σε αντίθεση με το απλό Markdown, το MDX μεταγλωττίζεται σε JavaScript, πράγμα που σημαίνει ότι τα σφάλματα σύνταξης στο JSX ή στις εντολές import μπορούν να καταστρέψουν ολόκληρο το έγγραφο. Αυτό καθιστά την επικύρωση και τη σωστή μορφοποίηση ιδιαίτερα σημαντικές κατά την εργασία με περιεχόμενο MDX.

Περιγραφή εργαλείου

Ο Επεξεργαστής MDX παρέχει ένα περιβάλλον που λειτουργεί στον browser για τη σύνταξη, επικύρωση και μορφοποίηση περιεχομένου MDX. Διαθέτει επισήμανση σύνταξης τόσο για Markdown όσο και για JSX, έναν ενσωματωμένο validator που ελέγχει το MDX σας για σφάλματα μεταγλώττισης, καθώς και έναν formatter που τακτοποιεί τα κενά και τη δομή για συνεπή και ευανάγνωστα έγγραφα.

Παραδείγματα

Πριν τη μορφοποίηση:

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


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

Μετά τη μορφοποίηση:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Χαρακτηριστικά

  • Επισήμανση σύνταξης για Markdown και JSX σε έναν ενιαίο επεξεργαστή
  • Επικύρωση MDX που ελέγχει για σφάλματα μεταγλώττισης σε πραγματικό χρόνο
  • Αυτόματη μορφοποίηση που ομαλοποιεί τις κενές γραμμές και τα κενά
  • Κουμπί εκκαθάρισης για γρήγορη επαναφορά του επεξεργαστή
  • Υποστήριξη αντιγραφής για εύκολη εξαγωγή του μορφοποιημένου περιεχομένου σας

Πώς λειτουργεί

  • Επικύρωση: Μεταγλωττίζει το περιεχόμενο MDX σας χρησιμοποιώντας τον compiler @mdx-js/mdx. Εάν το έγγραφο περιέχει σφάλματα σύνταξης — όπως κακοσχηματισμένο JSX, μη κλειστά tags ή μη έγκυρες εντολές import — ο validator εμφανίζει το μήνυμα σφάλματος ώστε να μπορέσετε να το διορθώσετε.
  • Μορφοποίηση: Ομαλοποιεί τα κενά συμπτύσσοντας πολλαπλές διαδοχικές κενές γραμμές σε μία, διασφαλίζοντας κενές γραμμές πριν από τις επικεφαλίδες και γύρω από τα blocks import/export, και αφαιρώντας τα κενά στο τέλος των γραμμών. Το αποτέλεσμα είναι ένα καθαρό, συνεπώς δομημένο έγγραφο.

Περιπτώσεις χρήσης

  • Σύνταξη τεκμηρίωσης για έργα βασισμένα σε React που χρησιμοποιούν MDX για σελίδες περιεχομένου
  • Εντοπισμός σφαλμάτων μεταγλώττισης MDX πριν από την ανάπτυξη ενός στατικού ιστότοπου
  • Τακτοποίηση αρχείων MDX με ασυνεπή κενά που προέρχονται από πολλούς συντάκτες