محوّل Markdown إلى HTML
حوّل Markdown إلى HTML داخل متصفّحك — دعم كامل لـ GitHub Flavored Markdown، معاينة حيّة، تلوين صياغة. صدّر مقطع HTML أو مستنداً كاملاً أو HTML بأنماط مضمّنة آمناً للبريد. خصوصية 100% بلا رفع.
<bdi>CSS</bdi> مخصّص
ما هو تحويل Markdown إلى HTML؟
يحوّل تحويل Markdown إلى HTML مستنداً نصياً عادياً مكتوباً بـ Markdown — بـ # للعناوين، و**bold**، و- للقوائم، و[text](url) للروابط — إلى الـ HTML الذي تعرضه فعلاً المتصفّحات وأنظمة إدارة المحتوى وعملاء البريد. صُمّم Markdown ليكون مقروءاً كما هو وسهل الكتابة، لكن المتصفّح لا يفهم # Heading؛ بل يفهم <h1>Heading</h1>. يسدّ التحويل تلك الفجوة.
خلف الكواليس، يحلّل معالج Markdown مصدرك أولاً إلى شجرة صياغة مجرّدة (AST) — تمثيل بنيوي يكون فيه العنوان والفقرة والقائمة وكتلة الشيفرة عقداً متمايزة بمحتواها وسماتها. ثم يُسلسِل تلك الشجرة إلى HTML، مُصدِراً الوسوم الصحيحة والتداخل. العمل عبر AST، بدلاً من استبدال النص بتعابير نمطية، هو ما يتيح للمحوّل التعامل مع القوائم المتداخلة والجداول وHTML المضمّن بصحة وقابلية للتنبؤ. النحْوان المعترَف بهما هما CommonMark، المعيار الدقيق، وGitHub Flavored Markdown أي GFM، الذي يوسّعه بالجداول وقوائم المهام والشطب والروابط التلقائية.
السبب الذي يدفعك للتحويل أصلاً هو أن كل وجهة نشر تقريباً تريد HTML لا Markdown. مولّد المواقع الساكنة وحقل النص الثري في نظام إدارة المحتوى وقالب البريد وتبويب المتصفّح كلها تعرض HTML. فسير العمل المعتاد هو الكتابة بـ Markdown المريح — ملف README أو توثيق أو مسوّدة مدوّنة أو ملاحظات — والتحويل إلى HTML عند لحظة النشر. تجري هذه الأداة ذلك التحويل محلياً وتُظهر معاينة حيّة، فترى النتيجة المعروضة وتنسخ الـ HTML بالضبط بالشكل الذي تحتاجه: مقطع أو صفحة كاملة أو ترميز بأنماط مضمّنة جاهز للبريد.
العملية المعاكسة — HTML مجدداً إلى Markdown — مفيدة بالقدر نفسه عند ترحيل محتوى ويب قائم إلى نظام قائم على Markdown. لذلك، بدّل إلى تبويب HTML ← Markdown أو افتح محوّل HTML إلى Markdown المخصّص.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> الميزات الرئيسية
معاينة حيّة بجزأين منقسمين
اكتب Markdown على اليسار وشاهده يُعرض على اليمين في الوقت الفعلي، مع بناء إخراج HTML أسفله أثناء سيرك. تُعرض المعاينة في إطار معزول، فما تراه هو ما سيظهره المتصفّح — والنصوص الملصقة لا تعمل.
GitHub Flavored Markdown كامل
ليس CommonMark فقط — بل مجموعة GFM الفائقة الكاملة: جداول الأنابيب وقوائم المهام (- [x]) والشطب (~~) والروابط التلقائية وكتل الشيفرة المحصورة. ملف README أو قضية مكتوبة لـ GitHub تُعرض هنا تماماً كما هناك.
تلوين الصياغة
ضع لكتلة شيفرة محصورة تسمية بلغتها (```js، ```python، ```sql) فيلوّنها المحوّل، ملفّاً الرموز في عناصر span بفئة لغة على عنصر <code>. اقرنها بورقة أنماط تلوين على صفحتك للّون.
ثلاثة تنسيقات إخراج
صدّر مقطع HTML (ترميز متن لقالب أو نظام إدارة محتوى)، أو مستنداً كاملاً (صفحة <!doctype html> مكتفية بذاتها تحفظها كملف .html)، أو HTML بريد مضمّن بأنماط منقولة إلى كل عنصر كي يعرضه Outlook وغيره بصحة.
لوحة CSS مخصّص
احقن CSS خاصاً بك في المعاينة الحيّة لمطابقة طباعة موقع أو محاكاة تنسيق README على نمط GitHub. اكتب قواعد مثل h1 { color: #0969da; } فتتحدث المعاينة فوراً، دون المساس بالـ HTML النظيف الذي تنسخه.
ورقة صياغة GFM سريعة
مرجع سريع للصياغة التي تنتج HTML: # عنوان، **bold** ← strong، *italic* ← em، - item قائمة، 1. item قائمة مرتّبة، [text](url) رابط، `code` شيفرة مضمّنة، ```lang شيفرة محصورة، > quote اقتباس، | a | b | جدول، - [ ] قائمة مهام، ~~text~~ شطب.
خصوصية 100% داخل المتصفّح
يجري كل تحويل محلياً بـ JavaScript — لا يغادر Markdown ولا HTML جهازك أبداً، ولا يصلان لخادم، ويعملان دون اتصال بعد تحميل الصفحة. آمن للتوثيق غير المنشور وملفات README الداخلية وملاحظات الإصدار تحت الحظر.
أمثلة
جدول GFM إلى عنصر <table> في HTML
| Tool | Speed | | ---- | ----- | | GFM | Fast |
<table> <thead><tr><th>Tool</th><th>Speed</th></tr></thead> <tbody><tr><td>GFM</td><td>Fast</td></tr></tbody> </table>
جداول الأنابيب في GitHub Flavored Markdown ليست جزءاً من CommonMark العادي، لكن هذا المحوّل يفهمها ويُصدر عنصر <table> دلالياً صحيحاً مع <thead> و<tbody> — جاهز للتنسيق أو الإسقاط في نظام إدارة محتوى.
قائمة مهام إلى HTML بخانات اختيار
- [x] Write the README - [ ] Convert it to HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li> <li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li> </ul>
تتحول صياغة قائمة المهام في GFM أي - [x] / - [ ] إلى مدخلات خانات اختيار معطّلة حقيقية، تماماً كما يعرض GitHub قائمة التحقق — فيظهر ملف README المنسوخ بالشكل ذاته على صفحتك.
كتلة شيفرة محصورة إلى <pre><code> ملوّنة
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
أضف اسم لغة بعد بداية السياج فيطبّق المحوّل تلوين الصياغة، ملفّاً الرموز في عناصر span مع فئة language-js على عنصر <code>. اقرنه بورقة أنماط تلوين كي تتلوّن الشيفرة.
ملف README إلى مستند HTML كامل
# My Project A short description and a [link](https://example.com).
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>My Project</title></head> <body> <h1>My Project</h1> <p>A short description and a <a href="https://example.com">link</a>.</p> </body> </html>
بدّل المخرجات إلى «مستند كامل» فيلفّ المحوّل الـ HTML المعروض في صفحة <!doctype html> كاملة برأس <head> وترميز محارف — ملف .html مكتفٍ بذاته يمكنك فتحه في أي متصفّح أو تنزيله مباشرة.
كيفية تحويل Markdown إلى HTML
- 1
اكتب أو الصق Markdown
أسقط Markdown — ملف README أو ملاحظات إصدار أو متن قضية — في جزء الإدخال. يُدعَم GitHub Flavored Markdown كاملاً: الجداول وقوائم المهام والشطب والروابط التلقائية وكتل الشيفرة المحصورة. تتحدّث المعاينة الحيّة وإخراج HTML أثناء كتابتك، كله داخل متصفّحك.
- 2
اختر تنسيق إخراج
اختر «مقطع HTML» للّصق في قالب أو نظام إدارة محتوى، أو «مستند كامل» لصفحة .html مكتفية بذاتها، أو «البريد المضمّن» لـ HTML بأنماط مضمّنة ينجو من Outlook. أضف وسوم لغة لسياجات الشيفرة لتلوين الصياغة، واستخدم لوحة «CSS مخصّص» لتنسيق المعاينة.
- 3
انسخ أو نزّل
انقر «نسخ» لأخذ الـ HTML، أو «تنزيل» لحفظه كملف. لعكس التحويل، بدّل إلى تبويب HTML ← Markdown والصق HTML للحصول على Markdown نظيف مجدداً.
الأخطاء الشائعة
ابتلاع HTML غير مهروب في النثر
يمرّر Markdown الـ HTML الخام، فقوس زاوية قصدته نصاً — مثل الكتابة عن <Component> أو List<T> عام — يُحلَّل كوسم HTML ويختفي من المخرجات. اهرب القوس بشرطة مائلة خلفية أو كيان HTML، أو لفّ النص في مدى شيفرة كي يُعرض حرفياً.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
أنابيب جدول مختلّة أو مشوّهة
يحتاج جدول GFM صف عنوان وصف فاصل من الشرطات وأنبوباً واحداً على الأقل لكل صف. نسيان صف الفاصل، أو وجود عدد أعمدة مختلف عن العنوان، يكسر الجدول — فيرتد إلى فقرة عادية من الأنابيب. لا يلزم أن تصطفّ الخلايا بصرياً، لكن يجب أن يكون لكل صف العدد ذاته من الأعمدة.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
سياج شيفرة بلا لغة
كتلة شيفرة محصورة بلا سلسلة معلومات لغة تُعرض ككتلة <pre><code> بلا فئة لغة، فلا تحصل على تلوين صياغة. تبقى الشيفرة ظاهرة، أحادية اللون فقط. أضف اللغة مباشرة بعد علامات السياج لتفعيل التلوين؛ مسافة بين العلامات والاسم تعطّله.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
استخدام مقطع حيث يلزم مستند كامل
نسخ إخراج «مقطع HTML» وحفظه مباشرة كملف .html ينتج صفحة بلا doctype ولا ترميز محارف ولا <html>/<head>/<body>. تعرضها المتصفّحات غالباً على أي حال، لكن وضع التوافق وغياب ترميز المحارف قد يكسر الأحرف المشكّلة والتخطيط. حين يجب أن يقف الـ HTML وحده، بدّل إلى تنسيق «مستند كامل».
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
حالات الاستخدام الشائعة
- النشر في موقع ساكن أو نظام إدارة محتوى
- اكتب محتواك بـ Markdown، وحوّله إلى مقطع HTML، والصقه في قالب موقع ساكن أو حقل نص ثري في نظام إدارة محتوى. تحصل على ترميز دلالي نظيف — عناوين وقوائم وجداول — دون أن يعترضك غلاف الصفحة.
- معاينة ملف README قبل الدفع
- الصق ملف README.md وشاهد المعاينة الحيّة تعرضه بـ GFM كامل — جداول وقوائم مهام وشيفرة محصورة — فتلتقط جدولاً معطوباً أو سياج شيفرة ناقصاً قبل الالتزام، لا بعد أن يعرضه GitHub للعالم.
- تحويل ملاحظات إلى صفحة ويب قابلة للمشاركة
- تصبح ملاحظات اجتماع أو مستند تصميم أو مسوّدة مكتوبة بـ Markdown صفحة HTML كاملة بنقرة واحدة. اختر «مستند كامل»، ونزّل ملف .html، فيصير لديك شيء تفتحه في أي متصفّح أو تستضيفه أينما شئت.
- بناء HTML بأنماط مضمّنة آمن للبريد
- يجرّد عملاء البريد كتل <style>، فاكتب رسالتك بـ Markdown وصدّر تنسيق «البريد المضمّن» الذي ينقل الـ CSS إلى كل عنصر كسمة style. تُعرض النتيجة بصحة في Outlook وغيره ممن يتجاهلون أنماط مستوى المستند.
- تحويل ملف .md إلى .html قابل للتنزيل
- تحتاج نسخة HTML مكتفية بذاتها دون اتصال من مستند Markdown؟ الصقه، واختر «مستند كامل»، و«تنزيل» — تحصل على ملف .html مكتفٍ بذاته بـ doctype وترميز محارف سليمين، بلا أداة بناء أو سطر أوامر.
- تضمين توثيق معروض في تطبيق
- تولّد توثيقاً أو سجلات تغيير أو محتوى مساعدة من Markdown مخزّن في مستودعك؟ استخدم هذه الأداة لرؤية أي HTML بالضبط ينتجه مصدر Markdown معيّن، كي تطابق عارض تطبيقك وتنسّق المخرجات لتلائم.
تفاصيل تقنية
- CommonMark مقابل GitHub Flavored Markdown
- CommonMark هو مواصفة Markdown الصارمة غير الملتبسة التي تحدّد بالضبط كيف تُحلَّل العناوين والتوكيد والقوائم والروابط وكتل الشيفرة. وGitHub Flavored Markdown أي GFM مجموعة فائقة صارمة: تُبقي كل ما يحدّده CommonMark وتضيف أربعة امتدادات — جداول الأنابيب وعناصر قائمة المهام (- [x]) والشطب (~~text~~) والروابط العارية التلقائية. ولأن GFM يضيف ميزات فقط، فأي مستند CommonMark صالح هو أيضاً GFM صالح. يطبّق هذا المحوّل مجموعة GFM الفائقة، فتُعرض المستندات المكتوبة لأي من النحْوين بصحة.
- عرض معزول آمن من XSS
- يسمح Markdown عمداً بـ HTML خام مضمّن، ما يعني أن مستند Markdown قد يحوي وسم <script> أو معالج حدث مثل onerror. تدافع المعاينة الحيّة عن ذلك بالعرض داخل <iframe sandbox=""> مع تعطيل النصوص البرمجية، فلا يمكن للمحتوى النشط في مدخلاتك أن يُنفَّذ أثناء المعاينة — مهم عند تحويل Markdown من مصدر غير موثوق. أما الـ HTML المُسلسَل الذي تُخرجه الأداة فهو العرض الأمين لمدخلاتك؛ إن عزمت نشر HTML مشتق من Markdown غير موثوق، فمرّره عبر مطهّر مثل DOMPurify على خادمك قبل تقديمه.
- توافق بريد HTML
- يُعرض بريد HTML بترقيع من المحرّكات بدعم CSS محدود سيّئ السمعة. يستخدم Outlook على Windows محرّك عرض Word ويتجاهل كتل <style> في رأس المستند، فيختفي بصمت أي تنسيق قائم على الفئات؛ والنهج الموثوق هو سمات style مضمّنة على كل عنصر، وهو ما ينتجه إخراج «البريد المضمّن». الصور فخّ آخر: يحجب كثير من العملاء الصور البعيدة حتى يوافق المستلم، فتضمين الصور الصغيرة كعناوين URI للبيانات يعرضها فوراً، بينما قد لا تظهر الصور البعيدة الكبيرة إطلاقاً. أبقِ الترميز بسيطاً واختبر عبر عملائك المستهدفين.
- تلوين متزامن داخل المتصفّح
- حين تحمل كتلة شيفرة محصورة سلسلة معلومات لغة (```js)، يشغّل المحوّل مُلوّناً متزامناً على محتواها، مجزّئاً المصدر وملفّاً كل رمز في عنصر <span> بفئة مثل hljs-keyword أو hljs-string، إضافةً إلى فئة language-js على عنصر <code>. التلوين بنيوي فقط — يضيف فئات لا ألواناً — فتحتاج الصفحة الوجهة ورقة أنماط تلوين مطابقة لعرض اللوحة اللونية. ولأنه يعمل متزامناً في المتصفّح، يظهر الـ HTML الملوّن لحظة كتابتك، بلا طلب شبكة.
أفضل الممارسات
- اختر تنسيق الإخراج بحسب الوجهة
- طابق التنسيق مع وجهة الـ HTML. حقل أو قالب نظام إدارة محتوى له بالفعل غلاف صفحة، فالصق مقطع HTML. وملف تريد فتحه مباشرة في متصفّح يحتاج «مستند كامل» بـ doctype وترميز محارف. والبريد يحتاج «البريد المضمّن» كي تنجو الأنماط من العملاء الذين يجرّدون كتل <style>. لصق الشكل الخطأ هو أكثر الأخطاء القابلة للتجنّب شيوعاً.
- ضع دائماً وسم لغة لسياجات الشيفرة
- اكتب اللغة مباشرة بعد علامات السياج — ```js، ```python، ```sql — بلا مسافة، كي يستطيع المحوّل تلوين الكتلة وإضافة فئة اللغة الصحيحة. السياج العاري ينتج شيفرة بلا أنماط ولا تلوين. استخدم لغة يعرفها المُلوّن؛ فالاسم المجهول أو المكتوب خطأً يرتد إلى نص عادي.
- طهّر قبل نشر Markdown غير موثوق
- المعاينة معزولة، لكن الـ HTML الذي تُصدره الأداة عرض أمين — يشمل أي HTML خام أو <script> في المدخلات. إن جاء ذلك Markdown من مستخدمين أو مصدر آخر غير موثوق وعزمت تقديم النتيجة لأشخاص آخرين، فمرّر الـ HTML عبر مطهّر مثل DOMPurify على خادمك أولاً. يحميك العزل أثناء التحويل، لا زوّارك بعد النشر.
- أبقِ بريد HTML بسيطاً ومضمّناً
- للبريد، فضّل تنسيق «البريد المضمّن»، وأبقِ تخطيطك بسيطاً، وتجنّب ميزات CSS التي يُسقطها Outlook وغيره. ضمّن الصور الصغيرة كعناوين URI للبيانات كي تُعرض حتى حين تُحجب الصور البعيدة، وأرسل دائماً اختباراً لنفسك قبل إرسال أوسع — عرض البريد أقل أهداف الـ HTML تسامحاً.
- اهرب محارف HTML الحرفية في النص
- إن أردت ظهور < أو & حرفياً كنص بدلاً من تفسيره كوسم أو كيان، فاهربه بشرطة مائلة خلفية (\<) أو كيان HTML (<). يمرّر Markdown الـ HTML الخام، فقد يُبتلَع <example> غير مهروب في النثر كوسم مجهول ويختفي من المخرجات المعروضة.
الأسئلة الشائعة
هل يدعم GitHub Flavored Markdown أي GFM؟
كيف أحصل على HTML بأنماط مضمّنة آمن للبريد الإلكتروني؟
ما الفرق بين مقطع HTML ومستند كامل؟
هل الـ HTML المعروض آمن من XSS للمعاينة؟
هل يمكنني إضافة CSS خاص بي إلى المعاينة؟
هل تُرفع ملفاتي أو نصّي إلى خادم؟
هل تعمل دون اتصال؟
كيف أحوّل ملف Markdown أي .md إلى ملف HTML؟
لماذا كتلة الشيفرة لديّ غير ملوّنة؟
هل يمكنني تحويل HTML مجدداً إلى Markdown؟
أدوات ذات صلة
عرض جميع الأدوات →محوّل Base64 — ترميز وفك ترميز أونلاين
الترميز والتنسيق
رمّز وفك ترميز Base64 مجاناً أونلاين — محوّل فوري مع دعم UTF-8 والرموز التعبيرية. خصوصية 100% — يعمل في متصفّحك. جرّبه الآن.
محوّل Base64 إلى صورة أونلاين
الترميز والتنسيق
فك ترميز سلسلة Base64 أو عنوان URI للبيانات إلى صورة داخل متصفّحك. عاين واقرأ الأبعاد ونوع MIME ثم نزّل كـ PNG أو JPG أو GIF أو SVG. بلا رفع.
محوّل CSV إلى JSON
الترميز والتنسيق
حوّل CSV إلى JSON في متصفحك. RFC 4180، استنتاج الأنواع، صف العنوان، أمان الأعداد الكبيرة. خصوصية 100%.
محوّل HTML إلى Markdown
الترميز والتنسيق
حوّل HTML إلى Markdown نظيف داخل متصفّحك — جداول GFM وقوائم مهام وروابط. اختر عناوين ATX/Setext وروابط مضمّنة أو مرجعية. مثالي لترحيل محتوى الويب أو تغذية نماذج LLM. خصوصية 100% بلا رفع.
محوّل الصور إلى Base64 أونلاين
الترميز والتنسيق
حوّل الصور إلى عناوين URI للبيانات بصيغة Base64 داخل متصفّحك — PNG وJPG وGIF وWebP وSVG وICO. انسخ مخرجات HTML وCSS وMarkdown وJSON. خصوصية 100% بلا رفع.
JSON Diff مقارنة
الترميز والتنسيق
قارن ملفي JSON فوراً في متصفحك. عرض جنباً إلى جنب مع تمييز الفروق، وإخراج JSON Patch (RFC 6902)، وتجاهل الحقول المزعجة كالطوابع الزمنية والمعرّفات. خصوصية تامة، بدون رفع ملفات.