تخطي إلى المحتوى الرئيسي
معاينة Markdown

معاينة Markdown مباشرة

معاينة حية لـ Markdown مع دعم التنسيق الغني والجداول والصور والروابط. مفيد لكتابة التوثيق والمدونات بتنسيق Markdown. يوفر معاينة فورية مع نسخ HTML.

أدوات Markdown

باختصار

يستخدم المحرر Marked وDOMPurify محليًا؛ لا تصل السكربتات والنماذج والأنماط والصور وSVG والتضمينات والروابط غير الآمنة إلى المقال المعروض.

ما الذي تدعمه الأداة

  • محرر CodeMirror لـMarkdown مع إعادة عينة واستيراد نص محلي بجانب معاينة مقال.
  • يفعّل Marked وضع GFM ويعطّل breaks؛ تُفهم الجداول وقوائم المهام، أما السطر المفرد فيبقى soft break.
  • تزيل DOMPurify الوسوم النشطة والصور والـstyle/srcset وdata attributes ومخططات URI غير المسموحة.
  • يمكن إيقاف Live وإعادته بزر Render Preview، ويعرض عدد أسطر المصدر وينسخ HTML المنقّى لا Markdown.

كيفية استخدام معاينة Markdown مباشرة

اتبع سير العمل الخاص بتنفيذ معاينة Markdown مباشرة؛ فكل خطوة تعكس عناصر التحكم والحدود الفعلية في مساحة عمل المتصفح.

  1. 1

    الخطوة 1

    أدخل المصدر بدقة

    اكتب Markdown في المحرر الأيسر أو استورد نصًا أو حمّل العينة.

  2. 2

    الخطوة 2

    اختر العملية

    اترك Live لرد فوري، أو عطّله عندما لا تريد إعادة تحليل كل ضغطة أثناء تعديل كبير.

  3. 3

    الخطوة 3

    اضبط الخيارات المتاحة

    اضغط Render Preview لإعادة العرض المنقّى بعد تعطيل Live.

  4. 4

    الخطوة 4

    نفّذ العملية محليًا

    قارن تسلسل العناوين والقوائم والاقتباسات والكود والجداول والروابط، ولاحظ المحتوى الخام المحذوف.

  5. 5

    الخطوة 5

    تحقق من النتيجة ثم تابع

    انسخ HTML بعد المراجعة فقط واختبره تحت قواعد Markdown وCSS والأمان في الوجهة.

الأخطاء الشائعة

اعتبار سطر جديد منفرد فاصلًا صلبًا

النتيجة: يضبط المحلل breaks:false، فيتعامل معه كفاصل مرن ما لم تستخدم صيغة Markdown صريحة.

الإصلاح: استخدم سطرًا فارغًا للفقرة أو صيغة hard break في CommonMark.

إضافة صورة ثم اعتبار اختفائها عطلًا

النتيجة: تحظر سياسة الأمان img والعناصر الشبكية أو النشطة عمدًا.

الإصلاح: استخدم المعاينة للنص، وأضف الأصل المعتمد لاحقًا تحت سياسة الوجهة.

نسخ HTML قبل إعادة تفعيل عرض موقوف

النتيجة: عندما يكون Live معطلًا يصبح htmlOutput فارغًا حتى يعيد Render Preview العرض.

الإصلاح: اعرض المصدر الحالي وراجعه ثم انسخه.

أفضل الممارسات

  • حافظ على تسلسل منطقي للعناوين وافحصه بصريًا قبل النشر.
  • أضف اسم اللغة إلى code fences للأنظمة اللاحقة مع العلم أن هذه المعاينة لا تلوّن الصيغة.
  • احتفظ بـMarkdown في التحكم بالإصدارات وتعامل مع HTML كأثر مولد قابل لإعادة التنقية.

سير العمل المرتبط

قيود المتصفح

  • لا تخزين تعاوني أو ملف autosave أو عارض مخصص أو تلوين كود أو PDF أو صور شبكة.
  • قد يختلف Marked GFM عن GitHub أو CMS أو CommonMark الصارم عند الامتدادات وHTML الخام.
  • تُحلل المستندات الطويلة وتُنقّى على main thread عند كل تحديث حي وقد تؤخر الكتابة.

المراجع الموثوقة

CommonMark Specification 0.31.2الناشر: CommonMark · تاريخ المراجعة: 2026-07-26Marked documentation and security guidanceالناشر: Marked project · تاريخ المراجعة: 2026-07-26DOMPurify security documentationالناشر: Cure53 · تاريخ المراجعة: 2026-07-26

أمثلة عملية

الإدخال
## الحالة\n\n- [x] تم التحليل\n- [ ] تم النشر
النتيجة
تظهر H2 ومهمتان؛ ينسخ الزر HTML المنقّى الذي أنتجته نسخة Marked المثبتة.

يفعّل GFM قوائم المهام؛ تسمح DOMPurify بعناصر checkbox غير التفاعلية المولدة وتحذف المحتوى النشط الممنوع.

الأسئلة الشائعة

هل تنفذ المعاينة HTML أو JavaScript المكتوب في Markdown؟

لا. يُنقّى HTML الخام وتحظر script وstyle وform وiframe وSVG وembed وغيرها.

لماذا يعمل جدول هنا ولا يعمل في عارض آخر؟

لأن GFM مفعّل؛ قد يعرض CommonMark الصارم بلا امتداد الجداول نتيجة مختلفة.

ماذا ينسخ زر Copy تحديدًا؟

HTML المنقّى المعروض حاليًا، لا Markdown الأصلي ولا CSS المرئي للتطبيق.

هل يمكن معاينة صور بعيدة؟

لا. تحظر السياسة img كي لا تصدر طلبات أو referrer أو بيانات شبكة.

كيف أوقف إعادة عرض مستند طويل أثناء الكتابة؟

عطّل Live أثناء التعديل ثم اضغط Render Preview مرة واحدة عند الجاهزية.

الخصوصية والعمل دون اتصال

يبقى المسودّة وHTML الناتج في المتصفح ولا يُرسلان لخادم التطبيق. لا يحدث استيراد الملف أو النسخ إلا بأفعالك، ويعمل المحرر دون اتصال بعد التخزين.