نحوه افزودن تصویر در Markdown

مقدمه

Markdown سینتکسی ساده و مبتنی بر متن-ساده برای قالب‌بندی اسناد—including جاسازی تصاویر—برای تولید محتوا فراهم می‌کند. سادگی‌اش به نویسندگان اجازه می‌دهد روی محتوا تمرکز کنند؛ نه تگ‌های پیچیده HTML. اما قوت Markdown در سادگی می‌تواند محدودیتی هم باشد وقتی به کنترل بیشتری روی نحوه نمایش تصاویر نیاز دارید. این مقاله سینتکس بنیادی Markdown برای تصاویر را بررسی می‌کند.

نکات کلیدی

• سینتکس پایه Markdown برای تصاویر ![Alt text](image_url) است؛ که در آن متن جایگزین (Alt Text) تصویر را توصیف و URL به مسیر محلی یا منبع ریموت اشاره می‌کند.
• برای ساخت تصویر لینک‌شده، سینتکس تصویر را درون لینک Markdown قرار دهید: [![Alt text](image_url)](link_url).
• Markdown به‌صورت نیتیو تغییر اندازه یا چینش (Alignment) تصویر را پشتیبانی نمی‌کند. برای این موارد از تگ HTML یعنی <img> با ویژگی‌های width، height یا style استفاده کنید.
• متن جایگزین برای دسترس‌پذیری حیاتی است. کوتاه، مشخص و متمرکز بر چیزی که تصویر در بافتش منتقل می‌کند نگهش دارید—صفحه‌خوان‌ها (Screen Reader) از قبل اعلام می‌کنند که این یک تصویر است.
• بیشتر پردازشگرهای Markdown از HTML خام درون‌خطی پشتیبانی می‌کنند؛ که به شما اجازه می‌دهد <img> با CSS درون‌خطی برای ابعاد، شناورسازی (Float)، وسط‌چین کردن، بارگذاری تنبل (Lazy Loading) و سایر استایل‌های پیشرفته استفاده کنید.

پیش‌نیازها

آشنایی عمومی با HTML5. برای مرور جامعی از زبان نشانه‌گذاری HTML5، سری «نحوه ساخت وب‌سایت با HTML» در پارمین کلود را کاوش کنید.

افزودن تصویر در Markdown

اینجا سینتکس افزودن تصویر در Markdown است. عنوان (Title) اختیاری است:

document.md
![Alt text](/images/boo.svg "a title")

این به HTML زیر منجر می‌شود:

<img title="a title" alt="Alt text" src="/images/boo.svg">

تصویر لینک‌شده

با سینتکس Markdown برای لینک‌ها، این‌طور می‌توانید تصویر لینک‌شده داشته باشید:

document.md
[![App Platform](/images/app_platform.png)](https://www.parmincloud.com/products/app-platform)

تصویر لینک‌شده بالا این‌طور نمایش داده می‌شود:

تغییر اندازه تصویر در Markdown

Markdown خودش به‌صورت مستقیم تغییر اندازه تصاویر را پشتیبانی نمی‌کند. اما می‌توانیم با استفاده از تگ HTML یعنی <img> این مشکل را دور بزنیم. بگذارید تصویر بالا را تغییر اندازه دهیم:

<img src="/images/app_platform.png" width="400">

این تصویر را به عرض ذکرشده—در این مورد ۴۰۰—تغییر اندازه می‌دهد.

این روش توسط بیشتر پلتفرم‌هایی که Markdown را همراه پشتیبانی HTML ارائه می‌دهند—including گیت‌هاب و ژوپیتر نوت‌بوک—پشتیبانی می‌شود.

بهترین روش‌های متن جایگزین برای دسترس‌پذیری

متن جایگزین (Alt Text)—مخفف Alternative Text—توضیح کوتاهی است که توضیح می‌دهد تصویر چه چیزی نشان می‌دهد. عمدتاً توسط صفحه‌خوان‌ها برای کمک به افراد دارای اختلال بینایی برای فهم محتوای تصاویر استفاده می‌شود. وقتی هم تصاویر درست بارگذاری نمی‌شوند به کار می‌آید. پس حیاتی است که متن‌های جایگزین شفاف، مشخص و متمرکز بر آنچه درباره تصویر در بافتش مهم است باشند.

اینجا برخی از بهترین روش‌ها آمده:

• کوتاه نگهش دارید. بیشتر وقت‌ها، یک جمله کافی است.
• عناصر کلیدی را توصیف کنید؛ نه هر جزئیات را. فکر کنید چه چیزی لازم باشد کسی بفهمد اگر نمی‌توانست تصویر را ببیند.
• لازم نیست بگویید «تصویری از» یا «عکسی از»؛ چون صفحه‌خوان‌ها از قبل این کار را می‌کنند. اما ذکر کنید اگر لوگو، تصویرسازی یا نقاشی است.
• از استفاده همان متنی که کنار تصویر است بپرهیزید.

برای دانستن بیشتر درباره دسترس‌پذیری، می‌توانید به «دسترس‌پذیری وب برای مبتدیان» در پارمین کلود مراجعه کنید.

راه‌حل‌های جایگزین HTML و استایل درون‌خطی

در حالی که Markdown سینتکسی ساده و کارآمد برای جاسازی تصاویر فراهم می‌کند، محدودیت‌های ذاتی‌ای دارد وقتی بحث استایل پیشرفته یا فراهم کردن گزینه‌های جایگزین برای سناریوهای مختلف است. برای این موارد، می‌توانید HTML خام را مستقیماً درون سند Markdown خودتان به کار ببرید. بیشتر پردازشگرهای Markdown از جاسازی HTML خام پشتیبانی می‌کنند؛ که آن را به راه‌حل جایگزین قدرتمندی تبدیل می‌کند وقتی سینتکس Markdown کافی نیست.

از تگ‌های HTML یعنی <img> به‌جای سینتکس Markdown برای تصاویر استفاده کنید وقتی لازم است:

• ابعاد دقیق تعیین کنید: Markdown به‌صورت نیتیو ویژگی‌های width یا height را پشتیبانی نمی‌کند.
• استایل پیچیده اعمال کنید: فراتر از متن جایگزین و عنوان (Tooltip) پایه، Markdown راه مستقیمی برای افزودن استایل‌های CSS مثل حاشیه (Border)، Padding یا چینش ارائه نمی‌دهد.
• تصاویر واکنش‌گرا (Responsive) پیاده کنید: استفاده از <picture> یا srcset برای منابع تصویر متفاوت بر اساس اندازه صفحه یا رزولوشن.
• زیرنویس تصویر (Caption) اضافه کنید: در حالی که برخی گونه‌های Markdown ممکن است افزونه داشته باشند، Markdown استاندارد سینتکس اختصاصی زیرنویس ندارد.
• ویژگی‌های سفارشی اضافه کنید: هر ویژگی HTMLای که Markdown پشتیبانی نمی‌کند (مثلاً loading="lazy"، class، id).

استفاده از HTML در Markdown به شما اجازه می‌دهد از CSS درون‌خطی برای استایل دادن به تصاویر هم استفاده کنید. می‌توانید از ویژگی style برای اعمال مستقیم ویژگی‌های CSS روی عنصر HTML استفاده کنید. مثلاً:

<img src="image_url" alt="Description of image" style="property: value; property2: value2;">

چند استایل درون‌خطی دیگر هم هست که می‌توانید برای تصاویر استفاده کنید:

اندازه‌گذاری:

<img src="image.jpg" alt="A beautiful landscape" style="width: 300px; height: 200px;">

چینش (Float):

<img src="image.jpg" alt="A floating image" style="float: right; margin-left: 15px;">

وسط‌چین کردن (نیازمند عنصر Wrapper): برای وسط‌چین کردن تصویر، باید آن را در عنصر HTML سطح-بلاکی مثل <div> قرار دهید و تراز متن یا Margin خودکار اعمال کنید:

<div style="text-align: center;">
  <img src="image.jpg" alt="Centered image" style="display: block; margin: 0 auto;">
</div>

سوالات متداول

۱. سینتکس درست برای درج تصویر در Markdown چیست؟

سینتکس پایه برای درج تصویر این است:

![Alt text](image_url)

image_url می‌تواند مسیر/URL تصویر باشد.

۲. چطور تصویر محلی را در Markdown اضافه کنم؟

برای افزودن تصویر محلی در Markdown، image_url را در سینتکس پایه با مسیر محلی تصویر جایگزین کنید. مثلاً:

document.md
![Alt text](/Users/username/Pictures/example.png)

هم‌چنین می‌توانید از مسیر نسبی استفاده کنید:

document.md
![Alt text](example.png)

اینجا تصویر در همان پوشه فایل Markdown شماست.

۳. آیا می‌توانم تصاویر را در Markdown تغییر اندازه یا وسط‌چین کنم؟

برای تغییر اندازه تصویر، از تگ HTML یعنی <img> استفاده کنید:

<img src="image_url" width="400" height="400">

برای وسط‌چین کردن تصویر، می‌توانیم از ویژگی align استفاده کنیم:

<p align="center">
  <img src="/images/app_platform.png" alt="Alt text" width="600"/>
</p>

۴. چطور از تصاویر در README گیت‌هاب استفاده کنم؟

برای استفاده از تصاویر در گیت‌هاب، می‌توانید:

در مخزن گیت‌هابتان پوشه‌ای بسازید، همه تصاویر را در آن پوشه آپلود کنید و از مسیر نسبی در سینتکس پایه استفاده کنید:

document.md
![Alt text](./images/screenshot.png)

به‌عنوان جایگزین، می‌توانید تصاویر را در مخزن ذخیره‌سازی مورد علاقه‌تان آپلود و URL تصویر را اضافه کنید.

نتیجه‌گیری

در این آموزش، سینتکس هسته‌ای جاسازی تصاویر در Markdown را پوشش دادید؛ شامل تصاویر پایه، تصاویر لینک‌شده و استفاده از HTML خام برای تغییر اندازه و استایل پیشرفته. هم‌چنین بهترین روش‌های متن جایگزین برای دسترس‌پذیری و نحوه اعمال CSS درون‌خطی را وقتی سینتکس استاندارد Markdown کافی نیست، یاد گرفتید.

حالا می‌توانید تصاویر را در اسناد Markdown جاسازی، ابعاد و چینش‌شان را با HTML کنترل و متن جایگزین قابل‌دسترس بنویسید. این تکنیک‌ها در فایل‌های README گیت‌هاب، سایت‌های مستندات، وبلاگ‌ها و هر پلتفرمی که Markdown را همراه پشتیبانی HTML رندر می‌کند، اعمال می‌شوند.