معاينة Markdown
اكتب على اليسار، وشاهد تصيير HTML على اليمين. تدعم المعاينة صيغة Markdown على طراز GitHub: الجداول، وقوائم المهام، وكتل الكود المسيَّجة مع إبراز الصياغة، والشطب، وروابط URL التلقائية، وكود HTML المضمَّن. وهي مفيدة لإعداد ملف README قبل الالتزام (commit)، أو للتحقق من شكل تعليق على طلب سحب (PR)، أو ببساطة لتعلُّم صياغة Markdown عبر مشاهدة تصيير كل ضغطة مفتاح.
كيفية استخدام المعاينة
-
1
اكتب Markdown
تستقبل اللوحة اليسرى نص Markdown الخام. كل تغيير يُعيد تصيير اللوحة اليمنى فورًا.
-
2
شاهد معاينة HTML
تعرض اللوحة اليمنى الناتج المُصيَّر بتنسيق يشبه GitHub.
-
3
بدّل الوضع
عرض جنبًا إلى جنب، أو المعاينة فقط، أو المصدر فقط للكتابة دون تشتيت.
-
4
انسخ HTML
احصل على HTML المُصيَّر إذا احتجت إلى لصقه في برنامج بريد إلكتروني أو نظام إدارة محتوى (CMS).
ما تدعمه هذه المعاينة
- CommonMark: العناوين، والفقرات، والتأكيد، والقوائم، والاقتباسات، وكتل الكود، والروابط، والصور، والخطوط الأفقية.
- إضافات GFM: الجداول مع محاذاة الأعمدة، وقوائم المهام (
- [ ]و- [x])، والشطب باستخدام~~، وروابط URL التلقائية، وكتل الكود المسيَّجة مع تلميحات اللغة. - إبراز الصياغة: أكثر من 100 لغة عبر highlight.js، JavaScript وPython وGo وRust وSQL وYAML وغيرها.
- HTML الخام: يُمرَّر HTML المضمَّن كما هو (مع تنقيته حفاظًا على الأمان).
- الرياضيات (اختياري):
$...$مضمَّنة و$$...$$ككتلة إذا فعّلت إضافة الرياضيات.
غير مدعوم
- روابط الويكي المخصّصة على طراز Obsidian (
[[Page]])، خاصة بـ Obsidian فقط. - عناصر div المسيَّجة الخاصة بـ Pandoc (
:::)، خاصة بـ Pandoc فقط. - التضمينات على جانب الخادم (server-side includes) أو وسوم القوالب
{% ... %}.
الاستخدامات النموذجية
- إعداد ملف README خارج بيئة التطوير المتكاملة (IDE) ثم لصق النسخة النهائية.
- التحقق من تنسيق تعليقات PR قبل النشر، فحقل التعليقات في GitHub لا يعاين كتل الكود بشكل صحيح.
- تحويل الملاحظات إلى HTML عندما تحتاج إلى لصق محتوى منسَّق في بريد إلكتروني أو في نظام إدارة محتوى (CMS) يقبل HTML الخام.
- تعليم Markdown، العرض جنبًا إلى جنب يجعل الصياغة واضحة.
الأداء
يستخدم التصيير مُحلِّل Markdown-it مع إضافة GFM، ويعمل بالكامل داخل المتصفح. تُصيَّر المستندات التي يبلغ حجمها بضع مئات من الكيلوبايتات في أجزاء من الثانية؛ أما الملفات الكبيرة جدًا (كتاب كامل في ملف واحد) فقد تتلعثم أثناء الكتابة، قسّمها إلى فصول إذا حدث ذلك.
التصدير
- نسخ HTML يمنحك عنصر
<div>مع المحتوى المُصيَّر، بما في ذلك فئات التنسيق. - تنزيل .md يحفظ المصدر.
- الطباعة إلى PDF من مربع حوار الطباعة في متصفحك يُنتج نسخة PDF منسَّقة من العرض المُصيَّر.
الأسئلة الشائعة
يطبّق GitHub لغة CSS خاصة به فوق GFM. ينبغي أن يتطابق ناتج HTML؛ أما التنسيق (الخطوط والمسافات) فهو خاص بـ GitHub. للحصول على تطابق تام، استخدم مبدّل السمة “معروض على GitHub”.
نعم، إذا فعّلت إضافة الرياضيات، تُصيَّر $...$ المضمَّنة و$$...$$ ككتلة باستخدام KaTeX. وهي معطّلة افتراضيًا للحفاظ على خفة الصفحة.
تتم تنقيته، تمرّ الوسوم الآمنة مثل <div> و<span> و<table> و<img>، بينما يُحذف <script> ومعالِجات الأحداث المضمَّنة.
تعمل مئات الكيلوبايتات بسلاسة. للملفات الكبيرة جدًا، أوقِف التصيير المباشر وصيِّر عند الطلب.
يجري التصيير بالكامل على جانب العميل، ولا يُرسل المحتوى إلى أي مكان. عند تحديث الصفحة تُفقد المسوّدات ما لم يحتفظ المتصفح بحالة النموذج.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
مرجع اختصارات لوحة المفاتيح
ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.
مولد EditorConfig
أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.
مدقق البريد الإلكتروني
تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.
ورقة مرجعية سريعة لـ Markdown
مرجع Markdown عملي مع معاينات فعلية وأمثلة جاهزة للنسخ للعناوين والقوائم والجداول والكود والروابط والصور وصياغة GFM.
الأداة متاحة بلغات أخرى
- Aperçu Markdown [FR]
- Markdown 미리보기 [KO]
- Visualizador de Markdown [PT]
- Trình xem trước Markdown [VI]
- Markdown-förhandsvisare [SV]
- Markdown-preview [NL]
- Markdown-Vorschau [DE]
- Previsualizador de Markdown [ES]
- Pratinjau Markdown [ID]
- Markdownプレビュー [JA]
- ตัวแสดงตัวอย่าง Markdown [TH]
- Podgląd Markdown [PL]
- Markdown Previewer [EN]
- Visualizzatore Markdown [IT]
- Предпросмотр Markdown [RU]
- Markdown Önizleme [TR]
- Markdown 预览器 [ZH]