معاينة Markdown

ما هو عارض Markdown؟#

Markdown اختصار النصّ الخامّ الذي يستخدمه المطوّرون لكتابة نصّ غنيّ: **عريض**، و# عناوين، و- قوائم، و`شفرة`. العارض هو البرنامج الذي يُحوِّل تلك الرموز المختصرة إلى HTML الذي يُعرضه المتصفّح فعلًا. تُمرِّر ملفّات README ومواقع التوثيق وتعليقات متتبّعات القضايا وتطبيقات المحادثة ومولّدات المواقع الثابتة كلّها Markdown عبر عارضٍ قبل عرضه عليك.

هذه الصفحة عارض Markdown بأولويّة تصميمية بعينها: آمن بالبناء لا بالفلترة. معظم العارضات يُحوِّل Markdown إلى HTML أولًا ثمّ يحاول غسل الوسوم الخطرة من النتيجة — وهو نموذج تُفضي فيه regex ضائعة واحدة إلى ثغرة XSS. تعمل هذه الأداة بالعكس: كلّ محرفٍ من المصدر يُهربَم HTML قبل تطبيق أيّ تنسيق، والوسوم الوحيدة التي تُصدرها قط تأتي من قائمة سماح ثابتة مشفّرة يدويًّا (p وh1–h6 وul وol وli وblockquote وpre وcode وhr وa وimg وstrong وem وdel وbr). لا يوجد مسار كود يستطيع إصدار وسم <script> من مُدخلك، لأنّ < خامٍ في المصدر يُهرب إلى < قبل أن يراه المنسِّق قطّ. وهذا ما يجعلها ملائمة لموقع ثابت بسياسة CSP صارمة كهذا.

تُطبِّق مجموعةً مركّزة من CommonMark مع أساسيات GitHub-Flavored Markdown: كتل الشيفرة المسوّرة، وعناوين ATX، والفقرات، والقوائم المرتّبة وغير المرتّبة، والاقتباسات، والفواصل الموضوعية (---)، والشيفرة السطرية، والعريض، والمائل، والشطب، والصور، والروابط، والروابط التلقائية الزاوية. يُعطيك المُدخل نفسه مخرَجَين جنبًا إلى جنب — المعاينة المعروضة وHTML الخامّ — لترى بالضبط ما أنتجه العارض.

كيفية الاستخدام#

1. اكتب Markdown في اللوحة اليسرى، أوانقر مثال لتحميل مستند مدمج يُمارس كلّ ميزة مدعومة.
2. بدّل المخرَج بالزرَّين فوق اللوحة اليمنى:
   • معروض يُظهر النتيجة المنسَّقة كما ستظهر على صفحة ويب.
   • عرض HTML يُظهر HTML الذي أصدره العارض بدقّة، وهو ما تُلصقه في قالب أوتسلّمه لتدقيق مُنقٍّ.
3. اضغط نسخ HTML لأخذ HTML المُولَّد لاستخدامه في مكان آخر — اللصق في CMS، أوالتضمين في قالب، أوالمرور عبر مراجعة.
4. اضغط مسح لإفراغ اللوحتَين.
5. يُبلّغ سطر الحالة طول المخرَج بالبايت أويُنبّه حين يكون الإدخال فارغًا.

الميزات الرئيسية#

• آمن بالبناء. كلّ النصّ المصدر يُهرب HTML قبل التنسيق، ولا يُصدر العارض إلا قائمة سماح ثابتة من الوسوم. لا توجد خطوة «ثمّ انزع الأجزاء الخطرة» تخطئها.
• مخطّطات URL الخطرة مُسقَطة. روابط وصور URL تُفحَص مخطّطها؛ فتُحجَب javascript: وvbscript: وdata: وfile: وabout:، ويُعرض النصّ المسيء حرفيًّا بدلًا من أن يصير رابطًا حيًّا.
• عرضان من مصدر واحد. بدّل بين المعاينة المعروضة وHTML الخامّ دون إعادة الكتابة، فتتحقّق من النتيجة البصرية والترميز الذي أنتجته معًا.
• أساسيات GFM مُضمَّنة. الشطب (~~نصّ~~)، وكتل الشيفرة المسوّرة مع تلميحات اللغة، والقوائم الصديقة للمهامّة تتصرف كما يفعل GitHub-Flavored Markdown.
• صفر تبعيات، 100% من جهة العميل. العارض مُنفَّذ ذاتيًّا — بلا مكتبة تحليل مُضمَّنة — ويعمل بالكامل في متصفّحك. لا يُرفَع شيء، ولا خادم خلفيّ يُحقن شيئًا.

مثال عملي#

اضغط مثال فتمتلئ اللوحة اليسرى بمستند يُمارس البنية الأساسية:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

بدّل إلى عرض HTML لترى بالضبط ما أصدره العارض. الفقرة تصبح:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

والرابط يصبح هدفًا صلبًا مع سمات rel/أخرى آمنة:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

والكتلة المسوّرة تصبح <pre><code> مهربًا يحفظ المصدر حرفًا بحرف — فيظهر const x = 42; كنصّ لا كشيفرة منفَّذة. تلك النقطة الأخيرة هي خلاصة الأمان مصغّرة: حتى لوألصقتَ <script>alert(1)</script> في المصدر، لعُرض كنصّ حرفيّ <script>alert(1)</script>، لأنّ < يُهرب إلى < قبل أن يُقرّر المنسِّق ما هو وسم.

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

لماذا أستخدم هذا بدلًا من كتابة HTML مباشرة؟#

لأنّ Markdown أسرع كتابةً، وأسهل قراءةً في صورته المصدرية، ويتيح للمساهمين غير البارعين في HTML كتابة المحتوى. هذا العارض لما تريد تلك السهولة دون الوثوق بمكتبة تحليل عامّة بأن تكون آمنة أيضًا — فالأمان هنا نابع من البنية، لا من مُنقٍّ يُلصق في النهاية.

ألصقت وسم <script> فظهر كنصّ. هل هذا خلل؟#

لا — بل هو السلوك المقصود والضمان الأمنيّ الأساسي. كلّ محرف من مُدخلك يُهرب HTML قبل التنسيق، فأيّ نصّ شبيه بالوسوم في المصدر يُعرض كنصّ جامد مرئي. لا سبيل عبر هذا العارض لإيصال <script> حيّ إلى المخرَج.

لماذا ظهر رابط javascript: كنصّ عاديّ؟#

يفحص العارض مخطّط كلّ رابط وصورة URL. مخطّطات مثل javascript: وvbscript: وdata: وfile: وabout: محجوبة لأنها نواقل هجوم الحقن الكلاسيكية. وحين يُحجَب URL، يترك العارض مصدر Markdown الأصليّ كنصّ حرفيّ بدل إصدار رابطٍ خطر.

هل يدعم الجداول أوقوائم المهامّة أوالحواشي؟#

لا — هذه مجموعة مركّزة عمدًا من CommonMark مع أساسيات GFM (الشيفرة المسوّرة والشطب والروابط التلقائية). الجداول والحواشي تحتاج مُحلِّلًا أغنى وسطح هجومٍ أكبر لحراسته؛ وهي عمدًا خارج النطاق هنا. التزم بالبنى المدعومة المذكورة في الميزات أعلاه.