Softonic

مولّد صور Markdown

خطوة 1 / 3
التالي

صيغة الصور في Markdown، ![alt](src "title")، يسهل الوقوع فيها في الخطأ: قد تنسى قوسًا، أو تُغفل النص البديل، أو تخلط بينها وبين صيغة الرابط، فيعرض مستندك عنصرًا نائبًا معطوبًا. يتلقّى هذا المولّد رابط الصورة، والنص البديل، وعنوانًا اختياريًا، ووجهة رابط اختيارية، ثم يُخرج صيغة Markdown بالنمط المضمّن وبنمط المرجع معًا، لتتمكّن من لصق الصيغة التي تناسب مستندك.

كيفية إنشاء صيغة صورة Markdown

  1. 1

    الصق رابط الصورة

    رابط مطلق (https://...) أو مسار نسبي (/images/hero.png).

  2. 2

    اكتب النص البديل

    ما تعرضه الصورة في جملة واحدة. ضروري لإتاحة الوصول.

  3. 3

    أضف عنوانًا (اختياري)

    يظهر عند تمرير المؤشر فوقه في معظم أدوات العرض.

  4. 4

    أحِطها برابط (اختياري)

    أدخل رابطًا لجعل الصورة قابلة للنقر.

  5. 5

    انسخ المقتطف

    احصل على المخرج المضمّن `![alt](src)` أو مخرج نمط المرجع `![alt][ref]`.

الأشكال الأربعة للصيغة

مضمّن، بدون عنوان:

![الصورة الرئيسية للمنتج](/images/hero.png)

مضمّن، مع عنوان:

![الصورة الرئيسية](/images/hero.png "الصورة الرئيسية، التُقطت في أكتوبر 2026")

صورة قابلة للنقر (صورة محاطة برابط):

[![الصورة الرئيسية](/images/hero.png)](https://example.com/buy)

نمط المرجع (يُبقي الروابط الطويلة خارج الفقرة):

![الصورة الرئيسية][hero]

[hero]: /images/hero.png "الصورة الرئيسية، التُقطت في أكتوبر 2026"

النص البديل مهم

  • إتاحة الوصول. تنطق برامج قراءة الشاشة النص البديل؛ والنص البديل الفارغ يعني أن الصورة غير مرئية عمليًا للمستخدم ذي الإعاقة البصرية.
  • تحسين محركات البحث (SEO). تعتمد محركات البحث على النص البديل لفهم محتوى الصورة، وغيابه يضرّ بزيارات البحث عن الصور.
  • التدهور الرشيق. إذا فشل تحميل الصورة، فإن ما يراه المستخدمون هو النص البديل.

النص البديل الجيد والسيّئ

القصد النص البديل الجيد النص البديل السيّئ
صورة منتج “كوب خزفي أحمر على مكتب خشبي، المقبض إلى اليسار” “صورة كوب”
لقطة شاشة “صفحة تسجيل دخول بها حقول البريد الإلكتروني وكلمة المرور وأزرار SSO” “screenshot.png”
زخرفي "" (نص بديل فارغ للزخرفة الخالصة) “صورة زخرفية”
رسم معلوماتي “مخطط أعمدة: ارتفعت الإيرادات من مليون ريال في 2023 إلى 3 ملايين ريال في 2026” “مخطط أعمدة”

مزالق شائعة

  • لا تبدأ النص البديل بعبارة “صورة لـ”، فبرامج قراءة الشاشة تُعلن بالفعل أنه صورة.
  • المسارات المطلقة مقابل النسبية. تتعطّل المسارات النسبية عند عرض المستند خارج مجلده (مثلًا في معاينة GitHub). استخدم المسار المطلق عند الشك.
  • المسافات في الروابط تحتاج إلى ترميز URL: استخدم %20 بدلًا من المسافة، وإلا فلن تُحمَّل الصورة.

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

ليس في Markdown الصِّرف. تلجأ معظم أدوات العرض (GFM وDocusaurus وMkDocs) إلى HTML الخام لتحديد الأبعاد، <img src="..." width="400" alt="...">. تدعم بعض اللهجات ![alt](url =400x) لكنها ليست عامة.

النص البديل (alt) هو النص الذي تنطقه برامج قراءة الشاشة ويظهر عند فشل تحميل الصورة. أما العنوان (title) فهو التلميح الذي يظهر عند تمرير المؤشر، وهو اختياري عادةً ويُتجاهَل على الأجهزة اللمسية.

عندما تظهر الصورة أكثر من مرة، أو عندما يكون الرابط طويلًا ويُزحم الفقرة. يُبقي نمط المرجع النص سهل القراءة ويجعل تغيير الرابط تعديلًا واحدًا فقط.

نعم، تضمين صورة داخل رابط ([![alt](img)](url)) هو CommonMark قياسي. والمخرج المعروض هو رابط تشعّبي يُحيط بعنصر <img>.

أدوات ذات صلة

مرجع جدول 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.

الأداة متاحة بلغات أخرى