ما الذي تفعله هذه الأداة
محرّر Markdown مع معاينة HTML مباشرة. اكتب CommonMark على اليسار، شاهد الناتج المعروض على اليمين. يدعم العارض العناصر الكتلية والسطرية القياسية إضافةً إلى الجداول والشطب بنكهة GitHub. يجري تعقيم HTML الناتج — يُفلَت HTML الخام في المصدر، وتُسقَط روابط javascript: و data: قبل الوصول إلى الصفحة.
متى تستخدمها
- صياغة README قبل دفعه إلى GitHub.
- معاينة وصف Issue أو PR دون مغادرة المتصفح.
- لصق Markdown من مكان ما والتأكد أنه يُعرض كما تتوقع.
- إنتاج HTML نظيف لنسخه إلى نظام إدارة محتوى لا يفهم Markdown.
كيف تعمل
العارض مكتوب يدوياً، نحو 340 سطراً، دون أي اعتماد على مكتبة Markdown أو معقّم خارجي. يتعامل تحليل الكتل مع عناوين ATX والفقرات والكود المُسوَّر والمُزاح والقوائم (مرتّبة وغير مرتّبة) والاقتباسات والخطوط الأفقية وجداول GFM ذات الأنابيب. ويغطي التحليل السطري التأكيد والتقوية وكتل الكود السطرية والشطب والروابط والصور والروابط التلقائية وفواصل الأسطر القاسية.
يُفرَض الأمان على طبقتين. أوّلاً: يمرّ كل تتابع نصّي عبر إفلات كيانات HTML قبل الوصول إلى مخزن الإخراج — لذا <script> الحرفية في المصدر تصبح <script>، ولن تكون أبداً وسماً تنفيذياً. ثانياً: يمرّ كل رابط في وصلة أو صورة عبر قائمة سماح (http(s)، mailto، tel، رابط مرسى، مسار نسبي) — وأيّ شيء آخر يُسقَط. هذا يصطاد javascript: و data: و vbscript:، والمخططات بحالة أحرف مختلطة (JaVaScRiPt:)، والإدراج بأحرف تحكّم (java\tscript:).
ملاحظات
لماذا لا يوجد تظليل صياغي في كتل الكود؟ أي مظلِّل حقيقي (Prism أو highlight.js أو Shiki) بحجم 50–500 كيلوبايت يُشحَن إلى كل صفحة. تركناه خارجاً للحفاظ على حزمة صغيرة. تبقى وسوم اللغة فئة CSS (language-js)، فيمكنك إضافة تظليل فوق HTML المنسوخ إن أردت.
هل تعرض الصور؟ نعم، لكن بروابط مُعقَّمة فقط. مسارات الملفات المحلية (./image.png) مسموحة؛ أمّا روابط الصور بصيغة data: فلا.
ما مدى قربها من CommonMark؟ قريبة في الـ 90% الشائعة. الحالات الحدّية — تعريفات مراجع الروابط، عناوين setext، القوائم المتشعّبة بأسطر فارغة — قد تختلف عن المواصفة الكاملة.
أدوات ذات صلة
- إفلات HTML و CSS في Base64 — حين تحتاج تضمين HTML داخل JSON
- مدقّق الفروقات — قارن مسوّدتي Markdown