آموزش کار با Markdown

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 21 تیر 1398
دسته بندی ها : آموزشی

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

Markdown چیست؟

Markdown یک سینتکس قالب‌دهی به متن است که در وبلاگ‌نویسی، مستندنویسی و… استفاده می‌شود. با استفاده از Markdown شما می‌توانید محتوای ساختارمندی را برای وب نوشته و در نهایت به HTML تبدیل کنید.

Markdown در سال ۲۰۰۴ توسط John Gruber ساخته شد. ایده اصلی آن هم سریع نوشتن متون در دنیای وب بود، چرا که استفاده از تگ‌های HTML برای نوشتن یک مطلب وبلاگی در آن زمان بسیار آزاردهنده بود. 

یک مثال ساده از Markdown را می‌توانید در زیر مشاهده کنید:

The *quick* brown fox, jumped **over** the lazy [dog](https://en.wikipedia.org/wiki/Dog).

خروجی:

The quick brown fox, jumped over the lazy dog.

چرا Markdown تا به این حد محبوب است؟

شاید متوجه شده باشید که ما برای نوشتن Markdown نیز باید کدنویسی مختصری بکنیم. حال ممکن است بپرسید که چرا از همان ادیتورهای گرافیکی استفاده نکنیم؟ ادیتورهایی که برای بولد کردن یک متن تنها کافی‌ست که روی یک دکمه کلیک کنید. خب شاید شما درست بگویید اما نوشتن سینتکس Markdown در روال نوشتن صورت می‌گیرد و از این رو کمتر نویسندگان را با حواس‌پرتی روبرو می‌سازد. 

زمانی که شما یک متن بلند را می‌نویسید و قصد دارید در میان نوشتن‌تان یک کلمه را بولد کنید، باید دست از نوشتن برداشته و سراغ دکمه B بروید. اما در مارک‌داون شما نیازی به چنین کاری ندارید، چرا که می‌توانید در خلال نوشتن، متن مورد نظرتان را نیز بولد کنید. 

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

سینتکس پایه‌ای Markdown

یکی از اهداف روشنی که Markdown دنبال می‌کند این است که به آسانی توسط انسان‌ها خوانده شود. با مشاهده سینتکس مارک‌داون می‌توانید متوجه شوید که با سینتکسی بسیار ساده و درک‌پذیر همراه هستید.

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

عناوین

  • # Heading 1
  • ## Heading 2
  • ### Heading 3

عناوین در سینتکس مارک‌داون با استفاده از کاراکتر # پیاده‌سازی می‌شود. تعداد استفاده از این کاراکتر نشان دهنده سطح عنوان است. استفاده از یک # به معنای تگ h1، استفاده از دو # به معنای تگ h2 و… است. همانطور  که می‌دانید ما در HTML قابلیت استفاده از h1 تا h6 را داریم، از این رو در مارک‌داون نیز می‌توانیم تا ۶ کاراکتر # جلو برویم.

متن

اگر قصد کج کردن یک متن را دارید آن را در بین دو ستاره قرار دهید. اگر قصد بولد کردن متنی را دارید آن‌ را در بین چهار ستاره قرار دهید و در نهایت اگر قصد استفاده ترکیبی از این دو مورد را دارید می‌توانید متن را در بین ۶ ستاره قرار دهید.

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

تصاویر

![m'lady](https://i.imgur.com/v8IVDka.jpg)

سینتکس مربوط به قرار دادن تصویر شباهت بسیار زیادی به لینک دارد، تنها یک تفاوت جزئی وجود دارد و آن استفاده از یک علامت تعجب در قبل از کروشه است. متنی که در داخل کروشه نیز قرار می‌گیرد به عنوان alt text برای تصویر تنظیم خواهد شد.

در برخی از ادیتورهای مارک‌داون نیازی به انجام چنین کاری نیست، تنها از طریق دکمه آپلود کارتان را به تمامی انجام می‌دهید. 

لیست‌ها

* Milk

* Bread

    * Wholegrain

* Butter

پیاده‌سازی لیست در مارک‌داون کاری بسیار آسان است، برای ساخت یک لیست دایره‌ای تنها کافی‌ست که قبل از متن هر آیتم از علامت (*,-,+) استفاده بکنید. برای ساخت یک لیست تو در تو نیز آیتم‌های زیرین را با استفاده از space و یا tab به جلو بیاورید.

 لیست‌های عددی نیز درست به همین شکل هستند با این تفاوت که قبل از متن آیتم‌ها بجای علامت‌های (*,-,+) باید از اعداد استفاده کنید:

1. Tidy the kitchen

2. Prepare ingredients

3. Cook delicious things

نقل قول

> To be or not to be, that is the question.

برای استفاده از نقل قول در مارک‌داون تنها کاری که باید انجام دهید افزودن یک علامت < به قبل از نوشته‌های‌تان است. 

المان‌های دیگر

خط افقی

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

---

همانطور که می‌دانید این دستور جایگزینی برای <hr> خواهد بود.

نمایش قطعه کد

برای نمایش قطعه کدها در مارک‌داون می‌توانید آن‌ها را در بین دو علامت ```code``` قرار دهید. خروجی این کار باعث می‌شود که متن code به صورت یک قطعه کد در بین یکسری متن ظاهر شود. 

دقت کنید که ``` به معنی backtick می‌باشد سه backtick  باز و کد و در نهایت سه backtick بسته. شما میتونید مکان قرار گیری دکمه backtick را در تصویر زیر مشاهده کنید : 

یک روش دیگر برای نمایش قطعه کدها جلو آوردن آن‌ها با ۴ space است. برای مثال:

```
    .my-link {
        text-decoration: underline;
    }
```

عناوین و لیست‌ مرجع

**The quick brown [fox][1], jumped over the lazy [dog][2].**

[1]: https://en.wikipedia.org/wiki/Fox "Wikipedia: Fox"
[2]: https://en.wikipedia.org/wiki/Dog "Wikipedia: Dog"

اگر می‌خواهید مانند صفحات ویکی‌پدیا لیست مرجع داشته باشید می‌توانید آن‌ها را به صورت بالا ایجاد کنید. در مقابل کلمه fox ما یک شماره را می‌بینیم که این شماره در زیر به یک آدرس اشاره می‌کند. این روشی ساده برای ساخت لیست مرجع است. در پایان هر لینک نیز می‌توانید یک متن را مشاهده کنید که در بین دو علامت کوتیشن قرار گرفته است. این متن‌ها title لینک شما هستند.

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

[Dog](https://en.wikipedia.org/wiki/Dog "Wikipedia: Dog")

نادیده گرفتن

اگر بخواهید دو ستاره را در یک متن بدون کج کردن آن نمایش دهید باید از دو بک-اسلش استفاده کنید. این کار باعث نادیده گرفتن سینتکس مارک‌داون می‌شود. برای مثال:

\*literally\*

خروجی این قطعه کد متن *literally* خواهد بود.

قرار دادن HTML

یکی از جذاب‌ترین ویژگی‌های مارک‌داون این است که به شما قابلیت استفاده مستقیم از HTML را می‌دهد. زمانی که نتوانستید با مارک‌داون چیزی که می‌خواهید را پیاده‌سازی کنید می‌توانید به سادگی کدهای HTML مورد نیازتان را قرار دهید:

<button class="button-save large">Big Fat Button</button>

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

برخی از ادیتورهای مبتنی بر مارک داون به شما قابلیت استفاده از یکسری شورت‌کات یا میانبر را می‌دهند. اگر از یک ادیتور ساده استفاده می‌کنید ممکن است چنین قابلیتی برای شما فعال نباشد اما می‌توانید با استفاده از کلیدهای زیر یک امتحانی بکنید:

  • Ctrl + B for Bold
  • Ctrl + I for Italic
  • Ctrl + K for a link
  • Ctrl + H for H2 and H3

تبدیل HTML به MD

اگر به مارک‌داون علاقه پیدا کرده‌اید و می‌خواهید به صورت کامل از آن استفاده کنید می‌توانید فایل‌های قدیمی‌ HTMLتان را نیز به یک MD تبدیل نمایید. برای این کار از ابزارهایی مانند convert html to md و Convert HTML to Markdown استفاده کنید.

اپلیکیشن‌های مناسب برای نوشتن Markdown

ممکن است بخواهید که متن‌های روزانه‌تان را نیز در مارک‌داون بنویسید. برای چنین کاری استفاده از یک کد ادیتور انتخابی منطقی نیست، بجای آن می‌توان از اپلیکیشن‌های موجود برای نوشتن مارک داون استفاده کرد.

برای سیستم عامل مک انتخاب‌های گسترده‌ای وجود دارد که می‌توانید در زیر آن‌ها را مشاهده کنید:

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

برای سیستم عامل‌های موبایل نیز انتخاب‌های مناسبی وجود دارد. برای iOS می‌توانید از موارد زیر استفاده کنید:

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

ابزارهای آنلاین

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

در پایان

استفاده از Markdown می‌تواند زمان بسیاری را برای شما ذخیره کند. شاید در ابتدا کمی درگیری با آن داشته باشید اما با گذر زمان می‌توانید در استفاده از آن سریع‌تر عمل کنید. کلیدهای میانبر را نیز از یاد نبرید، برخی از ادیتورها از آن‌ها پشتیبانی می‌کنند. این موضوع را نیز در نظر بگیرید که هر زمان خواستید می‌توانید از HTML استفاده کنید. 

منبع

مقالات پیشنهادی

  • آموزش کار با Laravel Tinker

    لاراول شامل یک REPL قدرتمند به نام Tinker هست که توسط PsySH console قدرت گرفته است. کنسول Tinker به شما اجازه میده که با اپلیکیشن لاراول از طریق دستور...

    ارسطو عباسی
  • حس اتوماتیک سازی کارهای front-end با gulp

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

    حسام موسوی