Markdown إلى HTML

حول Markdown إلى HTML

نبذة عن Markdown إلى HTML

تحول أداة Markdown إلى HTML نص Markdown إلى ملف HTML5 جاهز للحفظ، أو إلى جزء HTML تلصقه في صفحة. تقرأ مكتبة marked النص مع تفعيل GitHub Flavored Markdown (الجداول، وقوائم المهام، والنص المشطوب، والعناوين المكتوبة كما هي التي تصبح روابط)، وترقم الحواشي السفلية المكتوبة [‎^1‎] وتسرد في النهاية. افتراضيا، يوضع الناتج داخل doctype وعنصر html وhead يعلن ترميز UTF-8 وbody؛ وتضيف «العنوان» و«اللغة (lang)» و«أنماط أساسية» عنوانا وسمة lang وورقة أنماط، ويحذف اختيار «جزء HTML (محتوى body فقط)» في «الإخراج» هذا الغلاف. تحتفظ كتل الكود بلغتها كفئة (language-js)، وتهرب المحارف مثل ‎<‎ داخل الكود. ينسخ HTML الخام الموجود في Markdown دون تغيير، بما فيه السكربتات، إلا إذا حددت «إزالة السكربتات ومعالجات الأحداث»، فينظف DOMPurify كود HTML. وتعرض «المعاينة» الصفحة كما يرسمها المتصفح، مع حظر السكربتات. يمكن لصق Markdown أو فتحه من ملف ‎.md أو ‎.markdown أو ‎.txt.

مثال

مخرج كود التحويل في الصفحة نفسها لعنوان، وكود داخل السطر، وكتلة JavaScript محاطة بعلامات.

Markdown

# ملاحظات

استخدم `a < b` في **الكود**.

```js
if (a < b) run();
```

مخرج HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<h1>ملاحظات</h1>
<p>استخدم <code>a &lt; b</code> في <strong>الكود</strong>.</p>
<pre><code class="language-js">if (a &lt; b) run();
</code></pre>
</body>
</html>

كيف تحول Markdown إلى ملف HTML

  1. 1الصق نص Markdown في مربع «Markdown»، أو انقر على «فتح ملف» لتحميل ملف ‎.md أو ‎.markdown أو ‎.txt.
  2. 2اختر «الإخراج»، وللمستند الكامل املأ «العنوان» و«اللغة (lang)» أو حدد «أنماط أساسية»؛ ثم حدد المربعات التي تحتاجها، مثل «الحواشي السفلية» أو «إزالة السكربتات ومعالجات الأحداث».
  3. 3انقر على «تحويل»، الذي يصبح متاحا بمجرد ألا يكون المربع فارغا.
  4. 4راجع الكود في «مخرج HTML» والصفحة في «المعاينة»، ثم انقر على «نسخ» أو استخدم «تنزيل» لحفظه باسم document.html.

الصيغ والحدود

الإدخال
نص Markdown، ملصق أو مفتوح من ملف ‎.md أو ‎.markdown أو ‎.txt، يقرأ وفق قواعد CommonMark وGitHub Flavored Markdown، مع الحواشي السفلية
الإخراج
مستند HTML واحد: doctype وhead يعلن ترميز UTF-8 وbody، مع العنوان وسمة lang والأنماط الأساسية التي تختارها؛ أو كود HTML الخاص بالـ body وحده
الامتدادات
الجداول وقوائم المهام والنص المشطوب والعناوين المحولة إلى روابط (GitHub Flavored Markdown، ويمكن تعطيله)؛ الحواشي السفلية؛ معرفات id للعناوين؛ فواصل الأسطر المفردة كعناصر br عند الطلب
HTML الخام
ينسخ كما هو مكتوب، أو ينظفه DOMPurify عند تحديد «إزالة السكربتات ومعالجات الأحداث»
التنزيل
document.html

أين يحول نص Markdown الخاص بك

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

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

هل يتضمن الإخراج صفحة HTML كاملة؟

نعم. يوضع كود HTML داخل doctype وعنصر html وhead يعلن ترميز UTF-8 وbody، لكي تظهر الحروف غير اللاتينية بشكل صحيح عند فتح الملف. املأ «العنوان» و«اللغة (lang)»، أو حدد «أنماط أساسية»، لإضافتها؛ واختر «جزء HTML (محتوى body فقط)» في «الإخراج» للحصول على كود HTML الخاص بالـ body وحده.

هل يحتفظ بكود HTML الخام الموجود في Markdown؟

نعم، كما هو مكتوب، إلا إذا حددت «إزالة السكربتات ومعالجات الأحداث»: وإلا فإن عنصر script أو سمة onclick في Markdown ينتهي في الملف. عند تحديد المربع، يزيلهما DOMPurify، ومعهما روابط javascript:. وفي كل الأحوال، لا تشغل المعاينة أي سكربت.

هل المعاينة آمنة مع كود HTML لا أثق به؟

نعم. تعرض المعاينة في إطار معزول لا يمكن فيه تشغيل السكربتات ولا معالجات الأحداث، مهما كان محتوى HTML. أما الملف الذي تنزله فأمر آخر: حدد «إزالة السكربتات ومعالجات الأحداث» قبل التحويل إذا كان نص Markdown من شخص آخر.

هل الحواشي السفلية مدعومة؟

نعم. اكتب إحالة مثل [‎^1‎] في النص وحاشيتها في سطر مستقل، مثل [‎^1‎]: المصدر. تصبح الإحالات روابط مرقمة، وتسرد الحواشي في النهاية في قسم من الفئة footnotes، ولكل منها رابط ↩ يعود إلى إحالتها. ألغ تحديد «الحواشي السفلية» لإبقاء هذه الأقواس نصا.

هل تلون صيغة كتل الكود؟

لا. تصبح الكتلة المحاطة بعلامات والموسومة js عنصري pre وcode بالفئة language-js، جاهزة لأداة تلوين مثل Prism أو highlight.js، لكن لا تضاف أي ألوان هنا.

هل يمكنني تحويل ملف ‎.md مباشرة؟

نعم. انقر على «فتح ملف» واختر ملف ‎.md أو ‎.markdown أو ‎.txt؛ يحمل نصه في مربع Markdown، ثم يمكن حفظ الناتج بزر التنزيل.

نصائح وحيل

  • ✓حدد «مراسي العناوين (id)» لإعطاء كل عنوان معرف id، كما يفعل GitHub، لكي ينقل رابط مثل ‎#installation إليه مباشرة.