محرر MDX

ما هو MDX؟

MDX هو تنسيق يتيح لك كتابة JSX مباشرةً داخل مستندات Markdown. يجمع بين بساطة Markdown في تأليف المحتوى وقوة مكونات React، مما يجعله شائعاً لمواقع التوثيق والمدونات والتطبيقات الغنية بالمحتوى المبنية باستخدام أطر عمل مثل Next.js وGatsby وDocusaurus. يمكن أن يحتوي ملف MDX على صيغة Markdown القياسية إلى جانب عبارات الاستيراد والمتغيرات المُصدَّرة ومكونات JSX المضمّنة — كل ذلك في ملف واحد.

على عكس Markdown العادي، يُترجَم MDX إلى JavaScript، مما يعني أن أخطاء الصياغة في JSX أو عبارات الاستيراد قد تُعطّل المستند بأكمله. وهذا يجعل التحقق من الصحة والتنسيق الصحيح أمراً بالغ الأهمية عند العمل مع محتوى MDX.

وصف الأداة

يوفر محرر MDX بيئة تعمل في المتصفح لكتابة محتوى MDX والتحقق من صحته وتنسيقه. يتميز بتمييز الصياغة لكل من Markdown وJSX، ومدقق مدمج يفحص ملف MDX بحثاً عن أخطاء التجميع، ومنسّق يُرتّب المسافات والبنية للحصول على مستندات متسقة وسهلة القراءة.

أمثلة

قبل التنسيق:

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 باستخدام مُجمّع @mdx-js/mdx. إذا كان المستند يحتوي على أخطاء في الصياغة — مثل JSX مشوّه أو وسوم غير مغلقة أو استيرادات غير صالحة — يعرض المدقق رسالة الخطأ حتى تتمكن من إصلاحها.
• التنسيق: يُوحّد المسافات البيضاء بدمج الأسطر الفارغة المتتالية المتعددة في سطر واحد، مع ضمان وجود أسطر فارغة قبل العناوين وحول كتل الاستيراد والتصدير، وحذف المسافات الزائدة في نهاية الأسطر. والنتيجة مستند نظيف ذو بنية متسقة.

حالات الاستخدام

• كتابة التوثيق لمشاريع React التي تستخدم MDX لصفحات المحتوى
• تصحيح أخطاء تجميع MDX قبل نشر موقع ثابت
• تنظيف ملفات MDX ذات المسافات غير المتسقة التي يساهم فيها عدة مؤلفين