محول Markdown إلى HTML
ومن HTML إلى Markdown، مع معاينة مباشرة

ما الذي يفعله محول Markdown إلى HTML هذا

يحوّل محول Markdown إلى HTML هذا نص Markdown العادي إلى HTML الذي تحتاجه صفحة الويب. اكتب في مربع Markdown فيظهر HTML في المربع الآخر، بينما تعرض المعاينة أسفله الشكل النهائي.

ويؤدي المهمة نفسها في الاتجاه المقابل. الصق HTML من صفحة ويب أو نظام إدارة محتوى أو بريد إلكتروني، وستحصل على Markdown نظيف تضعه في ملف README أو موقع ثابت أو تطبيق ملاحظات.

يجري كل شيء في متصفحك، لذلك لا تغادر المسودات والملاحظات الخاصة ومستندات العملاء جهازك أبدًا. كما أن المعاينة آمنة، لأن المحول يعطّل أي سكربت أو رابط خطير قبل أن يعرض لك النتيجة.

ما هو Markdown

Markdown طريقة بسيطة لتنسيق النص بحروف عادية. تبدأ علامة # عنوانًا، وتجعل النجوم النص عريضًا أو مائلًا، وتبدأ الشرطة عنصر قائمة. لذلك يبقى النص سهل القراءة حتى قبل تحويله.

ابتكره جون غروبر عام 2004، وقد وُثق تاريخه وتنويعاته بالتفصيل. واليوم يعمل به GitHub وReddit وSlack وNotion وJekyll وHugo وعدد لا يحصى من مواقع التوثيق.

تحويل Markdown إلى HTML

اكتب Markdown أو الصقه في المربع الأول. يتحدث HTML أثناء الكتابة، مع العناوين والفقرات والقوائم والروابط والصور والاقتباسات وكتل الشيفرة في أماكنها. ثم انسخه أو نزّله كملف .html.

تحتفظ كتل الشيفرة بلغتها، لذلك يصبح ```js عنصر code يحمل الصنف language-js. وهذا بالضبط ما تبحث عنه أدوات تلوين الصيغة مثل Prism وhighlight.js.

تحويل HTML إلى Markdown

الصق HTML في المربع الثاني فيظهر Markdown في المربع الأول. يحتفظ المحول بالعناوين والنص العريض والمائل والروابط والصور والقوائم والاقتباسات والشيفرة والجداول. وفي المقابل يحذف السكربتات والأنماط والإطارات المضمنة، إذ لا مكان لها في Markdown.

يمكنك اختيار شرطة أو نجمة لعناصر القوائم، وعلامات # أو خط سفلي للعناوين العليا. وبذلك يطابق الناتج الأسلوب الذي يستخدمه مشروعك أصلًا.

جداول GitHub وقوائم المهام والمزيد

عند تفعيل إضافات GitHub يفهم المحول الميزات التي يستخدمها الناس يوميًا على GitHub. أي الجداول مع محاذاة الأعمدة، وقوائم المهام بمربعات الاختيار، والشطب بعلامتي تيلدا، وعناوين الويب المجردة التي تتحول إلى روابط تلقائيًا.

تتبع هذه الإضافات GitHub Flavored Markdown، وهي اللهجة التي يشرحها GitHub في دليل قواعد الكتابة والتنسيق الخاص به. لكن إذا احتجت إلى Markdown صارم وبسيط، فأوقفها.

قواعد Markdown التي يتبعها

تأتي القواعد الأساسية من مواصفة CommonMark، وهي المعيار الذي تتشاركه معظم الأدوات الحديثة، وقد سجلتها IETF مع بقية اللهجات في RFC 7764. ويغطي ذلك الحالات الشائعة: العناوين والتوكيد والروابط والروابط المرجعية والقوائم والقوائم المتداخلة والاقتباسات والشيفرة. لكن بعض الحالات النادرة في المواصفة الكاملة قد تختلف قليلًا.

آمن مهما لصقت

يمكن أن يحتوي Markdown على HTML خام، وبهذه الطريقة تتعرض مواقع كثيرة للهجوم. لذلك يعرض هذا المحول افتراضيًا وسوم HTML داخل Markdown كنص عادي. وإذا كنت تثق بالمصدر، ففعّل خيار السماح بوسوم HTML الخام، فيحتفظ المحول بالوسوم لكنه يزيل السكربتات والإطارات ومعالجات الأحداث.

وفي كل الأحوال يفحص المحول كل رابط. يصبح الرابط إلى javascript: أو ما يشبهه علامة # غير ضارة، ويخبرك جدول الفحوص بعدد الروابط التي غيّرها.

فحوص تكشف الأخطاء الشائعة

أسفل المعاينة يفحص جدول الفحوص النتيجة. فهو ينبّه عند تخطي مستوى عنوان، مثل H2 يليه H4، وهو ما يربك قارئات الشاشة ومحركات البحث. كما يشير إلى الصور التي بلا نص بديل والصفحات التي فيها أكثر من H1.

ولمراجعة كاملة لعناوين صفحة منشورة، يقرأ محلل وسوم العناوين لدينا أي رابط ويعرض مخططه.

Markdown لملفات README

يبدأ كل مشروع تقريبًا على GitHub بملف README.md. لذلك إذا كانت وثائقك في صفحة HTML قديمة، فالصقها في مربع HTML وانسخ Markdown، وسيصبح ملف README جاهزًا في ثوانٍ.

وينجح الأمر نفسه في الاتجاه الآخر. فمثلًا عندما يريد عميل ملف README كصفحة ويب، حوّل Markdown إلى HTML وضعه في أي قالب.

Markdown في مولدات المواقع الثابتة

تبني Jekyll وHugo وEleventy وAstro وDocusaurus مواقع الويب من ملفات Markdown. لذلك يعني نقل موقع قديم إلى أحدها عادةً تحويل صفحات HTML كثيرة إلى Markdown أولًا، وهذا المحول يتولى ذلك صفحةً تلو الأخرى.

قبل أن تعتمد الملفات، راجع جدول الفحوص. فهو يشير إلى مستويات العناوين المتخطاة والصور التي بلا نص بديل، وكلاهما سينشره الموقع الثابت كما هو.

محتوى من Word أو Google Docs

النسخ من Word أو Google Docs يجلب معه عادةً كثيرًا من التنسيق المخفي. الصق النص أولًا في نظام إدارة المحتوى أو في مسودة بريد، ثم انسخ HTML والصقه هنا. يحتفظ المحول بالبنية مثل العناوين والقوائم والروابط، ويترك الخطوط والألوان جانبًا.

ونتيجة لذلك تحصل على Markdown نظيف يمكنك حفظه وتعديله وإعادة استخدامه في أي مكان، من دون الفوضى التي تضيفها برامج المكتب.

الكتابة دون ترك لوحة المفاتيح

يفضل كثير من الكتّاب Markdown لأنهم لا يحتاجون إلى الفأرة أبدًا. فبدلًا من النقر على شريط أدوات، تكتب نجمتين للخط العريض أو علامة # لعنوان، وتحافظ على تسلسل أفكارك. ثم تحوّل هذه الصفحة المسودة إلى HTML بخطوة واحدة. وفي الوقت نفسه تبقى الملاحظات الأصلية مقروءة في أي محرر نصوص عادي، حتى بعد سنوات.

كتابة الجداول بشكل صحيح

يحتاج الجدول إلى أمرين: صف عناوين، وتحته مباشرةً صف من الشرطات بين خطوط عمودية. ومن دون صف الفصل هذا يقرأ المحول الأسطر كنص عادي، فلا يظهر الجدول أبدًا.

يمكن أن تكون بقية الصفوف غير متساوية، لأن المحول يرتب الخلايا نيابةً عنك. إضافةً إلى ذلك، تحدد النقطتان على أي جانب من الشرطات محاذاة العمود، وتعرضها المعاينة فورًا.

وأخيرًا، اجعل كل جدول بسيطًا. لا يستطيع Markdown دمج الخلايا، لذا إذا احتاج تصميم إلى ذلك فأبقِ الجدول بصيغة HTML في صفحتك.

أين يستخدمه الناس

يكتب المحررون بـ Markdown ثم يلصقون HTML في نظام إدارة محتوى لا يدعم Markdown. وينقل المطورون وثائق HTML القديمة إلى موقع Markdown. كما تحوّل فرق الدعم صفحات المساعدة إلى قاعدة معرفة، وينظف الطلاب ملاحظات نسخوها من الويب.

وفي كل حالة يوفر التصميم ثنائي الاتجاه الوقت. يمكنك التحويل ثم تعديل Markdown ثم التحويل من جديد، دون إعادة كتابة أي شيء.

نصائح لكتابة Markdown نظيف

اترك سطرًا فارغًا بين الكتل، مثل ما قبل القائمة أو بعد العنوان. أزح عناصر القوائم المتداخلة بمسافتين أو أربع، وأحط الشيفرة بثلاث علامات ` بدلًا من إزاحتها. كما أن عليك إعطاء كل صورة وصفًا قصيرًا داخل الأقواس المربعة.

عندما تنتهي، احسب الكلمات بـعداد الكلمات لدينا، أو افحص عنوان الصفحة ووصفها عبر معاينة مقتطف نتائج البحث.