مارک‌داون (Markdown) به همراه معادل‌های HTML

بخش اول: ترفندها و المان‌های پایه در مارک‌داون

مارک‌داون یک زبان نشانه‌گذاری (Markup Language) سبک است که به شما اجازه می‌دهد با استفاده از متن ساده (Plain Text)، نوشته‌های خود را قالب‌بندی (Format) کنید. این متن‌ها به راحتی به HTML تبدیل می‌شوند تا در وب‌سایت‌ها نمایش داده شوند.

در این مقاله، تمام ابزارها و المان‌های مارک‌داون را همراه با مثال‌های زنده و معادل HTML آن‌ها یاد خواهید گرفت.

---

تیترها (Headings)

برای ساختن تیترها در مارک‌داون از علامت هشتگ (#) استفاده می‌شود. تعداد هشتگ‌ها، سطح تیتر (از ۱ تا ۶) را مشخص می‌کند.

ساختار و مقایسه:

سطح تیتر	کد مارک‌داون	کد HTML
تیتر اصلی (بزرگترین)	# تیتر سطح یک	<h1>تیتر سطح یک</h1>
تیتر فرعی	## تیتر سطح دو	<h2>تیتر سطح دو</h2>
زیرعنوان	### تیتر سطح سه	<h3>تیتر سطح سه</h3>
تیتر کوچک	#### تیتر سطح چهار	<h4>تیتر سطح چهار</h4>

نکته: حتماً بعد از علامت # یک فاصله (Space) بگذارید، در غیر این صورت برخی رندرکننده‌ها آن را به عنوان تیتر شناسایی نمی‌کنند.

---

قالب‌بندی متن (Text Formatting)

برای تاکید روی کلمات، بولد کردن یا خط زدن متن می‌توانید از ستاره (*) یا آندرلاین (_) استفاده کنید.

ساختار و مقایسه:

نوع قالب‌بندی	کد مارک‌داون	کد HTML	خروجی رندر شده
ضخیم (Bold)	**این متن بولد است**	<strong>این متن بولد است</strong>	این متن بولد است
مورب (Italic)	*این متن ایتالیک است*	<em>این متن ایتالیک است</em>	این متن ایتالیک است
ترکیبی (Bold & Italic)	***این متن هر دو است***	<strong><em>این متن هر دو است</em></strong>	این متن هر دو است
خط‌خورده (Strikethrough)	~~این متن منقضی شده~~	<del>این متن منقضی شده</del>	~~این متن منقضی شده~~

---

لیست‌ها (Lists)

لیست‌ها به دو دسته‌ی مرتب (شماره‌دار) و نامرتب (نقطه‌ای) تقسیم می‌شوند.

لیست‌های نامرتب (Unordered Lists)

برای این کار می‌توانید از علامت‌های -، * یا + استفاده کنید.

کد مارک‌داون:

- آیتم اول
- آیتم دوم
  - زیر‌آیتم اول (با دو یا چهار فاصله جلوتر)
  - زیر‌آیتم دوم

معادل HTML:

<ul>
  <li>آیتم اول</li>
  <li>آیتم دوم
    <ul>
      <li>زیر‌آیتم اول</li>
      <li>زیر‌آیتم دوم</li>
    </ul>
  </li>
</ul>

لیست‌های مرتب (Ordered Lists)

کافی است از اعداد همراه با دات (.) استفاده کنید.

کد مارک‌داون:

1. قدم اول
2. قدم دوم
3. قدم سوم

معادل HTML:

<ol>
  <li>قدم اول</li>
  <li>قدم دوم</li>
  <li>قدم سوم</li>
</ol>

---

لینک‌ها و تصاویر (Links & Images)

ساختار لینک و تصویر در مارک‌داون بسیار شبیه به هم است، با این تفاوت که تصویر یک علامت تعجب (!) در ابتدا دارد.

لینک‌ها (Links)

فرمول: [متن لینک](آدرس URL)

• مارک‌داون: [وب‌سایت من](https://salehaskari.ir)
• HTML: <a href="https://salehaskari.ir">وب‌سایت من</a>

تصاویر (Images)

فرمول: ![متن جایگزین یا Alt](آدرس تصویر)

• مارک‌داون: ![لوگوی سایت](https://example.com/logo.png)
• HTML: <img src="https://example.com/logo.png" alt="لوگوی سایت" />

---

نقل‌قول‌ها (Blockquotes)

اگر می‌خواهید جمله‌ای را از کتاب، سایت یا شخصی نقل‌قول کنید، از علامت بزرگتر (<) استفاده کنید.

کد مارک‌داون:

> "موفقیت در برنامه‌نویسی نتیجه‌ی تکرار خطاهای کوچک و حل کردن آن‌هاست."

معادل HTML:

<blockquote>
  <p>"موفقیت در برنامه‌نویسی نتیجه‌ی تکرار خطاهای کوچک و حل کردن آن‌هاست."</p>
</blockquote>

---

قطعه کدهای برنامه‌نویسی (Code Blocks)

یکی از جذاب‌ترین بخش‌های مارک‌داون برای توسعه‌دهندگان، نحوه نمایش کدهاست.

کد درون‌خطی (Inline Code)

برای کلماتی که وسط متن معمولی هستند و می‌خواهید شکل کد به خود بگیرند (مانند نام یک متغیر یا دستور)، آن را داخل دو علامت بیک‌تیک (`) قرار دهید.

• مارک‌داون: از دستور `npm install ` استفاده کنید.
• HTML: از دستور <code>npm install</code> استفاده کنید.

بلوک کد چندخطی (Fenced Code Blocks)

برای قرار دادن چند خط کد، بالا و پایین آن را با ۳ عدد بکتیک (```) بپوشانید. همچنین می‌توانید نام زبان برنامه نویسی را بنویسید تا کد شما رنگ‌آمیزی (Syntax Highlighting) شود.

کد مارک‌داون:

```javascript
function greet(name) {
    console.log("Hello, " + name);
}
greet("Saleh");
```

معادل HTML:

<pre>
  <code class="language-javascript">
function greet(name) {
    console.log("Hello, " + name);
}
greet("Saleh");
  </code>
</pre>

---

جدول‌ها (Tables)

برای ساخت جدول در مارک‌داون از خطوط عمودی (|) برای ستون‌ها و خط تیره (-) برای جدا کردن هدر از بدنه استفاده می‌شود. همچنین با علامت : می‌توانید چیدمان متن (چپ‌چین، راست‌چین یا وسط‌چین) را مشخص کنید.

کد مارک‌داون:

| نام پروژه | زبان برنامه‌نویسی | وضعیت توسعه |
| :--- | :---: | ---: |
| وبلاگ آموزشی | PHP (Laravel) | در حال انجام (راست‌چین) |
| بازی نقاشی | Node.js | کامل شده (وسط‌چین) |
| شبیه‌ساز لینوکس | Java | کامل شده (چپ‌چین) |

معادل HTML:

<table>
  <thead>
    <tr>
      <th style="text-align: right;">نام پروژه</th>
      <th style="text-align: center;">زبان برنامه‌نویسی</th>
      <th style="text-align: left;">وضعیت توسعه</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align: right;">وبلاگ آموزشی</td>
      <td style="text-align: center;">PHP (Laravel)</td>
      <td style="text-align: left;">در حال انجام</td>
    </tr>
  </tbody>
</table>

---

چک‌لیست‌ها یا لیست‌های انجام کار (Task Lists)

برای ساخت لیست‌های کارهای روزانه یا چک‌لیست پروژه‌ها از ترکیب لیست نامرتب و کروشه استفاده می‌شود. علامت x داخل کروشه به معنی آیتم انجام‌شده است.

کد مارک‌داون:

- [x] طراحی فرانت‌اند وبلاگ
- [ ] نوشتن محتوای آموزشی مارک‌داون
- [ ] بهینه‌سازی سئو (SEO)

معادل HTML:

<ul>
  <li><input type="checkbox" checked disabled> طراحی فرانت‌اند وبلاگ</li>
  <li><input type="checkbox" disabled> نوشتن محتوای آموزشی مارک‌داون</li>
  <li><input type="checkbox" disabled> بهینه‌سازی سئو (SEO)</li>
</ul>

---

خط جداکننده (Horizontal Rule)

برای ایجاد یک خط افقی و جدا کردن بخش‌های مختلف مقاله، کافی است از سه خط تیره (---) یا سه ستاره (***) در یک خط مجزا استفاده کنید.

• مارک‌داون: ---
• HTML: <hr />

---

بخش دوم: ترفندها و المان‌های پیشرفته در مارک‌داون

خنثی‌سازی کاراکترها (Escaping Characters)

گاهی اوقات شما می‌خواهید خودِ علامت مارک‌داون (مثل * یا #) را در متن چاپ کنید، بدون اینکه تبدیل به فرمت خاصی شود. برای این کار از بک‌اسلش (\) قبل از آن کاراکتر استفاده می‌کنیم.

ساختار و مقایسه:

• کد مارک‌داون: \*این متن دیگر ایتالیک نمی‌شود\*
• معادل HTML: *این متن دیگر ایتالیک نمی‌شود*
• خروجی رندر شده: این متن دیگر ایتالیک نمی‌شود (به صورت متن معمولی همراه با ستاره‌ها)

---

لینک‌های لنگر یا داخلی (Anchor Links)

اگر مقاله‌ات خیلی طولانی است و می‌خواهی در بالای صفحه یک «فهرست مطالب» بسازی که کاربر با کلیک روی هر کدام، به بخش مربوطه در همان صفحه هدایت شود، از این روش استفاده می‌کنی.

ساختار و مقایسه:

در مارک‌داون، سیستم‌ها به طور خودکار به تیترها (Headings) یک شناسه (ID) بر اساس نام تیتر (با حروف کوچک و خط تیره به جای فاصله) می‌دهند.

• کد مارک‌داون برای دکمه‌ی کلیک: [رفتن به بخش جدول‌ها](#۷-جدول‌ها)
• معادل HTML: <a href="#۷-جدول‌ها">رفتن به بخش جدول‌ها</a>

---

درج کدهای ریاضی پیچیده (LaTeX)

بسیاری از پلتفرم‌های مدرن وبلاگ‌نویسی (مثل گیت‌هاب، مدام یا سیستم‌هایی که از ابزار ترکیبی MathJax استفاده می‌کنند) از کدهای ریاضی پشتیبانی می‌کنند. برای فرمول‌های ریاضی از علامت دلار ($) استفاده می‌شود.

ساختار و مقایسه:

کد مارک‌داون (فرمول درون‌خطی):

فرمول معروف انیشتین $E = mc^2$ است.

کد مارک‌داون (فرمول بزرگ و وسط‌چین):

$$
f(x) = \int_{-\infty}^{\infty} e^{-x^2} dx
$$

معادل HTML: در HTML خام برای این کار تگ مستقیمی نداریم و معمولاً از پکیج‌های جاوااسکریپتی مثل MathML یا کتابخانه‌های جانبی استفاده می‌شود:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup>
</math>

---

یادداشت‌های توضیحی یا پانویس (Footnotes)

برای ارجاع دادن یک کلمه به توضیحات بیشتر در انتهای صفحه (پانویس)، از علامت [^۱] استفاده می‌شود.

ساختار و مقایسه:

کد مارک‌داون:

مارک‌داون در سال ۲۰۰۴ توسط جان گروبر [^1] خلق شد.

[^1]: جان گروبر (John Gruber) نویسنده و برنامه‌نویس آمریکایی است.

معادل HTML:

مارک‌داون در سال ۲۰۰۴ توسط جان گروبر <a href="#fn1" id="ref1">[1]</a> خلق شد.

<!-- در انتهای صفحه -->
<hr>
<ol>
  <li id="fn1">جان گروبر (John Gruber) نویسنده و برنامه‌نویس آمریکایی است. <a href="#ref1">↩</a></li>
</ol>

---

استفاده از HTML خام در مارک‌داون (Raw HTML)

یکی از بزرگترین مزیت‌های مارک‌داون این است که اگر المانی را بلد نبودی یا در مارک‌داون وجود نداشت، می‌توانی کدهای HTML را مستقیماً داخل آن بنویسی! رندرکننده‌های مارک‌داون کدهای HTML را بدون دستکاری اجرا می‌کنند.

مثال‌ها:

• تغییر رنگ متن (که در مارک‌داون استاندارد وجود ندارد):

  • <span style="color:red;">این متن قرمز است</span>

• وسط‌چین کردن متن یا تصویر:

  • <p align="center">این متن وسط‌چین است</p>

• ایجاد دکمه با قابلیت باز شدن در تب جدید:

  • <a href="[https://site.com](https://site.com)" target="_blank">دانلود فایل</a>

---

المان‌های تعاملی: جزییات تاشو (Collapsible Details)

اگر می‌خواهی متنی بنویسی که کاربر با کلیک روی آن، جزییاتش باز و بسته شود (مثل بخش سوالات متداول)، چون در مارک‌داون استاندارد وجود ندارد، از تگ‌های HTML تمیز استفاده می‌کنیم.

کد مخلوط مارک‌داون و HTML:

<details>
<summary>کلیک کنید تا پاسخ سوال را ببینید</summary>

در این بخش می‌توانید متن‌های طولانی یا حتی کدهای مارک‌داون دیگر را پنهان کنید تا صفحه شلوغ نشود.
</details>

---

بخش سوم: انتخاب بهترین ادیتورهای مارک‌داون به تفکیک سیستم‌عامل

نوشتن کدهای مارک‌داون در یک ادیتور متن ساده (مثل Notepad) امکان‌پذیر است، اما استفاده از ادیتورهای تخصصی که قابلیت رندر هم‌زمان (Live Preview) یا سیستم‌های مدرن WYSIWYG (نمایش مستقیم نتیجه بدون دیدن کدهای خام) را دارند، لذت کار را چند برابر می‌کند.

در ادامه، بهترین گزینه‌ها را برای هر سیستم‌عامل بررسی می‌کنیم:

---

دسکتاپ (Windows / macOS / Linux)

در دنیای دسکتاپ، سه ابزار قدرتمند وجود دارند که به صورت مالتی‌پلتفرم روی هر سه سیستم‌عامل ویندوز، مک و لینوکس استفاده میشن. بسته به نیازت باید یکی را انتخاب کنی:

Typora (بهترین برای نویسندگان و تولیدکنندگان محتوا)

• چرا عالی است؟ تایپورا انقلابی در ادیتورهای مارک‌داون بود. این ادیتور سیستم دوپنجره‌ای (کد سمت چپ، پیش‌نمایش سمت راست) را حذف کرد. به محض اینکه می‌نویسید سلام، در همان لحظه کلمه‌ی «سلام» بولد می‌شود و کدهای ستاره پنهان می‌شوند.
• نحوه رندر و خروجی: رندر کاملاً زنده و درجا است. برای خروجی گرفتن (Export) به فرمت‌های HTML، PDF و Word فوق‌العاده تمیز عمل می‌کند.
• پلتفرم: Windows, macOS, Linux (پولی با دوره تست رایگان)

VS Code (بهترین برای برنامه‌نویسان و توسعه‌دهندگان)

• چرا عالی است؟ اگر از قبل یک برنامه‌نویس هستید و وی‌اس‌کد روی سیستمتان نصب است، نیاز به هیچ ابزار دیگری ندارید. با افزونه‌های قدرتمند، این محیط تبدیل به یک غول مارک‌داون می‌شود.
• نحوه رندر و خروجی: به طور پیش‌فرض با زدن کلیدهای Ctrl + Shift + V (در مک Cmd + Shift + V) یک پنجره‌ی پیش‌نمایش زنده و رندر شده ساید‌بای‌ساید باز می‌شود. همچنین با افزونه‌ی Markdown PDF می‌توانید خروجی‌های شیکی بگیرید.
• پلتفرم: Windows, macOS, Linux (کاملاً رایگان و متن‌باز)

Obsidian (بهترین برای یادداشت‌برداری و اتصال ایده‌ها)

• چرا عالی است؟ اگر هدف شما از مارک‌داون، ساختن یک پایگاه دانش شخصی یا اتصال مقالات وبلاگتان به یکدیگر است، ابسیدین بی‌رقیب است. فایل‌ها کاملاً لوکال و با فرمت .md روی هارد شما ذخیره می‌شوند.
• نحوه رندر و خروجی: دارای دو حالت Live Preview (شبیه تایپورا) و Source mode (دیدن کدهای خام) است.
• پلتفرم: Windows, macOS, Linux (رایگان برای استفاده شخصی)

---

سیستم‌عامل مک (macOS - گزینه‌های اختصاصی)

اگر کاربر مک هستید، علاوه بر گزینه‌های بالا، دو ابزار بومی و بسیار لایت و جذاب وجود دارند:

• Ulysses: پادشاه ادیتورهای متنی در اکوسیستم اپل. محیطی بی‌نهایت مینیمال و متمرکز برای نوشتن طولانی‌مدت با پشتیبانی کامل از مارک‌داون و قابلیت انتشار مستقیم روی وردپرس.
• iA Writer: ادیتوری که تمرکزش روی "فقط نوشتن" است. فونت‌های اختصاصی فوق‌العاده زیبایی دارد و ساختار مارک‌داون را با رنگ‌بندی‌های بسیار ظریف تفکیک می‌کند.

---

اندروید (Android)

برای نوشتن یا ویرایش سریع فایل‌های مارک‌داون روی گوشی یا تبلت‌های اندرویدی، این دو برنامه بهترین هستند:

• PocketMark: یک ادیتور مدرن، مینیمال و بسیار سریع برای اندروید که از کدهای ریاضی (LaTeX) و جدول‌ها کاملاً پشتیبانی می‌کند.
• Markor: یک اپلیکیشن کاملاً رایگان و متن‌باز (Open Source). هیچ تبلیغی ندارد و به شما اجازه می‌دهد فایل‌های .md گوشی خود را باز کنید، در حالت Split-Screen رندر زنده آن را ببینید و خروجی PDF بگیرید.

---

آی‌او‌اس (iOS - آیفون و آیپد)

نوشتن مارک‌داون روی صفحات لمسی اپل با این دو ابزار تجربه بی‌نظیری است:

• Ulysses (نسخه iOS): کاملاً با نسخه مک همگام (Sync) است و بهترین محیط برای کسانی است که روی آیپد یا آیفون وبلاگ‌نویسی می‌کنند.
• Taio: یک ادیتور تخصصی مارک‌داون برای iOS که به جز رندر زنده عالی، ابزارهای Clipboard قدرتمندی دارد و اجازه می‌دهد اکشن‌ها و ماکروهای اختصاصی برای فرمت کردن متن‌ها بسازید.

---

جمع‌بند

سیستم‌عامل	پیشنهاد اول (سرعت و سادگی)	پیشنهاد دوم (حرفه‌ای/برنامه‌نویسی)	وضعیت رندر گرفتن
ویندوز	Typora	VS Code	هم‌زمان و درجا / پنجره ساید‌بای‌ساید
مک او اس	iA Writer یا Typora	Obsidian	هم‌زمان و بومی
لینوکس	Typora	VS Code	هم‌زمان / افزونه‌های اختصاصی
اندروید	PocketMark	Markor	حالت سوییچ بین ادیتور و پیش‌نمایش
آی‌او‌اس	Ulysses	Taio	زنده و با قابلیت خروجی PDF/HTML