تخطي إلى المحتوى الرئيسي
الترميز البنيوي

عارض Markdown إلى HTML

يعرض Markdown كصفحة HTML مباشرة مع دعم العناوين والجداول والقوائم والروابط. مفيد لمعاينة توثيق README قبل النشر. يعمل محلياً في المتصفح مع معاينة مباشرة.

أدوات Markdown

باختصار

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

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

  • يقرأ النص المكتوب أو الملصق وملفات .md/.markdown ويحلله عبر Marked مع GFM وفواصل الأسطر المرنة الافتراضية.
  • يحفظ العناوين والفقرات والتأكيد والقوائم والاقتباسات والكود والجداول والروابط المسموحة بعد تنقية DOMPurify.
  • يحذف script وstyle وiframe وعناصر النماذج والصور وSVG/MathML والتضمينات والبيانات الوصفية وinline style وsrcset ومخططات URI المرفوضة.
  • يوفر عرضًا حيًا أو يدويًا، ويجبر الروابط الباقية على تبويب جديد مع noopener/noreferrer، وينسخ HTML المنقّى.

كيفية استخدام عارض Markdown إلى HTML

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

  1. 1

    الخطوة 1

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

    اكتب أو ألصق Markdown، أو استورد ملف .md/.markdown، أو حمّل العينة.

  2. 2

    الخطوة 2

    اختر العملية

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

  3. 3

    الخطوة 3

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

    دع Marked يحلل GFM ثم طبّق DOMPurify سياسة Markdown المقيدة للمشروع.

  4. 4

    الخطوة 4

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

    راجع المعاينة وعدد الأحرف، خصوصًا الروابط والجداول والأسوار البرمجية وHTML الخام الذي أزيل.

  5. 5

    الخطوة 5

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

    انسخ HTML المنقّى واختبره مرة أخرى داخل sanitizer وCSS الخاصين بالوجهة.

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

توقّع ظهور الصور أو النماذج المضمّنة

النتيجة: تحظر السياسة عمدًا img وform وinput وbutton وiframe وSVG وMathML وstyle والعناصر النشطة أو الشبكية.

الإصلاح: استضف الأصول المعتمدة منفصلة وأضفها في الوجهة فقط تحت CSP وسياسة تنقية مراجعتين.

اعتبار مظهر المعاينة جزءًا من HTML المنسوخ

النتيجة: تأتي الطباعة من CSS التطبيق؛ النص المنسوخ يحتوي الوسوم فقط.

الإصلاح: اختبر HTML تحت stylesheet الوجهة قبل النشر.

اعتبار التنقية هنا حماية دائمة في كل مكان

النتيجة: قد تعيد الوجهة تحويل الوسوم أو دمجها أو تنقيتها بسياسة مختلفة.

الإصلاح: طبّق التنقية عند آخر حد ثقة واستخدم الناتج هنا كأثر وسيط مراجع.

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

  • احتفظ بـMarkdown كمصدر قابل للتحرير وأعد توليد HTML بدل تعديله يدويًا.
  • راجع كل رابط خارجي؛ خصائص rel لا تشهد بأمان الموقع المرتبط.
  • اختبر العناوين والقوائم والجداول والكود في العارض النهائي لأن اللهجة وCSS قد يختلفان.

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

قيود المتصفح

  • سلوك Marked GFM ليس مرجع مطابقة CommonMark حرفيًا؛ قد تختلف الامتدادات وHTML الخام في عارض آخر.
  • تُحذف الصور والعناصر النشطة/الشبكية عمدًا، ولا يوجد syntax highlighting أو تصدير ملف أو سياسة مخصصة.
  • يعمل التحليل والتنقية تزامنيًا على 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**جاهز** للمراجعة.
النتيجة
تظهر فقرة وعنوان ويمكن نسخ HTML المنقّى نفسه.

ينشئ Marked العنصرين وتبقيهما DOMPurify لأنهما ضمن الوسوم المسموحة ولا يحملان سمات أو روابط خطرة.

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

لماذا اختفت صورة مكتوبة بصيغة Markdown؟

تحظر السياسة img بالكامل لمنع طلبات الشبكة غير المقصودة والمحتوى المضمّن الخطر.

هل تُقبل وسوم HTML الخام داخل Markdown؟

يمكن لـMarked تحليلها، ثم تحذف DOMPurify الوسوم والسمات الممنوعة وتبقي ملف HTML الآمن المكوّن.

ماذا يحدث لروابط Markdown؟

تبقى http وhttps وmailto والروابط النسبية والجذرية والداخلية المسموحة، ويضاف target=_blank وrel=noopener noreferrer.

هل يمكن نسخ CSS المعاينة؟

لا. النسخ يعيد HTML المنقّى فقط، دون أنماط prose أو الثيم.

هل يكفي هذا لعرض Markdown غير موثوق في الإنتاج؟

يظل الإنتاج بحاجة إلى تنقية عند حد الثقة النهائي وCSP وتحديث التبعيات واختبارات رجوع.

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

يبقى Markdown وHTML المنقّى في المتصفح. لا تُقرأ الملفات إلا بعد اختيارها، ويعمل التحويل دون اتصال بعد التخزين المؤقت؛ النسخ هو التسليم المقصود الوحيد.