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>.

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

محوّل ترميز ملفات النصوص

حوّل النص بين UTF-8 وUTF-16 وLatin-1 وWindows-1252 وترميزات أخرى لإصلاح الأحرف المشوّهة.

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مولّد ملف .gitignore

اجمع قواعد استبعاد المشروع لـ Laravel وNode.js وPython وRails. انسخ الناتج أو نزّل ملف ZIP يحتوي على .gitignore، مع إبقاء القواعد الشخصية منفصلة.

مُحقق تنسيق XSD

قم بالتحقق من وثيقة XML وفقًا لمخطط XSD، وعرض أي اختلافات بين العناصر وأنواعها مع تحديد أرقام السطور بدقة.

مولد ملف tsconfig.json

أنشئ ملف tsconfig.json نظيفا باختيار target وmodule وmoduleResolution وJSX وأعلام الصرامة الشائعة، ثم انسخ الإعداد المولّد إلى مشروعك.

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