چگونه از مارک دان استفاده کنیم؟

 

صحبت امروزمون درباره markdown هست و این که اصلا این markdown چی هست و چه کاربردی دارد ؟!

سایت گیت هاب (github) برای فرمت بندی و قالب بندی متن ها و کامنت ها سینتکسی را معرفی کرده به نام markdown که ما با استفاده از این سینتکس می توانیم متن ها را Bold کنیم یا مثلا یک لینک داخل متن ایجاد کنیم یا گذاشتن عکس و چیزهای دیگر….

آموزش markdown

همانطور که بالا گفتم موقع گذاشتن کامنت در سایت گیت هاب (github) یک تولبار هم برای ما قرار داده شده تا بتوانیم داخل کامنت خودمون برخی متن ها را Bold یا italic …. کنیم . واقعا دستشون درد نکنه چون بدون این تولبار مجبور بودیم markdown را یاد بگیریم و اگر می خاستیم متنی را Bold کنیم با یک سینتکس (syntax) خاصی این کار را انجام دهیم .

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

dillinger.io

خب بریم سراغ قواعد سینتکس markdown :

Headings

برای ایجاد heading (تگ های h1 تا h6) قبل از متن مورد نظرمون از # استفاده می کنیم . مثلا اگر تگ h1 لازم داشته باشیم از یک # قبل از متن استفاده می کنیم , اگر تگ h2 لازم داشتیم از دو تا تگ # استفاده می کنیم و الی آخر ….

مثال :

# The largest heading
## The second largest heading
###### The smallest heading

در مثال بالا قبل از # اول (Back Slash) احتیاج نیست. ما صرفا برای درست نشان دادن اضافه کردیم.

خورجی :

The largest heading

The second largest heading

The smallest headin
  • برای Bold کردن کلمه یا متن باید دو طرف آن از ** یا __ استفاده کنیم .
  • برای Italic کردن کلمه یا متن باید دو طرف آن از * یا _ استفاده کنیم .
  • برای Strikethrough (خط خوردگی روی خط ) باید دو طرف آن از~~ استفاده کنیم .

مثال :

**This is bold text**

خروجی :

This is bold text

مثال :

*This text is italicized*

خروجی :

This text is italicized

مثال : ترکیبی از Bold و Italic

*This text is __extremely__ important*

خروجی :

This text is extremely important

Quoting text

برای ایجاد حالت نقل قول یا باید در ابتدای متن یک علامت > قرار دهید .

مثال :

In the words of Abraham Lincoln:
> Pardon my French

خروجی :

In the words of Abraham Lincoln:

Pardon my French

Quoting code

همانند متن ساده , کدهامونم می توانیم داخل نقل قول بگذاریم تا داخل متن از سایر کلمات متمایز بشوند.برای این کار آنها را باید داخل علامت backticks بگذاریم .

مثال :

Use `git status` to list all new or modified files that haven't yet been committed.

خروجی :

Use git status to list all new or modified files that haven’t yet been committed.

اگر بخواهیم چند خط را داخل این نقل قول بگذریم باید از ۳ تا ` استفاده کنیم :

Some basic Git commands are:
` ` `
git status
git add
git commit
` ` `

در مثال بالا بین ` ها فاصله احتیاج نیست. ما صرفا برای درست نشان دادن اضافه کردیم.

خروجی

آموزش Quoting code

اون ۳ خط رو به اصطلاح highlight میکنه برامون .

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

مثال :

` ` `
function test() {
  console.log("notice the blank line before this function?");
}
` ` `

در مثال بالا بین ` ها فاصله احتیاج نیست. ما صرفا برای درست نشان دادن اضافه کردیم.

fenced-code-block-rendered

می توانیم مشخص کنید که کدهای مدنظر ما مربوط به کدام زبان برنامه نویسی است تا با رنگ بندی بهتری نمایش یابد .در مثال زیر مشخص کردیم کدهای مدنظر ما مربوط به زبان ruby هست :

مثال :

` ` `ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
` ` `

در مثال بالا بین ` ها فاصله احتیاج نیست. ما صرفا برای درست نشان دادن اضافه کردیم.

خروجی :

format

Links

برای ایجاد لینک در markdown باید متن لینکمان را داخل [] قرار دهیم و خود لینک را داخل () .

مثال :

[Infu Website](https://infu.ir)

خروجی :

Infu Website

Lists

Unordered Lists

برای ایجاد لیست های غیرشمارشی باید قبل از هر خط یک علامت * یا – قرار دهیم .

مثال :

- Amir Hassan Azimi
- Mehdi Azimi
- Sarah Azimi

خروجی :

  • Amir Hassan Azimi
  • Mehdi Azimi
  • Sarah Azimi

Ordered Lists

برای ایجاد لیست های شمارشی باید قبل از هر خط عددی قرار دهیم .

مثال :

۱٫ Amir Hassan Azimi
۲٫ Mehdi Azimi
۳٫ Sarah Azimi

خروجی :

  1. Amir Hassan Azimi
  2. Mehdi Azimi
  3. Sarah Azimi

می توانیم لیست های تودرتو هم درست نماییم . برای این کار باید با قبل از خط مورد نظر ۳ تا space بزنیم .

مثال :

۱٫ Push my commits to GitHub
۲٫ Open a pull request
   * Describe my changes
   * Mention all the members of my team

خروجی :

  1. Push my commits to GitHub
  2. Open a pull request
    • Describe my changes
    • Mention all the members of my team

Task lists

برای درست کردن لیستی از آیتم ها به همراه checkbox که قابلیت check و uncheck داشته باشند از [ ] و [x] استفاده می کنیم که اولی برای آیتم هایی هست که check نشده اند و دومی برای آنهایی که میخواهیم check شده باشند:

مثال :

- [ ] a task list item
- [ ] list syntax required
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] incomplete
- [x] completed

خروجی :

Task lists

Mentioning users and teams

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

مثال :

@github/support What do you think about these updates?

Using emoji

شما می توانید داخل متن های خودتون از emoji های گیت هاب هم استفاده کنید .

مثال :

@octocat :+1: This PR looks great - it's ready to merge! :shipit:

خروجی :

emoji-rendered

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

www.emoji-cheat-sheet.com

Paragraphs and line breaks

برای ایجاد پاراگراف فقط کافیست بین متن فعلی و متن بعدی یه خط خالی فاصله باشد .

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

خروجی :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ignoring Markdown formatting

برای اینکه از اجرای برخی کدهای جلوگیری کنید و به Github بگویید آنها را کامپایل نکند (escape) قبل از کد مورد نظر قرار میدهیم .

مثال :

Let's rename *our-new-project* to *our-old-project*.

خروجی :

Let’s rename *our-new-project* to *our-old-project*.

Image Links

برای نمایش عکس از قاعده ی زیر استفاده می کنیم :

مثال :

![Google Logo](https://www.google.com/images/srpr/logo11w.png)
Organizing information with tables

در markdown برای ساخت جدول از | و – استفاده می کنیم .

برای ساخت هر ستون هدر جدول از – استفاده می کنیم.
برای جدا کردن مقدار هر ستون از ستون دیگر از | استفاده می کنیم .
مثال :

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

خروجی :

table-basic-rendered

منبع: علی حسینی

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *