Markdown介紹及使用教程

Markdown是什么?

Markdown是一種「標(biāo)記語言」,通常為程序員群體所用。除此之外,Markdown也是國際雜志編輯以及許多寫作者都廣泛使用的標(biāo)記語言。小源博客的所有文章也都是使用這一語言寫成的。

舉個例子解釋

大部分作家都是用 Word 或 Pages 寫作,過去的文檔也大都以微軟的 .doc, .docx 格式或是蘋果的 Pages 格式儲存。還有人為了保證文稿發(fā)給誰都能正常打開,會用 .txt 格式。

但是.doc 或 Pages 格式有如下問題:

1.不一定誰都能打開。用 Windows 的人打不開蘋果的 .pages 文件,用舊版 Word 的人不一定能打開你用新版 Word 寫的稿子。

2.對方看到的稿子的樣子和你自己看到的可能差別很大。

3.大部分人電腦上的Office都是盜版的,使用時很容易出問題。

4.用.txt 寫的稿子沒有格式,這就給編輯你文章的人帶來困擾了。

這就是 Markdown 登場的時候了。

千萬不要被「標(biāo)記」、「語言」嚇到,Markdown的語法十分簡單,常用的標(biāo)記符號不超過十個,用于日常寫作記錄綽綽有余,不到半小時就能完全掌握。

但就是這十個不到的標(biāo)記符號,卻能讓人優(yōu)雅地沉浸式記錄,專注內(nèi)容而不是糾結(jié)排版,達到「心中無塵,碼字入神」的境界。

Markdown 的優(yōu)點如下:

  • 純文本,所以兼容性極強,可以用所有文本編輯器打開。

兼顧了「什么人都能打開」和「樣式」。Markdown 就是純文本,就是 .txt,所以什么人都能打開。而如上所述,你可以用它來標(biāo)記文本的樣式,而且語法非常簡單。
由于是純文本,Markdown 文稿也不會因為未來軟件升級而產(chǎn)生不同版本之間的兼容問題,即,不會出現(xiàn)「我這篇稿子是用舊版 Word 寫的,你用新版 Word 看可能格式會有點問題」的情況。

  • 讓你專注于文字而不是排版。

  • 格式轉(zhuǎn)換方便,Markdown 的文本你可以輕松轉(zhuǎn)換為 html、電子書等。

Markdown 轉(zhuǎn) HTML 非常方便。HTML 是整個萬維網(wǎng)(web)的標(biāo)記語言,但更重要的是,它也是目前主流電子書格式所用的標(biāo)記語言。無論是 EPUB, mobi,還是 Kindle 用的專有格式 .azw,都只是把一堆 HTML 文件打包而已。如果你寫的是書,用 Markdown 標(biāo)注格式之后,可以很方便地轉(zhuǎn)為以上格式(當(dāng)然這個轉(zhuǎn)換工作不需要由你來做);如果你寫的是單篇的文章(例如新聞報道或?qū)冢磥硪膊慌懦Y(jié)集出書的可能。若采用 Markdown,對于日后的文件轉(zhuǎn)換工作也大有裨益。
如何開始用 Markdown?繼續(xù)用你習(xí)慣的寫作軟件即可。記事本、Word、Pages 都沒問題,但請記得存成純文本格式。就這么簡單。

  • Markdown 的標(biāo)記語法有極好的可讀性。

忘了說,Markdown沒有缺點

話不多說,現(xiàn)在開始學(xué)習(xí)吧!

目錄

標(biāo)題

這是最為常用的格式,在平時常用的的文本編輯器中大多是這樣實現(xiàn)的:輸入文本、選中文本、設(shè)置標(biāo)題格式。

而在 Markdown 中,你只需要在文本前面加上 # 即可,同理、你還可以增加二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題和六級標(biāo)題,總共六級,只需要增加 # 即可,標(biāo)題字號相應(yīng)降低。例如:

# 一級標(biāo)題
## 二級標(biāo)題
### 三級標(biāo)題
#### 四級標(biāo)題
##### 五級標(biāo)題
###### 六級標(biāo)題

注:# 和「一級標(biāo)題」之間建議保留一個字符的空格,這是最標(biāo)準(zhǔn)的 Markdown 寫法。

以下是在簡書的示范截圖:

列表

列表格式也很常用,在 Markdown 中,你只需要在文字前面加上 - 就可以了,例如:

- 文本1
- 文本2
- 文本3

如果你希望有序列表,
也可以在文字前面加上 1. 2. 3. 就可以了,例如:

1. 文本1
2. 文本2
3. 文本3

注:-1. 和文本之間要保留一個字符的空格。

以下是在簡書的示范截圖:

在 Markdown 中,插入鏈接不需要其他按鈕,你只需要使用 [顯示文本](鏈接地址) 這樣的語法即可,例如:

[何嘉源的博客](https://hejiayuan1998.github.io/)
[何嘉源工作室](https://www.hjyweb.com)

在 Markdown 中,插入圖片不需要其他按鈕,你只需要使用 [圖片上傳失敗...(image-cbe5a9-1527687698857)] 這樣的語法即可,例如:

![](http://upload-images.jianshu.io/upload_images/1811713-ccc7102e810d1400.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

注:插入圖片的語法和鏈接的語法很像,只是前面多了一個 !

插入鏈接和圖片的案例截圖:

引用

在我們寫作的時候經(jīng)常需要引用他人的文字,這個時候引用這個格式就很有必要了,在 Markdown 中,你只需要在你希望引用的文字前面加上 > 就好了,例如:

>歡迎關(guān)注“何嘉源的博客”
>始于顏值、陷于才華、忠于人品

注:> 和文本之間要保留一個字符的空格。

最終顯示的就是:

歡迎關(guān)注“何嘉源的博客”

始于顏值、陷于才華、忠于人品

引用的案例截圖:

粗體和斜體

Markdown 的粗體和斜體也非常簡單,用兩個 * 包含一段文本就是粗體的語法,用一個 * 包含一段文本就是斜體的語法。例如:

*何嘉源的博客*
**始于顏值、陷于才華、忠于人品**

最終顯示的就是下文,其中「小源博客」是斜體,「始于顏值、陷于才華、忠于人品」是粗體:

何嘉源的博客

始于顏值、陷于才華、忠于人品

粗體和斜體的案例截圖:

代辦清單To-do List

你可以在Markdown中編寫代辦清單

相關(guān)代碼

- [x] 已完成項目1
  - [x] 已完成事項
  - [ ] 代辦事項
- [ ] 代辦項目2
- [ ] 代辦項目3

顯示效果:

  • [x] 已完成項目1
    • [x] 已完成事項
    • [ ] 代辦事項
  • [ ] 代辦項目2
  • [ ] 代辦項目3

代辦清單To-do List的案例截圖

表格

使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行:

為了美觀,可以使用空格對齊不同行的單元格,并在左右兩側(cè)都使用 | 來標(biāo)記單元格邊界:

在表頭下方的分隔線標(biāo)記中加入 :,即可標(biāo)記下方單元格內(nèi)容的對齊方式:

  • :--- 代表左對齊
  • :--: 代表居中對齊
  • ---: 代表右對齊

相關(guān)代碼:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

顯示效果:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

相關(guān)代碼:

dog | bird | cat
----|------|----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz
dog bird cat
foo foo foo
bar bar bar
baz baz baz

表格的案例截圖

高效繪制 流程圖、序列圖、甘特圖

流程圖

相關(guān)代碼:

graph TD
    A[Christmas] -->B(Go Shopping)
    B --> C{Let me think}
    C -->|one| D[Laptop]
    C -->|two| E[iPhone]
    C -->|three| F[Car]

流程圖案例截圖

序列圖

相關(guān)代碼:

sequenceDiagram
    loop every day
        Alice->John: Hello John, how are you?
        John->Alice: Great!
    end

序列圖案例截圖

甘特圖

相關(guān)代碼:

gantt
dateFormat YYYY-MM-DD
title 產(chǎn)品計劃表
section 初期階段
明確需求: 2016-03-01, 10d
section 中期階段
跟進開發(fā): 2016-03-11, 15d
section 后期階段
走查測試: 2016-03-20, 9d

甘特圖案例截圖

書寫數(shù)學(xué)公式

相關(guān)代碼:

$y = x^2$

inline math: `$\dfrac{
\tfrac{1}{2}[1-(\tfrac{1}{2})^n] }{
1-\tfrac{1}{2} } = s_n$`.

數(shù)學(xué)公式案例截圖:

代碼引用

需要引用代碼時,如果引用的語句只有一段,不分行,可以將語句包起來。
如果引用的語句為多行,可以將```置于這段代碼的首行和末行。如果要建立一個已經(jīng)格式化好的程式碼區(qū)塊,只要每行都縮排 4 個空格或是一個 tab 就可以了。

代碼引用的案例截圖:

編輯器與擴展

這部分給大家介紹一些可以用來書寫、編輯 Markdown 的工具,包括獨立客戶端、編輯器/IDE 插件,以及基于 Web 的工具等,排名不分先后。

  • MarkdownPad (Windows)
  • Texts Windows (OSX)
  • MarkPad (Windows)
  • MdCharm (Windows Linux)
  • Markdown Edit (Windows)
  • CuteMarkEd (Windows Linux)
  • Haroopad (Windows OSX Linux)
  • Mou (OSX)
  • MacDown (OSX)
  • Markdown Pro (OSX)
  • ReText (Linux)
  • sublime-markdown-extended (Sublime Text)
  • Atom Markdown Preview (Atom)
  • IDEA Markdown (IDEA)
  • Cmd Markdown (Windows OSX Linux Web)
  • StackEdit (Web)
  • Dillinger (Web)

MarkdownPad

主頁: MarkdownPad
平臺: Windows (XP+)
費用: 免費版、Pro 版 ($14.95) 技術(shù): Microsoft .NET

介紹

MarkdownPad 是一款 Windows 平臺上的 Markdown 編輯器,提供了多文件編輯、實時預(yù)覽、自定義樣式、文件導(dǎo)出等功能。提供了免費版本和包含高級功能的 Pro 付費版,支持多國語言。

格式轉(zhuǎn)換

Markdown 文檔可以方便地轉(zhuǎn)換為 HTML、Word、PDF 等格式的文檔。這些轉(zhuǎn)換既可以通過你正在使用的 Markdown 編輯器完成,也可以通過一些命令行工具(如 PandocGitbook)來完成,甚至可以用你熟悉的語言編程實現(xiàn)。

這個部分主要介紹通過編輯器或命令行工具來實現(xiàn) Markdown 文檔到下列格式的轉(zhuǎn)換:

  • HTML
  • PDF
  • Word

轉(zhuǎn)換為 HTML 文檔

MdCharm

選擇 ‘File’, ‘Export to…’,勾選 ‘HTML’, 點擊 ‘Browser…’ 選擇導(dǎo)出目錄并輸入導(dǎo)出的文件名,點擊 ‘OK’,即可將當(dāng)前的 Markdown 文檔轉(zhuǎn)換為 HTML 文檔。

如果不滿意 HTML 文檔的樣式,可以在設(shè)置中自定義 CSS。

Pandoc

參考 Installing 安裝 Pandoc。

打開命令行,進入文檔所在目錄:

cd /path/to/file/

執(zhí)行下面的命令,將 Markdown 轉(zhuǎn)換為 HTML:

pandoc -o hello.html hello.md

默認的轉(zhuǎn)換,只是將 Markdown 內(nèi)容轉(zhuǎn)換為 HTML 標(biāo)簽,所以只能看到瀏覽器的默認樣式。

可以執(zhí)行下面的命令,為導(dǎo)出的 HTML 添加自定義樣式:

pandoc -o hello.html -c style.css hello.md

style.css 仍然是以 <link> 的方式關(guān)聯(lián)到 HTML 文檔中的,所以在發(fā)布的時候需要將 CSS 一同發(fā)布出去。

轉(zhuǎn)換為 PDF 文檔

MdCharm

與導(dǎo)出 HTML 文檔類似,選擇 ‘File’, ‘Export to…’,勾選 ‘PDF’, 點擊 ‘Browser…’ 選擇導(dǎo)出目錄并輸入導(dǎo)出的文件名,點擊 ‘OK’,即可將當(dāng)前的 Markdown 文檔轉(zhuǎn)換為 PDF 文檔。

如果不滿意 PDF 文檔的樣式,可以在設(shè)置中自定義 CSS。

Pandoc

使用 Pandoc 導(dǎo)出 PDF 文檔,需要先安裝某個 LaTeX 引擎(參考 Creating a PDF)。然后執(zhí)行命令:

pandoc -o hello.pdf hello.md

當(dāng)然,也可以通過 -c style.css 來指定樣式文件。

Chrome

在將 Markdown 轉(zhuǎn)換為 HTML 文檔 之后,可以通過 Chrome 瀏覽器 打開它。選擇 ‘打印’(Ctrl+P),然后更改 ‘目標(biāo)打印機’ 為 ‘另存為 PDF’,再進行一些設(shè)置后,即可保存為 PDF 文檔。

轉(zhuǎn)換為 Word 文檔

復(fù)制粘貼

在導(dǎo)出為 HTML 文檔之后,可以(在瀏覽器中)手動復(fù)制 HTML 頁面的內(nèi)容,然后粘貼到 Word 文檔中,保存即可。

Pandoc

執(zhí)行下面的命令,即可將 Markdown 文檔轉(zhuǎn)換為 Word 文檔:

pandoc -o hello.docx hello.md

后記

除了以上幾種格式是比較常用的格式之外,Markdown 還有其他語法,如想了解和學(xué)習(xí)更多,可以參考這篇『Markdown 語法說明』

參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,991評論 2 374