進(jìn)入Markdown園子

歡迎關(guān)注微信公眾號(hào):北島向南(id:nanzhouie)

掃一掃 + 微信公眾號(hào)

GitHub Pages:https://zhouie.cn/markdown-doc/

1. 認(rèn)識(shí) Markdown

HTML ( HyperText Markup Language ) 作為一種超文本標(biāo)記語(yǔ)言 ( Markup Language ) 應(yīng)運(yùn)而生,無(wú)數(shù)的網(wǎng)頁(yè)從此有了主次分明,層次清晰的格式。
如果將 HTML 比作一架重機(jī)槍,那么 Markdown 就是一把手槍,滿足了主要的文本格式標(biāo)記的需求,可是操作性卻大大簡(jiǎn)化。
秉承 易讀易寫(xiě) 的宗旨,Markdown 作為一種輕量級(jí)標(biāo)記語(yǔ)言 ( Lightweight Markup Language ) ,讓無(wú)數(shù)的程序猿和文字工作者愛(ài)不釋手。

1.1 Markdown的優(yōu)點(diǎn)

  • 專注你的文字內(nèi)容而不是排版樣式,安心寫(xiě)作
  • 輕松的導(dǎo)出 HTMLPDF 和本身的 .md 文件
  • 純文本內(nèi)容,兼容所有的文本編輯器與字處理軟件
  • 隨時(shí)修改你的文章版本,不必像字處理軟件生成若干文件版本導(dǎo)致混亂
  • 可讀、直觀、學(xué)習(xí)成本低

1.2 Markdown 的現(xiàn)狀

有時(shí)候一件事情的真相,不是來(lái)自于對(duì)它的思考,而是來(lái)自于對(duì)它的感覺(jué)。
——Stanley Kubrick

這是 John Grumber 最喜歡的用來(lái)解釋 Markdown 設(shè)計(jì)初衷的一句話,Markdown 語(yǔ)言希望帶來(lái)的就是純粹的寫(xiě)作的感覺(jué),旨在簡(jiǎn)潔、高效,也由于 Markdown 的易讀易寫(xiě),人們用不同的編程語(yǔ)言實(shí)現(xiàn)了多個(gè)版本的解析器和生成器。

目前不同的 Markdown 工具集成了不同的功能(但基礎(chǔ)功能大致相同),例如 流程圖時(shí)序圖復(fù)雜表格復(fù)雜公式 的呈現(xiàn)。
我相信隨著 Markdown 語(yǔ)法的逐漸普及開(kāi)來(lái),以后更多的平臺(tái)會(huì)支持 Markdown 書(shū)寫(xiě)模式,并集成更加完整的功能模塊。

雖然功能的 “豐富” 并沒(méi)有什么本質(zhì)的缺點(diǎn),但這個(gè)程度一旦 “過(guò)” 了頭,終歸有些背離初衷,與 “易讀易寫(xiě)” 出現(xiàn)矛盾,開(kāi)始在編寫(xiě)的過(guò)程中覺(jué)得有些許吃力了。那這個(gè)時(shí)候,用戶可能會(huì)覺(jué)得,不如使用專業(yè)化的工具來(lái)撰寫(xiě)更有效率。

1.3 Markdown官方文檔

了解一下 John Gruber

2004 年 John Gruber創(chuàng)造 Markdown 語(yǔ)言,14年間,Markdown 語(yǔ)言從程序員圈子中逐漸擴(kuò)散開(kāi)來(lái),成為了越來(lái)越多的電腦寫(xiě)作者第一選擇。

John Gruber 是一個(gè)資深果粉,他的個(gè)人博客 Daring Fireball 被人戲稱為 蘋(píng)果官方喉舌博客。所以你應(yīng)該懂為什么最好的 Markdown 編輯器都集中在 Mac 平臺(tái)上了吧。


2. 使用Markdown

2.1 標(biāo)題

Markdown 通過(guò)在行首添加 1 ~ 6個(gè) # 符號(hào)來(lái)定義不同級(jí)別的標(biāo)題,最多到六級(jí)標(biāo)題。
注意 :# 后最好是需要加一個(gè)空格。

  • 書(shū)寫(xiě)格式
# 一級(jí)標(biāo)題
## 二級(jí)標(biāo)題
### 三級(jí)標(biāo)題
###### 六級(jí)標(biāo)題
  • 解析效果
# 標(biāo)題樣式

特別的,還可使用 = (高階標(biāo)題) 和 - (次階標(biāo)題) 標(biāo)記 一級(jí) 和 二級(jí) 標(biāo)題。
注意:=- 的個(gè)數(shù)在不同 Markdown 工具中都有不同,但這倒不是多大的問(wèn)題了,簡(jiǎn)單試試就知道了。

  • 書(shū)寫(xiě)格式
效果和一級(jí)標(biāo)題一樣
=
效果和二級(jí)標(biāo)題一樣
-
  • 解析效果
- = 標(biāo)題樣式

2.2 加粗、斜體 和 刪除線

  • markdown使用 *_ 強(qiáng)調(diào)文本,使用一個(gè) *_ 包圍的文本會(huì)被轉(zhuǎn)化為 斜體 ;而用兩個(gè) *_ 包圍的文本則會(huì)被轉(zhuǎn)化成 加粗 ;使用兩個(gè)~包圍的文本會(huì)被轉(zhuǎn)化為 刪除線

  • 但如果你的 * 、_~ 兩邊都有空白的話,它們就只會(huì)被當(dāng)成普通的符號(hào),這其實(shí)也是一個(gè)需要注意的地方

  • 如果要在文字前后直接插入普通的 星號(hào) * 或 下劃線 _ ,你可以用 反斜杠 \ 轉(zhuǎn)義

  • 書(shū)寫(xiě)格式

*斜體文字*
_斜體文字_
**加粗文字**
__加粗文字__
~~刪除內(nèi)容~~
  • 解析效果

斜體文字
斜體文字
加粗文字
加粗文字
刪除內(nèi)容

2.3 列表

Markdown支持 無(wú)序列表 和 有序列表。
無(wú)序列表可以使用 *+ , - 三者中任意符號(hào)來(lái)標(biāo)記;有序列表則使用 數(shù)字. 來(lái)標(biāo)記。
注意:標(biāo)記后面最好是需要加一個(gè)空格,有序列表的數(shù)字會(huì)被按順序自動(dòng)更正。通常情況下,無(wú)序列表的項(xiàng)目符號(hào)是按照實(shí)心圓、空心圓、實(shí)心方格的層級(jí)關(guān)系遞進(jìn)的。

  • 書(shū)寫(xiě)格式
有序列表
1. 第一點(diǎn)
2. 第二點(diǎn)
5. 第三點(diǎn)

無(wú)序列表
* 這是無(wú)序列表項(xiàng)目
- 這是無(wú)序列表項(xiàng)目
+ 這是無(wú)序列表項(xiàng)目

嵌套的列表
- 呵呵
    + 嘉嘉
    * 嘻嘻
    * 吼吼
        * 嘎嘎
        - 桀桀
+ 哈哈
  • 解析效果

有序列表

  1. 第一點(diǎn)
  2. 第二點(diǎn)
  3. 第三點(diǎn)

無(wú)序列表

  • 這是無(wú)序列表項(xiàng)目
  • 這是無(wú)序列表項(xiàng)目
  • 這是無(wú)序列表項(xiàng)目

嵌套的列表

  • 呵呵
    • 嘉嘉
    • 嘻嘻
    • 吼吼
      • 嘎嘎
      • 桀桀
  • 哈哈

2.4 引用

在段落前添加一個(gè) > 符號(hào)即可將該段落標(biāo)記為引用
注意: > 后最好是需要加一個(gè)空格;>、>>>>> 等多層嵌套的使用,有點(diǎn)不太好總結(jié),不要問(wèn)我為什么,實(shí)踐出真知。

  • 書(shū)寫(xiě)格式
一般用法
> 這是引用

迭代使用(引用中的引用)
> 這是一級(jí)引用
>> 這是二級(jí)引用
>>> 這是三級(jí)引用
>>
>> 這是二級(jí)引用
>
> 這是一級(jí)引用

引用的區(qū)塊內(nèi)也可使用其他 Markdown 語(yǔ)法
> 1.   這是第一行列表項(xiàng)。
> 3.   這是第二行列表項(xiàng)。
> 5.   這是第三行列表項(xiàng)。
>
> 給出一些例子代碼:
>
>     return shell_exec("echo $input | $markdown_script");
  • 解析效果

一般用法

這是引用

迭代使用(引用中的引用)

這是一級(jí)引用

這是二級(jí)引用

這是三級(jí)引用

這是二級(jí)引用

這是一級(jí)引用

引用的區(qū)塊內(nèi)也可使用其他 Markdown 語(yǔ)法

  1. 這是第一行列表項(xiàng)。
  2. 這是第二行列表項(xiàng)。
  3. 這是第三行列表項(xiàng)。

給出一些例子代碼:

return shell_exec("echo $input | $markdown_script");
  • 補(bǔ)充一下
    引用區(qū)塊 > 和代碼區(qū)塊 ``` 的區(qū)別:
    >引用區(qū)塊中的文本保留Markdown語(yǔ)法,而```代碼塊中的文本不保留Markdown語(yǔ)法。

2.5 分割線

分割線最常使用就是三個(gè)或以上 * ,還可以使用 -_ 。
注意:使用 --- 作為水平分割線時(shí),要在它的前面空一行,防止 --- 被當(dāng)成標(biāo)題標(biāo)記的表示方式。

  • 書(shū)寫(xiě)格式
---
***
___
  • 解析效果



2.6 插入鏈接

markdown文本中插入鏈接非常方便,有 文內(nèi)鏈接引用鏈接 兩種方式。

注意:文內(nèi)鏈接 和 引用鏈接 顯示效果是一樣的,但是在編輯狀態(tài)下的使用情況不一樣。文內(nèi)鏈接緊跟鏈接文字,可以在看到鏈接文字的同時(shí)清楚的知道鏈接地址,但是不便于多次重復(fù)利用。

引用鏈接可以重復(fù)使用,但一般都是將一些鏈接放在一起統(tǒng)一管理,如一段文字后面或文章結(jié)尾,因此在找到鏈接和鏈接文字的對(duì)應(yīng)關(guān)系上有些麻煩,各有利弊,分情況使用吧。

  • 書(shū)寫(xiě)格式
文內(nèi)鏈接
這是一個(gè)文內(nèi)鏈接的[例子](http://example.com/ "鼠標(biāo)懸浮此處顯示的標(biāo)題")。
[這個(gè)](http://example.net/)鏈接在鼠標(biāo)懸浮時(shí)沒(méi)有標(biāo)題。
[這個(gè)](/about/)鏈接是本地資源。

引用鏈接
這是一個(gè)引用鏈接的 [例子][id],[例子2][]。
[id]: http://example.com/  "鼠標(biāo)懸浮標(biāo)題(可選)"
[例子2]: http://example.com/ 
注意,這里的 id 沒(méi)有大小寫(xiě)區(qū)分,如果省略 id ,則前面方括號(hào)的內(nèi)容會(huì)被用作 id 。

我常用的網(wǎng)站包括 [Google][1], [Yahoo][2] 和 [MSN][3] 。
[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"
  
也可以寫(xiě)成

我常用的網(wǎng)站包括 [Google][],[Yahoo][] 和 [MSN][] 。
[google]: http://google.com/        "Google"
[yahoo]:  http://search.yahoo.com/  "Yahoo Search"
[msn]:    http://search.msn.com/    "MSN Search"
  • 解析效果

文內(nèi)鏈接
這是一個(gè)文內(nèi)鏈接的
這是一個(gè)鏈接的例子。
這個(gè)鏈接在鼠標(biāo)懸浮時(shí)沒(méi)有標(biāo)題。
這個(gè)鏈接是本地資源。

引用鏈接的解析效果

2.7 插入圖片

插入圖片和插入鏈接非常類似,只是在方括號(hào)前多一個(gè) ! 。

[圖片上傳失敗...(image-3c0559-1533526878147)]

  • Alt text為如果圖片無(wú)法顯示時(shí)顯示的文字。
  • /path/to/img.jpg為圖片所在路徑。
  • Optional title為顯示標(biāo)題。顯示效果為在你將鼠標(biāo)放到圖片上后,會(huì)顯示一個(gè)小框提示,提示的內(nèi)容就是Optional title。

注意:Markdown 語(yǔ)法目前還沒(méi)有某種合適的辦法指定圖片的寬高,但據(jù)我所知,很多平臺(tái)以及在這個(gè)方向作出相當(dāng)多的改進(jìn)了,一起期待吧!

  • 書(shū)寫(xiě)格式
文內(nèi)鏈接
![idol](http://pcx2lec2u.bkt.clouddn.com/201808051449_378.jpg)

引用鏈接

![idol][idol]
[idol]: http://pcx2lec2u.bkt.clouddn.com/201808051449_378.jpg
  • 解析效果

文內(nèi)鏈接

idol
引用鏈接解析效果

2.8 表格

表格的書(shū)寫(xiě)格式一目了然,還是很方便簡(jiǎn)潔的。

  • 書(shū)寫(xiě)格式
| 左對(duì)齊 | 中間對(duì)齊 | 右對(duì)齊 |
| :---   |  :---:   |   ---: |
| 左1    |  中1     |  右1   |
| 左2    |  中2     |  右3   |
  • 解析效果
左對(duì)齊 中間對(duì)齊 右對(duì)齊
左1 中1 右1
左2 中2 右2

2.9 角標(biāo)

不同于前面說(shuō)的鏈接,這里的角標(biāo)內(nèi)容會(huì)被放在文末,點(diǎn)擊可以實(shí)現(xiàn)跳轉(zhuǎn),使用 [^] 來(lái)定義腳注。

  • 書(shū)寫(xiě)格式
使用 Markdown[^1] 可以效率的書(shū)寫(xiě)文檔,直接轉(zhuǎn)換成 HTML[^2] ,你可以使用Leanote[^Le] 編輯器進(jìn)行書(shū)寫(xiě)。
[^1]: Markdown是一種純文本標(biāo)記語(yǔ)言
[^2]: HyperText Markup Language 超文本標(biāo)記語(yǔ)言
[^Le]: 開(kāi)源筆記平臺(tái),支持Markdown和筆記直接發(fā)為博文
  • 解析效果

使用 Markdown[1] 可以效率的書(shū)寫(xiě)文檔,直接轉(zhuǎn)換成 HTML[2] ,你可以使用Leanote[3] 編輯器進(jìn)行書(shū)寫(xiě)。

2.10 上下標(biāo)

<sub>、<sup> 用作表示上下標(biāo)

  • 書(shū)寫(xiě)格式
E = mc<sup>2</sup>

Water : H<sub>2</sub>O
  • 解析效果

E = mc2

Water : H2O

2.11 直接鏈接與郵箱

在 markdown 中將 鏈接地址 或 郵箱地址 用 <> 包圍,則會(huì)被自動(dòng)轉(zhuǎn)換成可點(diǎn)擊的鏈接地址。

  • 書(shū)寫(xiě)格式
<http://haoeric.com>

<haoeric0520@gmail.com>
  • 解析效果

http://haoeric.com

haoeric0520@gmail.com

2.12 換行

使用html標(biāo)簽 <br/> 、 <br> 換行

  • 書(shū)寫(xiě)格式
第一行hahaha <br/> 第二行6666
  • 解析效果

第一行hahaha
第二行6666

2.13 反斜杠

如果需要避免文本中的符號(hào)被當(dāng)做 markdown 標(biāo)識(shí)符而發(fā)生不必要的格式轉(zhuǎn)化,可以在符號(hào)前加 \ 來(lái)避免。

  • 書(shū)寫(xiě)格式
\*不是斜體\*
  • 解析效果

* 不是斜體 *

整理一下,Markdown 支持以下這些符號(hào)前面加上 反斜杠 來(lái)幫助插入普通的符號(hào):

符號(hào) 含義
\ 反斜線
` 反引號(hào)
* 星號(hào)
_ 底線
{} 花括號(hào)
[] 方括號(hào)
() 括弧
# 井字號(hào)
+ 加號(hào)
- 減號(hào)
. 英文句點(diǎn)
! 驚嘆號(hào)

2.14 代碼高亮

使用柵欄標(biāo)記代碼塊的一個(gè)好處是可以標(biāo)明代碼的語(yǔ)種,然后實(shí)現(xiàn)代碼的高亮。

  • 書(shū)寫(xiě)格式
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
  • 解析效果
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

2.15 其他

2.15.1 錨點(diǎn)

網(wǎng)頁(yè)中,錨點(diǎn) 其實(shí)就是頁(yè)內(nèi)超鏈接,也就是 鏈接本文檔內(nèi)部的某些元素 ,實(shí)現(xiàn)當(dāng)前頁(yè)面中的跳轉(zhuǎn),最典型的例子就是 目錄 這種結(jié)構(gòu)了。比如我這里寫(xiě)下一個(gè)錨點(diǎn),點(diǎn)擊 回到目錄,就能跳轉(zhuǎn)到 目錄。 在 目錄 中點(diǎn)擊 這一節(jié),就能跳過(guò)來(lái)。

Githubmd 文件中,會(huì)為每個(gè) h1~h6 標(biāo)簽(即 # ... ###### ),自動(dòng)塞入一個(gè) a 標(biāo)簽,并渲染好 id

比如 # h1,被渲染成html如下:

<h1>
  <a id="user-content-h1" class="anchor" href="#h1" aria-hidden="true">
      <svg aria-hidden="true" class="octicon octicon-link" height="16" role="img" version="1.1" viewBox="0 0 16 16" width="16">
        <path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z">
        </path>
      </svg>
    </a>
    h1
</h1>

不去管 svg 部分,可以看到 h1 標(biāo)簽內(nèi)嵌入了一個(gè) id"user-content-h1"a 標(biāo)簽,如果標(biāo)題為 # h5 ,那么 id 就會(huì)是 user-content-h5

2.15.2 空格

在段首加入 &emsp;、&ensp;、&nbsp; 來(lái)輸入空格,其中,&emsp; 是一個(gè)中文字符,&ensp; 是半個(gè)中文字符 ,&nbsp; 是1/4中文字符。

2.15.3 圖片圖床

插入圖片的地址需要圖床,那么,究竟什么是圖床呢?

圖床,顧名思義,圖片床,即大量圖片匯聚地,每一張圖片都有一個(gè)url,供所需站點(diǎn)使用。

詳情可以參考我之前寫(xiě)的博文 圖床工具分享 。

另外,越來(lái)越多的 Markdown 工具現(xiàn)在開(kāi)始支持 一鍵上傳圖片至云端并生成 Markdown 引用鏈接至剪切板,可以看看最近的我最近在這方面的 收獲總結(jié) —— Md2All Markdown排版利器 以及 qiniu_upload windows工具。

ps:七牛云邀請(qǐng)注冊(cè)鏈接:https://portal.qiniu.com/signup?code=3lowm9s25ur82

2.15.4 LaTeX公式

行內(nèi)公式($表示)
  • 書(shū)寫(xiě)格式
愛(ài)因斯坦發(fā)明的質(zhì)能方程是:$E=mc^2$
  • 顯示效果

愛(ài)因斯坦發(fā)明的質(zhì)能方程是:E=mc^2

整行公式($$表示)
  • 書(shū)寫(xiě)格式
$$\sum_{i=1}^n a_i=0$$
$$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$
$$\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}$$
  • 顯示效果

\sum_{i=1}^n a_i=0
f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2
\sum^{j-1}_{k=0}{\widehat{\gamma}_{kj} z_k}

2.15.5 流程圖、渲染序列圖

流程圖
  ```flow
  st=>start: Start:>https://www.zybuluo.com
  io=>inputoutput: verification
  op=>operation: Your Operation
  cond=>condition: Yes or No?
  sub=>subroutine: Your Subroutine
  e=>end

  st->io->op->cond
  cond(yes)->e
  cond(no)->sub->io
  ```
流程圖 顯示效果圖
渲染序列圖
  ```sequence
  Alice->Bob: Hello Bob, how are you?
  Note right of Bob: Bob thinks
  Bob-->Alice: I am good thanks!
  ```
渲染序列圖 顯示效果圖

2.15.6 GitHub Emoji

Github 的 Markdown 語(yǔ)法支持添加 emoji 表情,輸入不同的符號(hào)碼(兩個(gè)冒號(hào)包圍的字符)可以顯示出不同的表情。
我在 github 上分享了 markdown-emoji 列表,可以去看看。

markdown-emoji 列表

可是奇怪的是,我的GitHub Pages 采用 Hexo框架,渲染不出 emoji 表情(不支持),這是為什么呢?

這是因?yàn)?Hexo 默認(rèn)的 markdown 渲染引擎不會(huì)渲染 emoji 表情,詳情可參閱 搭建Hexo博客進(jìn)階篇

2.16 Markdown的局限性

  • 不同的 Markdown 工具功能細(xì)節(jié)上可能會(huì)不一樣
  • 寫(xiě)技術(shù)類文章條理很重要,因此在開(kāi)篇有個(gè)目錄,也顯得非常有必要,因此越來(lái)越多工具支持 [TOC] 一鍵生成目錄列表,具體可參看我的 github-md-toc
  • 另外還有,流程圖,渲染序列圖LaTex數(shù)學(xué)公式,代碼語(yǔ)法高亮,顯示代碼行號(hào)圖片/文字 居中/左右對(duì)齊,[TOC]目錄生成,等等這些,其實(shí)都是非常必要的功能,值得去做一些擴(kuò)展。

3. Markdown 工具的選擇

還是那句話,編輯器的興盛固然是好事,但工具的過(guò)度豐富也是一種麻煩,如何選出適合自己的 Markdown 編輯器讓很多人大傷腦筋,甚至在很多時(shí)候,一個(gè)設(shè)計(jì)不佳的 Markdown 編輯器會(huì)讓初次嘗試 Markdown 的寫(xiě)作者放棄使用 Markdown 來(lái)寫(xiě)作。

3.1 Windows 平臺(tái)

3.1.1 Sublime

  • 支持 OS X、Windows、Ubuntu 等 UNIX 及 Linux 平臺(tái)
  • 關(guān)聯(lián)閱讀:強(qiáng)大的Sublime編輯器
  • Sublime Text 是程序員圈子里口口相傳的「神器」級(jí)代碼編輯器,它基于 Vim 開(kāi)發(fā),各種功能性組件層出不窮,功能極度強(qiáng)大,是代碼編輯器中的標(biāo)桿作品。
  • 同時(shí),它也支持 Markdown 語(yǔ)法高亮,于是很多人都習(xí)慣于用它來(lái)進(jìn)行 Markdown 文檔書(shū)寫(xiě)。由于有著諸如 Markdown Preview、Sublime-Evernote 等擴(kuò)展性插件,在 Sublime Text 里完全可以完成 Makrdown 書(shū)寫(xiě)預(yù)覽與導(dǎo)出的過(guò)程。
  • 如果你是一名開(kāi)發(fā)者,Sublime Text 基本可以滿足你對(duì) Markdown 編輯的全部需求,如果你是一名普通用戶,我則更推薦你使用專業(yè)的 Markdown 編輯器。


    image

3.1.2 簡(jiǎn)書(shū)

  • 簡(jiǎn)書(shū)的Web 端使用 Markdown 很舒服,它同樣支持左右兩欄的實(shí)時(shí)預(yù)覽,字體優(yōu)雅、簡(jiǎn)潔。


    簡(jiǎn)書(shū)

3.1.3 Cmd Markdown

  • 除了編輯,管理您的私有文檔,Cmd Markdown 還支持發(fā)布文稿,您可以在這里將文稿共享給朋友、親友、同事。
  • 支持 Linux、Mac、Windows 三大平臺(tái),輕松選擇適合你的客戶端
    Cmd Markdown

    Cmd Markdown 全平臺(tái)端 優(yōu)勢(shì)

3.1.4 馬克飛象

  • 支持 Windows 平臺(tái)
  • 專為 印象筆記 打造的 Markdown 編輯器
    馬克飛象

3.1.5 為知筆記

  • 支持 Windows 平臺(tái)
  • 作為一個(gè)支持全平臺(tái)的云筆記應(yīng)用,為知筆記完全可以當(dāng)作 Markdown 編輯器來(lái)使用,當(dāng)我們需要跨大平臺(tái)進(jìn)行 Markdown 協(xié)作寫(xiě)作的時(shí)候,會(huì)是一個(gè)不錯(cuò)的選擇。


    為知筆記

3.1.6 Simple MarkPad

  • Simple Markpad 最吸引人的一點(diǎn)就是,在諸多看起來(lái)就讓人覺(jué)復(fù)雜的 Windows 平臺(tái)的 Markdown 編輯器中,它始終保持著簡(jiǎn)約的風(fēng)格。
  • 它支持自動(dòng)列表、圖片拖入、Markdown 語(yǔ)法高亮、全屏寫(xiě)作模式、字?jǐn)?shù)統(tǒng)計(jì),還有豐富的快捷鍵,同時(shí)具有著素雅而克制的界面風(fēng)格。


    image

3.1.7 MarkPad

  • 支持 Windows 平臺(tái)
    MarkPad

3.1.8 Miu

  • 支持 Windows 平臺(tái)
  • 一個(gè)很優(yōu)秀的工具,但是由于和 Mou 重復(fù)性比較高,同時(shí)與其有些爭(zhēng)議問(wèn)題,故并未介紹,有興趣的話可以自行查看。
    Miu

3.2 Mac 平臺(tái)

3.2.1 Mou

  • Mou 是一款由國(guó)人開(kāi)發(fā)的 Mac 平臺(tái)上的 Markdown 編輯器,支持自定義界面主題,導(dǎo)入輸出CSS格式文件,最重要的是 Mou 支持 Markdown 實(shí)時(shí)預(yù)覽,這讓不少初學(xué)者能快速上手 Markdown 寫(xiě)作。
  • Mou 除了直觀的實(shí)時(shí)預(yù)覽功能之外,還是目前對(duì)中文支持最好的 Markdown 編輯器,無(wú)論是多種的編輯主題,還是各式的輸出樣式,在支持自定義的同時(shí),對(duì)中文的優(yōu)化也是目前的最好的,Mou 甚至支持豎排編寫(xiě)。同時(shí),Mou 還具有發(fā)布功能,支持發(fā)布到 Tumblr。


    image

3.2.2 Ulysses

  • 作為 Markdown 編輯器領(lǐng)域的老牌王者,這款應(yīng)用入圍了蘋(píng)果2013年 Mac App Store 的 The Best of 2013。Ulysses 有著經(jīng)典的文檔庫(kù)架構(gòu),多樣化的可供自定義的編輯主題,大量的輸出格式選擇,功能豐富,最適合長(zhǎng)文寫(xiě)作與顏控用戶。
  • 無(wú)論是 PDF 還是 ePub 格式你都可以在官網(wǎng)下載到大量的現(xiàn)成格式模版,省去大量的用在排版上的時(shí)間,你需要做的只是按照自己的想法寫(xiě)完文章,之后就可以通過(guò) Ulysses 導(dǎo)出成任意自己想要的格式了。


    image

3.2.3 Byword

  • 如果說(shuō) Ulysses 是功能最豐富的 Markdown 編輯器,Byword 就是最簡(jiǎn)約的 Markdown 編輯器。同樣作為 Apple 平臺(tái)上的老牌編輯器,Byword 有著一種簡(jiǎn)約克制的氣質(zhì),僅有 6.4 MB 的體量,卻創(chuàng)造出了一個(gè)完美而純粹的寫(xiě)作環(huán)境。
  • 在我看來(lái) Byword 應(yīng)該是目前編輯器中最忠于 Markdown 語(yǔ)言發(fā)明初衷的的編輯器 —— 簡(jiǎn)單、干凈、利落,All for writing feelings。
    image

3.2.4 typora

  • 支持 Mac 與 Windows 平臺(tái)
  • 關(guān)聯(lián)閱讀: 《讓 Markdown 寫(xiě)作更簡(jiǎn)單,免費(fèi)極簡(jiǎn)編輯器:Typora》
    這款編輯器在大家都還在苦惱如何處理預(yù)覽和寫(xiě)作界面之間的關(guān)系時(shí)候,機(jī)智的將「寫(xiě)作」和「預(yù)覽」合二為一了,你輸入的地方,即是你輸出的地方。
  • Markdown 標(biāo)記成為了類似快捷鍵一樣的存在,你就像在使用一個(gè)所見(jiàn)即所編輯器一樣,自然而快速的進(jìn)行寫(xiě)作??梢哉f(shuō),Typora 完全顛覆了目前的 Markdown 編輯器的交互模式,將 Markdown 寫(xiě)作向普通用戶推進(jìn)了一大步。


    image
  • Typora 的革新不止于此,它還提供了了類似 Office 的圖像式表格建立方式,支持目錄大綱生成,支持拖拽插入圖片,并且支持所有主流代碼的高亮與 LaTeX 公式編寫(xiě)。
  • 可以說(shuō) Typora 是目前 Markdown 編輯器中功能最與眾不同的一個(gè),諸多新鮮而強(qiáng)大的功能讓它卓爾不群,絕對(duì)值得嘗試。


    image

3.2.5 Quiver

  • 關(guān)聯(lián)閱讀:《技術(shù)寫(xiě)作者的專屬筆記本:Quiver》
  • Quiver 同樣是一款國(guó)人開(kāi)發(fā)的軟件。它具有著強(qiáng)大的 Markdown 編輯能力,但同時(shí)又不僅限于此。
  • 它集合了寫(xiě)作軟件與筆記軟件的特點(diǎn),它既有著傳統(tǒng) Markdown 寫(xiě)作軟件的實(shí)時(shí)編輯預(yù)覽,又有著筆記軟件的文件邏輯結(jié)構(gòu),同時(shí)它還內(nèi)置了 Ace 代碼編輯器,通過(guò) Cell 的概念,將各種不同的格式組合在一起,最后形成一個(gè)個(gè)文件。
  • Quiver 可以說(shuō)是一款為技術(shù)寫(xiě)作設(shè)計(jì)的,專注于筆記方向的 Markdown 編輯器,它能夠在為你提供流暢的 Markdown 寫(xiě)作體驗(yàn)的同時(shí),為你構(gòu)建起一個(gè)良好的知識(shí)管理結(jié)構(gòu)。


    image

3.2.6 Alternote

  • 同為 Mac 平臺(tái)上的筆記式 Markdown 編輯軟件,Alternote 則是為印象筆記進(jìn)行了深度定制,成為了一款簡(jiǎn)約輕量的第三方印象筆記客戶端。它拋棄了印象筆記臃腫的架構(gòu),專注于對(duì)寫(xiě)作體驗(yàn)的優(yōu)化,深度重構(gòu)了印象筆記對(duì)對(duì)于 Markdown 寫(xiě)作者的意義。
  • 在 Alternote 里,Markdown 標(biāo)記在輸入完成后會(huì)自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的富文本格式,并不需要額外的預(yù)覽,不過(guò)美中不足的是,這樣也造成了一旦轉(zhuǎn)換為富文本就無(wú)法再轉(zhuǎn)換回來(lái)的問(wèn)題。


    Alternote

3.2.7 SnippetsLab

  • Snippetslab9 是一款 Mac 平臺(tái)的面向開(kāi)發(fā)者的代碼管理與編寫(xiě)工具,專注于幫助使用者收集整理代碼片段,快速調(diào)用有價(jià)值的代碼片段,打造屬于個(gè)人的代碼倉(cāng)庫(kù)。
  • 那么它和 Markdown 的關(guān)系在哪里呢?奧秘就在它的菜單欄助手上。Snippetslab 的菜單欄助手有著類似印象筆記菜單欄助手的特性,支持在菜單欄打開(kāi)小窗口進(jìn)行程序編寫(xiě),同時(shí)可以對(duì)代碼進(jìn)行語(yǔ)法高亮,而它正好也支持 Markdown。
  • 目前所有平臺(tái)中,Snippetslab 是唯一一款提供了菜單欄 Markdown 文字輸入的應(yīng)用,你可以在不用打開(kāi)主題程序的情況下,以小視窗形式快速的進(jìn)行 Markdown 編寫(xiě)。


    image

3.2.8 MarkdownPad

  • 支持 Mac 平臺(tái)
    image

3.3 網(wǎng)頁(yè)版(線上)

同時(shí),也有一些 Markdown 相關(guān)瀏覽器插件也是很棒的,最典型的便是:Markdown-Here,我也有寫(xiě)一篇博文專門(mén)介紹分享了它 —— Markdown-Here md-2-html渲染

3.4 Others

3.5 More

如有更好的 Markdown 免費(fèi)編輯器推薦,請(qǐng)到這里留言反饋,謝謝~


4. 推薦閱讀


5. 補(bǔ)充

2018/04/20 07:12


Markdown_desktop_tool_rank.png

2018/08/05 20:36


整理于2015年

  1. Markdown是一種純文本標(biāo)記語(yǔ)言。 ?

  2. HyperText Markup Language 超文本標(biāo)記語(yǔ)言。 ?

  3. 開(kāi)源筆記平臺(tái),支持Markdown和筆記直接發(fā)為博文。 ?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、通過(guò)CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明AI閱讀 16,170評(píng)論 3 119
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,502評(píng)論 19 139
  • “城”外人聲鼎沸,城內(nèi)人心悲涼,憤怒卻無(wú)奈?!俺情T(mén)”緊閉,由于種種逼迫。人多,嗓門(mén)大,而且話毒...
    未來(lái)藍(lán)醉閱讀 248評(píng)論 0 0
  • 很早很早以前,我一個(gè)人獨(dú)自去過(guò)陌生的城市,一個(gè)住過(guò)諾大的不同的賓館,總是開(kāi)著燈開(kāi)著開(kāi)著電視,在無(wú)可救藥的情況下緩緩...
    橙大帥的普通人生閱讀 441評(píng)論 1 2
  • 今早路過(guò)書(shū)店,想著缺了本暑假看的書(shū),走了進(jìn)去。到柜臺(tái)跟前,管理員帶著耳機(jī),好像在看國(guó)產(chǎn)劇 “有浮生六記嗎” “什么...
    寒尋悄芳閱讀 319評(píng)論 1 1

友情鏈接更多精彩內(nèi)容