什麼是 Markdown ?

  • Markup Language (標記語言) 的一種
  • A plain text formatting syntax
  • 一個採用 Perl 撰寫的軟體工具,協助將純文字語法轉換成 HTML
  • 旨在實現「易讀易寫」(easy-to-read, easy-to-write)
  • 最需要強調的為其「可讀性

Why Markdown ?

  • Platform independent
  • Human readable and intuitive
  • Easy to learn
  • Plain text is durable
  • More...

Markdown Supported!

Readability Matters!!

Readability

Markdown Syntax

Let's rock and roll

標題 Headers

Markdown 支援兩種標題的語法,Setextatx 形式

// Setext-style
This is a h1 element
====================

This is a h2 element
--------------------
// atx-style
#This is a h1
##This is a h2
###This is a h3

What does headers look like?

段落 Paragraphs

Markdown 的段落就如同我們一般寫作分段一樣,段落與端落之間空一行即可

A Second Level Header
---------------------

Now is the time for all good men to come to
the aid of their country. This is just a
regular paragraph.

The quick brown fox jumped over the lazy
dog's back.

若要實現段落內換行,也就是 HTML 中的 <br> 標籤,則必須在上一行的行尾加上兩個以上的空白

What does paragraphs look like?

引言 Quotes

Markdown 支援巢狀 (nested) 的引言使用

> Life is an open book exam. - Tina Seelig

> おれは "海賊王" になる男だ!!!! - モンキー・D・ルフィ
>> 人の夢は!!! 終わらねェ!!!! - 黒ひげ

> 建立自我、追求忘我 - 馬雲

What does quotes look like?

清單 Lists

有序清單,所使用數字並不影響輸出結果

1. 刷牙洗臉
2. 喝一杯 500cc 的白開水
3. 享受美好的早餐
6. Suit up!
5. What's up!

無序清單,使用星號加號減號

* 刷牙洗臉
* 喝一杯500c.c.白開水

- Android
- iOS
- Unity
- Web

+ 詠春 - 葉問
+ 截拳道 - 李小龍

What does lists look like?

強調 Emphasise

使用星號 (*) 與底線 (_)

Jimmy: 所以中午要吃什麼?
William: _愛煩司_  //標準不選字類型!
Eddie: 那是*明天*的事。
Arc: 有**-**是長音
William: __KIKI__說他想吃**波士頓派**

What does emphasise look like?

分隔線 Horizontal Rules

使用三個以上的星號 (*) 與減號 (-)

* * *

***

*****

- - -

------------------

What does horizontal rules look like?

程式碼區塊 Code

```
// Set screen name on the tracker to be sent with all hits.
tracker.set(Fields.SCREEN_NAME, "Home Screen");

// Send a screen view for "Home Screen"
tracker.send(MapBuilder
    .createAppView()
    .build()
);

// This event will also be sent with &cd=Home%20Screen.
tracker.send(MapBuilder
    .createEvent("UX", "touch", "menuButton", null)
    .build()
);

// Clear the screen name field when we're done.
tracker.set(Fields.SCREEN_NAME, null);
```

What does code look like?

程式碼 Inline Code

使用反引號 (`) 包起來

- `cmd` + `T`: 開啟新分頁
- `cmd` + `W`: 關閉當前分頁

良好的網址對於SEO非常重要,一般在 Rails 裡面使用`[:id]`的方法,我們可以
使用 friendly_id 這套 Gem 來幫助我們,你可以把像是 `http://example.com/products/123`
變成`http://example.com/products/好素肚不買嗎?user=jack&qty=69`這樣的網址

What does inline code look like?

連結 Links

Markdown 支援兩種連結語法:行內參考

這是一個行內形式連結的語法[範例](http://cloudchen.com/)
Markdown 對於[站內連結](/images/barchart.png)也有一套!

這是一些參考形式連的語法範例:
知名搜引擎如:[Goolge][]、[Yahoo!][y]、[Bing][] 都相繼採用了 RWD 來設計網頁

[Google]: http://www.google.com "Google"
[y]: http://yahoo.com      (Yahoo Search)
[Bing]:   http://www.bing.com   'Microsoft Search'
//參照形式的連結可以放置在文件中的任何位置

What does links look like?

圖片 Images

圖片的語法也有:行內參考 兩種,類似連結的語法,不過在前面多加了驚嘆號(!)

Jimmy:最近我會收到一個包裹

![A Package](http://goo.gl/wF37AH "傳說中的包裹")

![alt text here][img]

[img]: http://goo.gl/yb8Qjw "包裹!"

What does images look like?

Never miss an opportunity to be fabulous.
Tina Seelig
Professor of the Practice, Stanford

Tools

工欲善其事,必先利其器,Get your hands dirty!

<Thank You!>

Important contact information goes here.