arkdown工具Typora 完全使用詳解

Matrix 精選

Matrix 是少數(shù)派的寫作社區(qū)，我們主張分享真實(shí)的產(chǎn)品體驗(yàn)，有實(shí)用價(jià)值的經(jīng)驗(yàn)與思考。我們會(huì)不定期挑選 Matrix 最優(yōu)質(zhì)的文章，展示來自用戶的最真實(shí)的體驗(yàn)和觀點(diǎn)。

文章代表作者個(gè)人觀點(diǎn)，少數(shù)派僅對(duì)標(biāo)題和排版略作修改。

Typora 一直是我認(rèn)為桌面端筆記應(yīng)用應(yīng)有的終極形態(tài)。用我之前 一篇文章 中的話來說就是，「它的功能之強(qiáng)大、設(shè)計(jì)之冷靜、體驗(yàn)之美妙、理念之先進(jìn)，我認(rèn)為值得所有筆記應(yīng)用廠商學(xué)習(xí)。」

但一件很尷尬的事情是，由于它極簡(jiǎn)的設(shè)計(jì)理念，有許多使用者并沒能完全地了解到 Typora 的全部強(qiáng)大功能。我想在這篇文章中由淺入深地介紹 Typora 的功能亮點(diǎn)。無論你從未用過 Typora，還是已經(jīng)體驗(yàn)了很久，我相信你都能在這篇文章中發(fā)現(xiàn) Typora 新的驚喜。

Typora 是什么？

Typora 是一款支持實(shí)時(shí)預(yù)覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個(gè)平臺(tái)的版本，并且由于仍在測(cè)試中，是完全免費(fèi)的。

在這篇文章中，我希望以「Typora 是什么」這個(gè)問題為線索，向大家全面介紹這款令人愛不釋手的筆記應(yīng)用。

一個(gè) Markdown 文本編輯器

Typora 首先是一個(gè) Markdown 文本編輯器，它支持且僅支持 Markdown 語法的文本編輯。在 Typora 官網(wǎng) 上他們將 Typora 描述為 「A truly minimal markdown editor. 」。

官網(wǎng)首頁

關(guān)于 Markdown

Markdown 是用來編寫結(jié)構(gòu)化文檔的一種純文本格式，它使我們?cè)陔p手不離開鍵盤的情況下，可以對(duì)文本進(jìn)行一定程度的格式排版。你可以在 這篇文章 中快速入門 Markdown。

由于目前還沒有一個(gè)權(quán)威機(jī)構(gòu)對(duì) Markdown 的語法進(jìn)行規(guī)范，各應(yīng)用廠商制作時(shí)遵循的 Markdown 語法也是不盡相同的。其中比較受到認(rèn)可的是 GFM 標(biāo)準(zhǔn)，它是由著名代碼托管網(wǎng)站 GitHub 所制定的。Typora 主要使用的也是 GFM 標(biāo)準(zhǔn)。同時(shí)，你還可以在 文件 - 偏好設(shè)置 - Markdown 語法偏好 - 嚴(yán)格模式 中將標(biāo)準(zhǔn)設(shè)置為「更嚴(yán)格地遵循 GFM 標(biāo)準(zhǔn)」。具體內(nèi)容你可以在官方的 這篇文檔 中查看。

嚴(yán)格模式

寫得舒服

一個(gè)文本編輯器，寫得舒服是關(guān)鍵。我曾說過，「更有趣的是，一個(gè)筆記應(yīng)用不會(huì)因?yàn)樗С?Markdown 語法而高級(jí)或易用很多。」，細(xì)枝末節(jié)處的人性化考慮才是最重要的。而 Typora 的編輯體驗(yàn)顯然是經(jīng)過深思熟慮設(shè)計(jì)的產(chǎn)物。

我認(rèn)為：一個(gè)優(yōu)秀的筆記應(yīng)用應(yīng)該給用戶選擇 Markdown 語法風(fēng)格的權(quán)利。而 Typora 在這一點(diǎn)上是我目前見過所有 Markdown 筆記應(yīng)用中做得最好的。

文本編輯設(shè)置

通過打開 文件 - 偏好設(shè)置 你會(huì)發(fā)現(xiàn) Typora 為編輯體驗(yàn)的考慮細(xì)致到了令人嘆為觀止的程度。Typora 中提供了大量有關(guān) Markdown 偏好的設(shè)置，據(jù)此，你可以構(gòu)建一個(gè)幾乎完全適合自己的 Markdown 編輯器。下面我將依次介紹一些與文本編輯體驗(yàn)有關(guān)的功能亮點(diǎn)。

智能標(biāo)點(diǎn)

我認(rèn)為「智能標(biāo)點(diǎn)」是比較有趣的一點(diǎn)。它可以自動(dòng)幫你將不是很美觀的直引號(hào) " ' 轉(zhuǎn)化為更美觀的彎引號(hào) “ ‘ ’ ”。具體內(nèi)容你可以在官方的 這篇文檔 中查看。關(guān)于直彎引號(hào)在 macOS 上如何輸入你也可以看 這篇文章。

圖片插入

Typora 的圖片插入功能是廣受好評(píng)的。要知道，Markdown 原生不太注重圖片插入的功能，但你可以在 Typora 中：

• 直接使用 右鍵 - 復(fù)制 Ctrl + V 將網(wǎng)絡(luò)圖片、剪貼板圖片復(fù)制到文檔中
• 拖動(dòng)本地圖片到文檔中

Typora 會(huì)自動(dòng)幫你插入符合 Markdown 語法的圖片語句，并給它加上標(biāo)題。

復(fù)制圖片

你也完全可以使用圖床來保證文檔在分享后圖片仍能正常顯示。

更強(qiáng)大的是，Typora 支持在拖動(dòng)或 Ctrl + V 網(wǎng)絡(luò)圖片后自動(dòng)將其保存到本地。你可以在 文件 - 偏好設(shè)置 - 編輯器 - 圖片插入 中選擇復(fù)制到哪個(gè)路徑，什么情況下需要復(fù)制。

圖片插入

這一功能保證了即使網(wǎng)絡(luò)圖片源失效了，你還有本地的備份可用。同時(shí)也能使你的文檔文件夾更合理、完整。

打字機(jī)模式和專注模式

「打字機(jī)模式」使得你所編輯的那一行永遠(yuǎn)處于屏幕正中。

「專注模式」使你正在編輯的那一行保留顏色，而其他行的字體呈灰色。

你可以在 視圖 - 專注模式 / 打字機(jī)模式 中勾選使用這兩個(gè)模式。

兩種模式

實(shí)時(shí)預(yù)覽

我想很果斷地下這個(gè)結(jié)論：到現(xiàn)在還不支持編輯界面實(shí)時(shí)預(yù)覽的 Markdown 編輯器基本可以退出市場(chǎng)了。Typora 在這一方面顯然已經(jīng)領(lǐng)先了一大步——他們連 Markdown 語法的標(biāo)記都在實(shí)時(shí)預(yù)覽中消去了。當(dāng)你離開正在編輯的有格式的文本段后，Typora 會(huì)自動(dòng)隱藏 Markdown 標(biāo)記，只留下「所見即所得」的美妙。他們把這稱為 Hybrid View。

所見即所得

為了防止一些程序 bug 的發(fā)生（雖然在我使用下來感到是很少的）導(dǎo)致格式問題無法修改，Typora 保留了一個(gè)「源代碼模式」。你可以通過 視圖 - 源代碼模式 或左下角的 </> 按鈕進(jìn)入。

源代碼模式

大綱 / 文件側(cè)邊欄

側(cè)邊欄

Typora 會(huì)根據(jù)你 Markdown 標(biāo)記的 H1、H2、H3…… 各級(jí)標(biāo)題為你呈現(xiàn)一個(gè)大綱。

你也可以選擇查看文件夾中的文件，但由于目前 Typora 只支持查看 md 文件，因此我認(rèn)為文件側(cè)邊欄這個(gè)功能還是很雞肋的。

空格與換行

Typora 在空格與換行部分主要是使用 CommonMark 作為標(biāo)注規(guī)范。與前文提到的 GFM 一樣，CommonMark 也是比較流行的 Markdown 語言規(guī)范（解析器）之一。

• 空格：在輸入連續(xù)的空格后，Typora 會(huì)在編輯器視圖里為你保留這些空格，但當(dāng)你打印或?qū)С鰰r(shí)，這些空格會(huì)被省略成一個(gè)。
• 你可以在源代碼模式下，為每個(gè)空格前加一個(gè) \ 轉(zhuǎn)義符，或者直接使用 HTML 風(fēng)格的 &nbps; 來保持連續(xù)的空格。
• 軟換行：需要說明的是，在 Markdown 語法中，換行（line break）與換段是不同的。且換行分為軟換行和硬換行。在 Typora 中，你可以通過 Shift + Enter 完成一次軟換行。軟換行只在編輯界面可見，當(dāng)文檔被導(dǎo)出時(shí)換行會(huì)被省略。
• 硬換行：你可以通過 空格 + 空格 + Shift + Enter 完成一次硬換行，而這也是許多 Markdown 編輯器所原生支持的。硬換行在文檔被導(dǎo)出時(shí)將被保留，且沒有換段的段后距。
• 換段：你可以通過 Enter 完成一次換段。Typora 會(huì)自動(dòng)幫你完成兩次 Shift + Enter 的軟換行，從而完成一次換段。這也意味著在 Markdown 語法下，換段是通過在段與段之間加入空行來實(shí)現(xiàn)的。
• Windows 風(fēng)格（CR+LF）與 Unix 風(fēng)格（CR）的換行符：CR 表示回車 \r ，即回到一行的開頭，而 LF 表示換行 \n ，即另起一行。
• 所以 Windows 風(fēng)格的換行符本質(zhì)是「回車 + 換行」，而 Unix 風(fēng)格的換行符是「換行」。這也是為什么 Unix / Mac 系統(tǒng)下的文件，如果在 Windows 系統(tǒng)直接打開會(huì)全部在同一行內(nèi)。 你可以在 文件 - 偏好設(shè)置 - 編輯器 - 默認(rèn)換行符 中對(duì)此進(jìn)行切換。

下附以上各空格、換行、換段的測(cè)試結(jié)果圖。具體內(nèi)容你可以在官網(wǎng)的 這篇文檔 中查閱。

空格、換行、換段

emoji 表情

如今 emoji 表情越來越多地出現(xiàn)在一些網(wǎng)站文章中，但在桌面端（特別是 Windows 系統(tǒng)）文本編輯器上插入 emoji 是一件十分麻煩的事情。在使用 Typora 之前，我打出 emoji 表情的辦法基本有兩個(gè)：

1. 輸入法聯(lián)想：優(yōu)點(diǎn)是比較方便，但會(huì)插入一張圖片而不是一個(gè)字符，在許多情景下都不是很合適。
2. 復(fù)制 emoji 符號(hào)：優(yōu)點(diǎn)是能保證符號(hào)的形式，但顯然每次用都需要去復(fù)制，比較麻煩。

輸入法聯(lián)想

在 Typora 中，你可以用 :emoji: 的形式來打出 emoji，軟件會(huì)自動(dòng)給出圖形的提示，還是比較好用的。

Typora 中輸入 emoji

一個(gè)學(xué)術(shù)文檔編輯器

除了基本的文本編輯體驗(yàn)極佳之外，Typora 還是一個(gè)非常優(yōu)秀的學(xué)術(shù)文檔編輯器。當(dāng)然作為一個(gè)輕量級(jí)的、基于 Markdown 的編輯器，它不能與那些 LaTeX 編輯器相提并論，但它仍支持了許多可用于學(xué)術(shù)寫作的功能。

LaTeX

LaTeX 是一種基于 TeX 的排版系統(tǒng)，由于它易于快速生成復(fù)雜表格和數(shù)學(xué)公式，非常適用于生成高印刷質(zhì)量的科技和數(shù)學(xué)類文檔。如果你常閱讀數(shù)學(xué)、計(jì)算機(jī)等領(lǐng)域的學(xué)術(shù)論文，你一定對(duì) LaTeX 不陌生。

Typora 原生支持 LaTeX 語法，你有兩種方式輸入 LaTeX 風(fēng)格的數(shù)學(xué)公式：

1. 行內(nèi)公式（inline）：用 $...$ 括起公式，公式會(huì)出現(xiàn)在行內(nèi)。
2. 塊間公式（display）：用 $$...$$ 括起公式（注意 $$ 后需要換行），公式會(huì)默認(rèn)顯示在行中間。

具體的 LaTeX 語法在此不贅述了，你可以在 這篇文章 中查看。

代碼高亮

Typora 中代碼的插入也可以分為行內(nèi)和塊間兩種：

1. 行內(nèi)代碼：用 `...` 或 ``...`` 括起代碼，代碼會(huì)以主題中設(shè)置的樣式出現(xiàn)在行內(nèi)，但不會(huì)實(shí)現(xiàn)代碼高亮。
2. 代碼塊：輸入 ``` 后并輸入語言名，換行，開始寫代碼，Typora 就會(huì)自動(dòng)幫你實(shí)現(xiàn)代碼高亮。Typora 原生支持許多編程語言代碼塊的語法高亮，基本日常常用的編程語言它都能很好地支持。
3. 除此以外，你也可以直接換行開始寫，而后再選擇語言。

代碼塊

表格

在 Markdown 中插入表格一直是一件比較頭疼的事情。在一般的 Markdown 編輯器中，你可以通過以下的格式插入表格：

| 左對(duì)齊 | 右對(duì)齊 | 居中對(duì)齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

乍一看還挺直觀好用的是吧？但想想，一旦表格內(nèi)容層次不齊，又或是表格長得難以下手，直接用鍵盤輸入表格就顯得十分麻煩和痛苦了。

好在 Typora 為我們提供了圖形界面的插入表格的功能，你只需要在行內(nèi) 鼠標(biāo)右鍵 - 插入 - 表格，并輸入行數(shù)和列數(shù)，Typora 就會(huì)自動(dòng)生成一張樣式不錯(cuò)的空表格。

Typora 表格

鏈接引用與腳注

鏈接引用類似于我們常在論文末尾看到的「參考文獻(xiàn)」的寫法，你可以通過 []: 的語法來為你的文檔加上鏈接引用。

腳注在少數(shù)派的文章中也很常見，即某段話結(jié)尾右上角標(biāo)有數(shù)字標(biāo)記，頁面底部進(jìn)行注釋的寫法。你可以在需要插入腳注標(biāo)號(hào)的位置寫 [^ number ] ，再在下方通過 [^ number ]: 在文檔中插入腳注。注意不要遺漏了腳注編號(hào) number 前后的空格。

鏈接引用和腳注

文件系統(tǒng)

除了前文提到的文件側(cè)邊欄，Typora 還提供了一些耦合度不高的文件系統(tǒng)。

• 快速打開：你可以通過 文件 - 快速打開... 或 Ctrl + P 快捷鍵快速打開最近的文檔。
• 保存：Typora 支持自動(dòng)保存，一般很少有寫好的文檔丟失的情況。同時(shí)它也提供了諸如「保存」、「另存為」、「保存全部打開的文件...」之類的功能。
• 導(dǎo)入：Typora 支持非常多的文件格式：.docx, .latex, .tex, .ltx, .rst, .rest, .org, .wiki, .dokuwiki, .textile, .opml, .epub。
• 導(dǎo)出：Typora 原生支持導(dǎo)出 PDF，HTML等格式。你可以根據(jù)軟件內(nèi)提示安裝 Pandoc 插件來導(dǎo)出更多例如 docx，LaTeX 等格式。

導(dǎo)出

一個(gè)偽裝成文本編輯器的瀏覽器

當(dāng)我的一個(gè)朋友問我「Typora 有什么好寫的？」時(shí)，我回答「Typora 是一個(gè)偽裝成文本編輯器的瀏覽器」。是的，事實(shí)上如果你有一定的計(jì)算機(jī)基礎(chǔ)，你可以找到許多有關(guān)于「Typora 其實(shí)是一個(gè)瀏覽器」的蛛絲馬跡。

圖片插入

在圖片插入的選項(xiàng)中，Typora 用了「復(fù)制圖片到 ./${filename}.assets 文件夾」的說法，而這其實(shí)是網(wǎng)頁前端常用的 Javascript 字符串模板語法的風(fēng)格。

再比如，Typora 將更遵循 GFM 標(biāo)準(zhǔn)的 Markdown 語法模式稱為「嚴(yán)格模式 Strict Mode」，這一說法常見于 HTML 和 JavaScript 編程中。類似「源代碼模式」的說法也是同理。

當(dāng)然，最明顯的一點(diǎn)是當(dāng)你按下 Shift + F12 快捷鍵時(shí)，頁面會(huì)彈出一個(gè)基于 Chrome 的開發(fā)者工具欄，也就是我們?cè)跒g覽器中常說的「審查元素」。

審查元素

偽裝從何而來？

當(dāng)我們把視角放在「Typora 是一個(gè)支持 Markdown 語言的文本編輯器」的出發(fā)點(diǎn)來考慮這個(gè)問題，一切就都顯得很明白了。

John Gruber 在 2004 年用 Perl 創(chuàng)造了 Markdown 語言，這個(gè)語言的目的是希望大家使用「易于閱讀、易于撰寫的純文字格式，并選擇性的轉(zhuǎn)換成有效的 XHTML（或是 HTML）」。也就是說，在 Markdown 誕生之初，它就是為了被瀏覽器閱讀而設(shè)計(jì)的。

我們?cè)谟?Markdown 語言撰寫文稿的時(shí)候，其實(shí)本質(zhì)上是在借助某種編程語言的轉(zhuǎn)化（解析器）來編寫一個(gè) HTML 網(wǎng)頁。Markdown 從它誕生之初就與 Web 技術(shù)有著及其緊密的聯(lián)系。

如果我說，我們每一篇文稿都是一個(gè)網(wǎng)頁，那就很好理解了。Typora 利用解析器先將我們寫的 Markdown 文檔解析成為 HTML 文檔，再為它嵌入一個(gè) CSS 樣式，最后再加上可能需要的腳本等。

HTML

HTML 是一種標(biāo)記語言，主要負(fù)責(zé)構(gòu)成網(wǎng)頁的骨架，它包含所有不加裝飾的網(wǎng)頁元素。在 Typora 的使用場(chǎng)景下則是所有的文本、段落、標(biāo)題等的記號(hào)。

你可以把一張網(wǎng)頁想象成一幅數(shù)字油畫，HTML 就是那個(gè)黑白線條的底，上面寫滿了數(shù)字標(biāo)記，示意你哪一塊區(qū)域要涂什么顏色。而 CSS 則負(fù)責(zé)在對(duì)應(yīng)的區(qū)域涂上顏色，甚至加上一些裝飾等。

數(shù)字油畫

HTML 標(biāo)簽

Typora 支持許多常用的 HTML 標(biāo)簽，如果你了解 HTML 語法的話，你可以寫出十分美觀豐富的文檔頁面。

HTML 標(biāo)簽

事實(shí)上你可以在 Typora 中完成許多基本的 HTML 風(fēng)格的文本輸入，例如 HTML 字符、HTML 塊、HTML 風(fēng)格的注釋，甚至是視頻和音頻。具體支持的功能和限制請(qǐng)?jiān)?官方文檔 中查閱。

有了這一功能，我們就可以在 Typora 中創(chuàng)造出遠(yuǎn)超普通 Markdown 文檔的頁面效果。

導(dǎo)出為 HTML

Typora 原生支持將文檔導(dǎo)出為 HTML 格式的文件，并選擇是否要嵌入 style（也就是后文我將提到的 CSS 的部分）。

除此之外，由于其本身「瀏覽器」的屬性，你可以直接在實(shí)時(shí)預(yù)覽界面用 Ctrl +C 復(fù)制到 HTML 代碼。一個(gè)實(shí)用的用處是將這些 HTML 代碼直接 Ctrl + V 黏貼到微信公眾號(hào)后臺(tái)，基本可以保證兩邊顯示效果相同。這一點(diǎn)不僅使公眾號(hào)推送可以有更自由、美觀的樣式，也讓編輯、排版更輕松了。（由于微信自帶瀏覽器的一些特性，可能有少部分 CSS style 不能生效，建議多多校對(duì)。）

公眾號(hào)

具體如何用 Typora 完成公眾號(hào)寫作，你可以在 這篇文章 中進(jìn)一步了解。

CSS

為了讓文檔更美觀，我們可以為其加上 CSS style。我認(rèn)為 Typora 對(duì) CSS 的支持讓它成為一眾桌面筆記應(yīng)用中最與眾不同的一個(gè)。在 Typora 中 CSS 被稱為「主題」，但其本質(zhì)仍是 CSS 文件。你可以在 文件 - 偏好設(shè)置 - 主題 - 打開主題文件夾 看到這些 CSS 文件。

主題

主題文件夾

選擇不同的主題可以使文檔擁有不同的外觀，但不會(huì)影響內(nèi)容。Typora 自帶了若干主題，你也可以在 官網(wǎng) 下載更多的主題。

主題商店

除此以外，如果你有一定的 Web 編程基礎(chǔ)，你當(dāng)然也可以自己修改、新建適合你使用需求的 CSS 文件。我自己就寫了一份名為 WeChat 的 CSS 文件，來符合我公眾號(hào)特定的排版需求，例如正文是 15px，頁邊距是 8，小標(biāo)題是 18px 等等。

CSS 文件

使用 Typora 的「主題」功能寫公眾號(hào)的一個(gè)好處是，只需要每次都套用同樣的主題，我們就可以在保證每次排版規(guī)范都相同的同時(shí)，節(jié)省許多重復(fù)的工作。

YAML front-matter

Typora 支持在文檔頭部加上基于 YAML 的 front-matter 信息，這一特性適用于把 Markdown 文檔分類歸檔上傳到用 Hexo 框架搭建的博客中。我對(duì)于這一點(diǎn)不太了解，這里就不誤導(dǎo)大家了。有所了解的朋友可以在評(píng)論區(qū)談?wù)劊?/p>

tips：

我想，能夠潛心三年多打磨、測(cè)試一個(gè)產(chǎn)品，開發(fā)者們一定是傾注了極大的心血到這款筆記應(yīng)用中。而在使用中，我也能體會(huì)到開發(fā)者的良苦用心。他們不想做知識(shí)的儲(chǔ)備中心，不想做快速的草稿、筆記應(yīng)用，也不想做任何和生產(chǎn)力無關(guān)的功能和特性。對(duì)于 Typora 的設(shè)計(jì)和構(gòu)想，只有唯一的宗旨——「生產(chǎn)效率」。

因?yàn)橐苿?dòng)端生產(chǎn)效率低，所以只有桌面端應(yīng)用。因?yàn)樽箢櫽遗蔚膬蓹谑筋A(yù)覽影響思路，所以他們甚至去掉了 Markdown 語法標(biāo)記，只留下最終呈現(xiàn)的樣式。因?yàn)?Markdown 是為了 HTML 呈現(xiàn)而設(shè)計(jì)的，所以他們提供了從入門到高級(jí)的一系列 Web 輔助功能…… 這一切都只是為了純粹的生產(chǎn)效率。如果我們回頭想想，Markdown 語言本身，當(dāng)初不也是為了高效地生成簡(jiǎn)單網(wǎng)頁而誕生的嗎？

關(guān)注了解更多前沿科技信息！

作者：蝸牛直達(dá)