menu

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

Markdown

دوشنبه 22 شهریور 1395

 

Markdown، یه ابزار تبدیل فایل های text به فایل HTML هست. در واقع Markdown بر اساس Syntax خاص خودش، به ما خروجی HTML میده.

به طور دقیق تر، Markdown یه ابزاری هست که توسط JOHN GRUBER بر اساس زبان Perl نوشته شده که یه فایل Plain text را میتونه برای ما به فایل HTML تبدیل کنه.

از این سیستم هم خیلی جاها استفاده میشه. شاید مثال واضح اون GitHub باشه. اگه تابه حال توی GitHub یه Repository درست کرده باشید و فایل Readme.md را ویرایش کرده باشید، متوجه Syntaxt خاص اون شده اید، و این همون Syntax مربوط به Markdown هست. در واقع GitHub از Markdown استفاده میکنه

مثل همیشه، برای کار با Markdown اول از همه بریم سراغ دانلود اون. از اینجا

و بعد از دانلود، فایل ها را از حالت فشرده خارج میکنیم

بیاید ببینیم چی توی این دایرکتوری داریم

دو تا فایل اول، فایل های LICENSE و README هستند. میتونیم اون ها را پاک کنیم. ولی فایل بعدی ما، فایل اصلی Markdown هست که بر اساس Perl نوشته شده.

قبل از شروع کار، بد نیس یه سری به Document خود Markdown بزنیم

همونطور که میبینید، Markdown واقعا امکانات زیادی واسه ی نوشتن راحت تر HTML هاتون داره

البته این نکته را هم اضافه کنم که برای نوشتن یه صفحه ی HTML شاید Markdown چندان مناسب نباشه و به کار شما نیاد، ولی مطمئنا کار کردن باهاش فقط برای Fun و تفریح ( و البته بلد بودنش!) بد نیست

برگردیم سراغ خود Markdown

از اونجایی که Markdown بر اساس Perl نوشته شده، شما نیاز دارید که Perl حتما روی سیستمتون نصب باشه. اگه لینوکس یا مک هستید به احتمال خیلی زیاد نصبه. ولی اگه ویندوز هستید احتمالا نیاز دارید که نصبش کنید. (البته من خودم معمولا توی لینوکس هستم، ولی این اواخر چون یکم سیستمم ریخته به هم، مجبور شدم از ویندوز استفاده کنم)

برای دانلود Perl به اینجا برید

بعد از نصب هم میتونید Perl Command Line را باز کنید و دستور زیر را بزنید تا از ورژن Perl نصب شده مطمئن بشید

perl -v

الان که از نصب Perl مطمئن شدیم، میتونیم برگردیم سراغ Markdown. گفتم که Markdown فایل text را به خروجی HTML تبدیل میکنه. پس ابتدای کار ما باید یه فایل text ساده ایجاد کنیم و بعد اون را compile کنیم تا خروجی HTML ازش بگیریم

من فایل index.md را ایجاد میکنم (پسوند md هم برای markdown هست) و کد زیر را توش میزنم

# Header 1

با زدن # من مشخص میکنم که این یه Header هست و بعد از Compile کردن، تبدیل میشه به یه h1

بیاید Compile کنیمش. برای کامپایل اون کافیه بزنیم

perl Markdown.pl index.md > index.html

بعد از کامپایل اون فایل index.html ما اینجوری میشه

<h1>Header 1</h1>

به همین سادگی Markdown برای ما یه H1 میسازه

نکته ای که میخواستم اضافه کنم اینه که شما برای نوشتن فایل md میتونید از هر ویرایشگری که میخواهید استفاده کنید، ولی من برای نوشتن کدهای Markdown ترجیح میدم از Mou استفاده کنم. مزیت Mou این هست که بدون نیاز به این که شما فایلتون را Compile کنید و ازش خروجی html بگیرید، توی خود ویرایشگر میتونید تغییرات را ببینید و ببینید که نتیجه ی کارتون چی میشه ( البته میتونید از یه سری پلاگین مثل Markdown Preview هم توی Sublime استفاده کنید)

البته این نکته را هم اضافه کنم که Mou برای Mac OS هست، و اگه شما توی ویندوز هستید (مثل الان من) بهتره از پلاگین های Sublime استفاده کنید و اگه میخواهید که دقیقا مثل Mou به صورت real time بتونید کد های Mardown خودتون را نتیجه اش را ببینید، باید یه پلاگین به اسم markmon و همینطور بسته ی markmon را از طریق npm نصب کنید

من markmon را نصب کرده ام (نصب از طریق npm و package control را قبلا گفته ام) ولی به صورت معمولی میریم جلو. (البته من برای نمایش توی مرورگرم، از پلاگین Markdown Preview استفاده میکنم و نوع نمایشش را بر اساس Github میزارم تا از css های GitHub هم استفاده کنه)

بریم سراغ بررسی بقیه ی قسمت های Markdown

فایل index.md را دوباره باز میکنیم. قبلا H1 را با استفاده از # ایجاد کردیم

بیاید به بقیه ی H ها بپردازیم. خیلی راحت میتونیم H1 تا H6 را بسازیم

#Header 1
##Header 2
###Header 3
####Header 4
#####Header 5
######Header 6

به همین سادگی میتونیم H1 تا H6 را ایجاد کنیم

من فایل را کامپایل میکنم

perl Markdown.pl index.md > index.html

و بعد از اون هم فایل index.html را توی مرورگرم باز میکنم

حالا بیاید کمی هم p ایجاد کنیم. واسه ی ایجاد p نیاز به هیچ کاری نیست! اگه متن را خالی بنویسیم، به عنوان p درنظر گرفته میشه. به انتهای فایل index.md خودم اینو اضافه میکنم

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consequuntur optio dolores modi, labore aspernatur possimus magni id! Nemo, tenetur!

و نتیجه اش

چطوره یه دونه blockqoute هم ایجاد کنیم

برای ایجاد blockqoute هم کافیه از > استفاده کنیم

>its a blockqoute

و نتیجه اش

حالا بیاید یه لیست ایجاد کنیم

ما دو نوع لیست داریم

لیست مرتب (ol)

برای لیست مرتب کافیه از اعداد استفاده کنیم. مثلا

1. no1
2. no2
3. no3
4. no4

لیست نامرتب (ul)

و برای داشتن یه لیست نامرتب هم کافیه از علامت - استفاده کنیم

- no1
- no2
- no3
- no4
- no4

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

![Noisy](http://noisy.ir/img/navbar.jpg)

دقت کنید که علامت ! به معنای اینه که ما میخواهیم از تگ img استفاده کنیم. مقدار داخل [] هم به عنوان alt عکس در نظر گرفته میشه و مقدار داخل () به عنوان src اون عکسه

استفاده از تگ a هم خیلی شبیه به img هست

[دست نوشته های یک تازه کار](http://noisy.ir)

مقدار داخل [] به عنوان متن لینک و مقدار داخل () به عنوان آدرس لینک در نظر گرفته میشه

نکته ای که باید اضافه کنم استفاده از Scape char ها است. مثلا فرض کنیم توی آدرس ما علامت ( وجود داشته باشه. این علامت، میتونه با خود علامت ( موجود توی syntax مربوط به Markdown قاطی بشه. برای این کار، مثل اکثر زبان های برنامه نویسی، میتونیم از Scape char ها استفاده کنیم

مثلا

\)

مثلا برای استفاده از آدرسی مثل این، باید اینجوری کدمون را بزنیم

[Closure](https://en.wikipedia.org/wiki/Closure_(computer_programming\))

قسمت بعدی markdown، استفاده از تگ های Code و pre هست

برای استفاده از یک کد تک خطی، میتونیم خیلی راحت کدهامون را بین دوتا علامت ` بزاریم

مثلا

`<?php echo 'hello world'; ?>`

و برای استفاده از pre و زدن کد های چند خطی، میتونیم از ``` استفاده کنیم. یعنی کدهامون را بین سه تا ` میزاریم.

```
<?php
	echo 'hello world!';
?>
```

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

و به همین زیبایی، شما میتونید از Markdown استفاده کنید. البته شاید واقعا توی یه پروژه ی بزرگ Markdown چندان به کار نیاد، ولی دونستن اون بد نیست (و البته کار کردن باهاش لذت بخشه) و مطمئنا شما توی GitHub برای فایل های خودتون ازش خیلی میتونید استفاده کنید

به عنوان مطلب نهایی هم، یه پردازنده ی Markdown را به صورت آنلاین معرفی میکنم. Showdown یه ادیتور آنلاین برای کدهای Markdown شماست که میتونید کدهاتون را اونجا بزنید و به صورت Live نتایج اون را ببینید

مثلا این کد نهایی من هست، بعد از نوشتن این فصل

##Headers
#Header 1
##Header 2
###Header 3
####Header 4
#####Header 5
######Header 6
##Paragraphs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore consequuntur optio dolores modi, labore aspernatur possimus magni id! Nemo, tenetur!
>its a blockqoute

##Lists

###ordered list
1. no1
2. no2
3. no3
4. no4

###unordered list
- no1
- no2
- no3
- no4
- no4

##images and Hyperlinks
![Noisy](http://noisy.ir/img/navbar.jpg)

[دست نوشته های یک تازه کار](http://noisy.ir)

this is a php code : `<?php echo 'hello world'; ?>`

this is another code:

```
<?php
	echo 'hello world!';
?>
```

امیدوارم لحظات خوشی با Markdown داشته باشید