ما هو تحويل Markdown إلى HTML؟
Markdown صيغة نصية خفيفة تستخدم رموز ترقيم بسيطة (# للعناوين، * للتوكيد، - لعناصر القوائم) لتمثيل نثر منظَّم. GitHub Flavored Markdown (GFM) يوسّع مواصفة CommonMark الأصلية بالجداول والشطب وقوائم المهام والروابط التلقائية. أمّا HTML فهو الشكل المُصيَّر الذي يعرضه المتصفح. تحويل Markdown إلى HTML يتيح لك التأليف بالصيغة الخفيفة والنشر على سطح مُصيَّر دون الحاجة إلى كتابة الوسوم يدوياً.
أي ميزات GitHub Flavored Markdown مدعومة؟
محلل marked@12.0.2 المرفق يدعم مجموعة GFM الكاملة: عناوين بأسلوب ATX من # إلى ######، قوائم مرتبة وغير مرتبة قابلة للتداخل، عريض **نص** ومائل *نص*، شطب ~~نص~~، روابط ضمنية [نص](url) وصور ضمنية ، كتل شيفرة محاطة مع وسم لغة اختياري (```js)، شيفرة سطرية `code`، جداول pipe بصفوف رأسية، قوائم مهام GFM - [ ] / - [x]، اقتباسات >، خطوط أفقية ---، وروابط تلقائية. كل عنصر يُصيَّر في لوحة المعاينة بالطريقة ذاتها التي يُصيّره بها GitHub.
كيف يعمل تحويل Markdown إلى HTML؟
كل تحويل يجري محلياً داخل متصفحك باستخدام مكتبتين مرفقتين — بلا CDN ولا fetch ولا قياسات عن بُعد. الخطوات الرئيسية هي:
- التحليل:
marked.parse(source)يقرأ Markdown ويُنتج سلسلة HTML. يعمل المحلل في وضع GFM، لذا تُتعرَّف الجداول وقوائم المهام والشطب والروابط التلقائية جميعها. - التعقيم: يمرّ مخرج HTML عبر
DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })قبل إسناده إلىinnerHTML. DOMPurify هو نفس معقم XSS الذي تستخدمه Mozilla MDN و Atlassian و Microsoft 365 — يحلل HTML، ويمشي في DOM، ويزيل عناصر<script>وكل سمة معالج حدثon*ومخططات URI من نوعjavascript:. - التصيير: يُكتب HTML المُعقَّم في لوحة المعاينة عبر
innerHTML، ويُعرض HTML الخام في اللوحة الثانية عبر<textarea>للقراءة فقط حتى تتمكن من نسخه. وضع البث المباشر يؤجّل الإدخال 150 مللي ثانية ليُحدّث المعاينة أثناء الكتابة دون إرهاق المحلل.
لماذا تحوّل Markdown إلى HTML بهذه الأداة؟
- الخصوصية: كل عملية تحليل وتعقيم وتصيير تجري داخل متصفحك. لا تصل Markdown — بما فيها مقالات المدونات غير المنشورة، ومسوّدات التوثيق الداخلية، ومحتوى README السري — إلى خوادمنا أبداً.
- آمن من XSS افتراضياً: تمرّر لوحة المعاينة المُصيَّرة كل سلسلة HTML عبر DOMPurify قبل
innerHTML، فيؤدي لصق كتلة HTML تحتوي على وسوم<script>أو معالجاتonerror=داخل Markdown الخاص بك إلى معاينة خاملة. يعرض تبويب الخام سلسلة HTML غير المعقّمة للفحص لكنها داخل<textarea>عبرvalue— لا تُنفَّذ أبداً. - اكتمال GFM: الجداول والشطب وقوائم المهام والروابط التلقائية تُصيَّر بالطريقة ذاتها التي يُصيّرها GitHub. جدول pipe في Markdown يصبح
<table>بـ HTML مع<thead>و<tbody>— بلا صفوف مفقودة ولا بنية مسطّحة.
ما هي التطبيقات الشائعة لتحويل Markdown إلى HTML؟
يظهر تحويل Markdown إلى HTML في التوثيق وأعمال المواقع الثابتة وتأليف البريد الإلكتروني:
- تأليف README على GitHub: صياغة README لمشروع محلياً بصيغة Markdown ومعاينة HTML المُصيَّر قبل الدفع. تطابق المعاينة محرّك GFM في GitHub للجداول وقوائم المهام والكتل المحاطة.
- محتوى المواقع الثابتة: لصق منشور Markdown والحصول على HTML لحقل CMS أو محرك قوالب يتوقع ترميزاً بدلاً من مصدر Markdown.
- قوالب البريد الإلكتروني: كتابة جسم بريد إلكتروني للمعاملات بصيغة Markdown وتحويله إلى HTML لمحرّك القوالب لدى مزود البريد. المخرج هو HTML دلالي خالٍ — لا أنماط ضمنية ولا غرائب عملاء البريد.
كيف يبدو مثال تحويل Markdown إلى HTML؟
لصق # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) يُنتج لوحة معاينة تحتوي على <h1>Title</h1>، وقائمة غير مرتبة بعنصرين، و<a href="https://example.com">link</a>. تعرض اللوحة الخام سلسلة HTML الدقيقة حتى تتمكن من نسخها مباشرةً في قالب. جدول pipe مع صف محاذاة |---|---| يصبح <table> كاملاً مع <thead> و<tbody> — مما يؤكد أن جداول GFM تُصيَّر بنفس طريقة GitHub.
هل يعمل محول Markdown إلى HTML هذا داخل متصفحي بالكامل؟
نعم. كل عمليات التحليل والتعقيم والتصيير تجري محلياً كجافاسكربت داخل تبويب متصفحك. المكتبتان المرفقتان — marked@12.0.2 و DOMPurify@3.1.7 — تُحمَّلان من نفس مصدر الصفحة، فلا اعتماد على CDN ولا fetch ولا XMLHttpRequest ولا navigator.sendBeacon على المدخل. كما تعمل الأداة دون اتصال بمجرد تحميل الصفحة، لأنها حزمة HTML/CSS/JS ثابتة مع المكتبات الموردة بجوارها. المنشورات غير المُصدَرة، والوثائق الداخلية، وملفات README السرية تبقى على جهازك.
هل لوحة المعاينة المُصيَّرة آمنة من XSS؟
نعم. كل سلسلة HTML تُسند إلى innerHTML تمرّ أولاً عبر DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify هو معقم XSS مفتوح المصدر الذي تصونه Cure53؛ هو نفس المكتبة التي تستخدمها Mozilla MDN و Atlassian و Microsoft 365 لتحصين HTML الذي يقدّمه المستخدم. ملف التعريف الافتراضي html يزيل عناصر <script>، وكل سمة معالج حدث on* (onerror، onclick، إلخ)، ومخططات URI من نوع javascript: داخل href / src، وتعبيرات CSS الخطيرة المعروفة. لصق <img src=x onerror=alert(1)> يُنتج معاينة يُعيد فيها document.querySelector('#output-preview img[onerror]') القيمة null ولا يُطلق أي تنبيه.
هل جداول GFM مدعومة؟
نعم. اتجاه Markdown → HTML يتعامل مع جداول pipe بشكل أصيل عبر وضع GFM في marked — صف رأسي يفصله صف محاذاة |---|---|، تتبعه صفوف بيانات، يُنتج <table> مع <thead> + <tbody>. الشطب (~~نص~~ → <del>نص</del>) وقوائم المهام (- [ ] / - [x] → <input type="checkbox">) تُصيَّر بنفس الطريقة التي يُصيّرها GitHub.
هل سيتحوّل Markdown بدقة؟
بالنسبة لمجموعة GFM القياسية — العناوين من h1 إلى h6، والقوائم المرتبة وغير المرتبة بالتداخل، والعريض / المائل / الشطب، والروابط الضمنية، والصور الضمنية، وكتل الشيفرة المحاطة مع وسوم اللغة، والشيفرة السطرية، وجداول pipe، وقوائم المهام، والاقتباسات، والخطوط الأفقية، والروابط التلقائية — يكون مخرج HTML ثابتاً ومطابقاً لمحرك GitHub. بعض السلوكيات الجديرة بالمعرفة: HTML السطري الخام داخل Markdown (مثل <sub>نص</sub>) يمرّ دون تغيير إلى المخرج، وعناوين CommonMark بأسلوب setext (تسطير ===) وأسلوب ATX (# Title) كلاهما يُنتجان <h1> ذاته. هذه سلوكيات موثّقة لـ marked وليست أخطاء. إن كنت تحتاج الاتجاه العكسي، استخدم أداة HTML إلى Markdown.
هل تظليل بناء الجملة في كتل الشيفرة المحاطة مدعوم؟
ليس في الإصدار v1. تُصيَّر كتل الشيفرة المحاطة بخط أحادي المسافة وخلفية خفيفة دون تظليل رموز لكل لغة. إضافة تظليل بناء الجملة ستتطلب تجميع Prism أو highlight.js، يضيف كل منهما 15–40 كيلوبايت إضافة إلى ملف قواعد لكل لغة ومصفوفة سمات تحتاج محاذاة مع لوحة Workshop Terminal. حالياً يُركّز المُصيِّر على الصحة والأمان من XSS؛ وفي حال وجود طلب من المستخدمين على التظليل الضمني، فإن مفتاح تفعيل اختياري متابعة ممكنة.
محول Markdown إلى HTML هذا مرفق بـ marked@12.0.2 و DOMPurify@3.1.7 على نفس المصدر، يدعم مجموعة GFM الكاملة، ويعقّم كل سلسلة HTML مُصيَّرة قبل أن تلامس DOM. بلا رفع، بلا CDN، بلا قياسات عن بُعد — كل بايت يبقى داخل متصفحك.