Menu Close

MD : Mastering Markdown

การใช้งานภาษา Markdown ที่เราใช้กันบ่อยในไฟล์ Readme.md บน git repository หรืออาจจะประยุกต์ไปใช้กับการสร้างเนื้อหาบน blog โดยใช้วิธีการบันทึกเนื้อหาเป็นแบบ Markdown ในบทความนี้เราจะดูวิธีการใช้งานภาษา Markdown ว่ามีฟังก์ชันการใช้งานอะไรให้ใช้กันบ้าง

What is Markdown ?

Markdown เป็นสไตล์ของข้อความบนเว็บ เราสามารถควบคุมการแสดงผลของเอกสาร ฟอร์เม็ทที่เป็นตัวหนา ตัวเอง เพิ่มรูปภาพ สร้างรายการหัวข้อ เป็นต้น ทั้งหมดนี้เราสามารถใช้ Markdown ทำได้เลย และยิ่งกว่านั้น Markdown เป็นแค่ ข้อความปกติ กับสัญลักษณ์บางตัว เช่น # หรือ * มันง่ายต่อการทำความเข้าใจและนำไปใช้

เราสามารถใช้ Markdown บน GitHub เช่น Gist, การคอมเม้นปัญหาและ Pull Requests, ไฟล์นามสกุล .md หรือ .markdown

ตัวอย่างการใช้งาน Markdown

Text

It's very easy to make some words **bold** and other words *italic* with Markdown. You can even [link to Google!](http://google.com)

List

Sometimes you want numbered lists: 

1. One 
2. Two 
3. Three 

Sometimes you want bullet points:

* Start a line with a star
* Profit! 

Alternatively, 

- Dashes work just as well 
- And if you have sub points, put two spaces before the dash or star:   
   - Like this   
   - And this

Images

If you want to embed images, this is how you do it: 

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

Headers & Quotes

# Structured documents 

Sometimes it's useful to have different levels of headings to structure your documents. Start lines with a `#` to create headings. Multiple `##` in a row denote smaller heading sizes. 

### This is a third-tier heading 

You can use one `#` all the way up to `######` six for different heading sizes.

If you'd like to quote someone, use the > character before the line: 

> Coffee. The finest organic suspension ever devised... I beat the Borg with it. 
> - Captain Janeway

Code

There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks: `var example = true`.  If you've got a longer block of code, you can indent with four spaces:     

if (isAwesome){      
 return true     
} 

GitHub also supports something called code fencing, which allows for multiple lines without indentation: 

``` 
if (isAwesome){   
return true 
} 
``` 

And if you'd like to use syntax highlighting, include the language: 

```javascript 
if (isAwesome){   
return true 
} 
```

Extras

GitHub supports many extras in Markdown that help you reference and link to people. If you ever want to direct a comment at someone, you can prefix their name with an @ symbol: Hey @kneath — love your sweater! 

But I have to admit, tasks lists are my favorite: 

- [x] This is a complete item 
- [ ] This is an incomplete item 

When you include a task list in the first comment of an Issue, you will see a helpful progress bar in your list of issues. It works in Pull Requests, too! 

And, of course emoji!

Syntax guide

Headers

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

Emphasis

*This text will be italic*
_This text will be italic_

**This text will be bold**
__This text will be bold__

_You **can** combine them_

List

Unordered

 * Item 1
 * Item 2
    * Item 2a
    * Item 2b 

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b 

Images

![GitHub Logo](/images/logo.png)
Format: ![Alt Text](url)

Links

http://github.com - automatic!
[Github](http://github.com)

Blockquoutes

As Kanye West said:

> We're living the future so
> the present is our past. 

Inline code

I think you should use an
`<addr>` element here instead.

Markdown ที่สามารถใช้ร่วมกับ GitHub ได้

Syntax highlighting

```javascript
function fancyAlert(arg) {
   if(arg) {
     $.facebox({div:'#foo'})
   }
 }
```

Task Lists

 [x] @mentions, #refs, [links](), formatting, and tags supported
 [x] list syntax required (any unordered or ordered list supported)
 [x] this is a complete item
 [ ] this is an incomplete item 

Tables

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

SHA references : GitHub จะแปลงข้อความที่เป็น SHA-1 hash เป็นลิ้งค์ ไปยัง commit ใน git repository ให้อัตโนมัติ

16c999e8c71134401a78d4d46435517b2271d6ac
mojombo@16c999e8c71134401a78d4d46435517b2271d6ac
mojombo/github-flavored-markdown@16c999e8c71134401a78d4d46435517b2271d6ac

Issue reference within a repository

1
mojombo#1
mojombo/github-flavored-markdown#1

Username @mentions

@username

Automatic linking for URLs : GitHub จะแปลงข้อความที่อยู่ในรูปแบบของ URL ให้เป็นลิ้งค์ไปยัง url นั้นให้อัตโนมัติ

Strikethrough

~~this~~

Emoji : emoji! และ Emoji Cheat Sheet

ตัวอย่างหน้า Readme ใน GitHub

การสร้าหน้า Readme สวยๆ ใน GitHub นั้นเป็นไฟล์ .md ทั้งหมด

https://github.com/facebook/react
https://github.com/gofiber/fiber

อ้างอิง : https://guides.github.com/features/mastering-markdown/

Posted in markdown

ใส่ความเห็น