來源:https://sspai.com/post/54912/
Typora 一直是我認為桌面端筆記應用應有的終極形態。用我之前 一篇文章 中的話來說就是,「它的功能之強大、設計之冷靜、體驗之美妙、理念之先進,我認為值得所有筆記應用廠商學習。」
但一件很尷尬的事情是,由於它極簡的設計理念,有許多使用者並沒能完全地了解到 Typora 的全部強大功能。我想在這篇文章中由淺入深地介紹 Typora 的功能亮點。無論你從未用過 Typora,還是已經體驗了很久,我相信你都能在這篇文章中發現 Typora 新的驚喜。
Typora 是什么?
Typora 是一款支持實時預覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個平台的版本,並且由於仍在測試中,是完全免費的。
在這篇文章中,我希望以「Typora 是什么」這個問題為線索,向大家全面介紹這款令人愛不釋手的筆記應用。
一個 Markdown 文本編輯器
Typora 首先是一個 Markdown 文本編輯器,它支持且僅支持 Markdown 語法的文本編輯。在 Typora 官網 上他們將 Typora 描述為 「A truly minimal markdown editor. 」。
官網首頁
關於 Markdown
Markdown 是用來編寫結構化文檔的一種純文本格式,它使我們在雙手不離開鍵盤的情況下,可以對文本進行一定程度的格式排版。你可以在 這篇文章 中快速入門 Markdown。
由於目前還沒有一個權威機構對 Markdown 的語法進行規范,各應用廠商制作時遵循的 Markdown 語法也是不盡相同的。其中比較受到認可的是 GFM 標准,它是由著名代碼托管網站 GitHub 所制定的。Typora 主要使用的也是 GFM 標准。同時,你還可以在 文件 - 偏好設置 - Markdown 語法偏好 - 嚴格模式
中將標准設置為「更嚴格地遵循 GFM 標准」。具體內容你可以在官方的 這篇文檔 中查看。
嚴格模式
寫得舒服
一個文本編輯器,寫得舒服是關鍵。我曾說過,「更有趣的是,一個筆記應用不會因為它支持 Markdown 語法而高級或易用很多。」,細枝末節處的人性化考慮才是最重要的。而 Typora 的編輯體驗顯然是經過深思熟慮設計的產物。
我認為:一個優秀的筆記應用應該給用戶選擇 Markdown 語法風格的權利。而 Typora 在這一點上是我目前見過所有 Markdown 筆記應用中做得最好的。
文本編輯設置
通過打開 文件 - 偏好設置
你會發現 Typora 為編輯體驗的考慮細致到了令人嘆為觀止的程度。Typora 中提供了大量有關 Markdown 偏好的設置,據此,你可以構建一個幾乎完全適合自己的 Markdown 編輯器。下面我將依次介紹一些與文本編輯體驗有關的功能亮點。
智能標點
我認為「智能標點」是比較有趣的一點。它可以自動幫你將不是很美觀的直引號 "
'
轉化為更美觀的彎引號 “
‘
’
”
。具體內容你可以在官方的 這篇文檔 中查看。關於直彎引號在 macOS 上如何輸入你也可以看 這篇文章。
圖片插入
Typora 的圖片插入功能是廣受好評的。要知道,Markdown 原生不太注重圖片插入的功能,但你可以在 Typora 中:
- 直接使用
右鍵 - 復制 Ctrl + V
將網絡圖片、剪貼板圖片復制到文檔中 - 拖動本地圖片到文檔中
Typora 會自動幫你插入符合 Markdown 語法的圖片語句,並給它加上標題。
復制圖片
你也完全可以使用圖床來保證文檔在分享后圖片仍能正常顯示。
更強大的是,Typora 支持在拖動或 Ctrl + V
網絡圖片后自動將其保存到本地。你可以在 文件 - 偏好設置 - 編輯器 - 圖片插入
中選擇復制到哪個路徑,什么情況下需要復制。
圖片插入
這一功能保證了即使網絡圖片源失效了,你還有本地的備份可用。同時也能使你的文檔文件夾更合理、完整。
打字機模式和專注模式
「打字機模式」使得你所編輯的那一行永遠處於屏幕正中。
「專注模式」使你正在編輯的那一行保留顏色,而其他行的字體呈灰色。
你可以在 視圖 - 專注模式 / 打字機模式
中勾選使用這兩個模式。
兩種模式
實時預覽
我想很果斷地下這個結論:到現在還不支持編輯界面實時預覽的 Markdown 編輯器基本可以退出市場了。Typora 在這一方面顯然已經領先了一大步——他們連 Markdown 語法的標記都在實時預覽中消去了。當你離開正在編輯的有格式的文本段后,Typora 會自動隱藏 Markdown 標記,只留下「所見即所得」的美妙。他們把這稱為 Hybrid View。
所見即所得
為了防止一些程序 bug 的發生(雖然在我使用下來感到是很少的)導致格式問題無法修改,Typora 保留了一個「源代碼模式」。你可以通過 視圖 - 源代碼模式
或左下角的 </>
按鈕進入。
源代碼模式
大綱 / 文件側邊欄
側邊欄
Typora 會根據你 Markdown 標記的 H1、H2、H3…… 各級標題為你呈現一個大綱。
你也可以選擇查看文件夾中的文件,但由於目前 Typora 只支持查看 md 文件,因此我認為文件側邊欄這個功能還是很雞肋的。
空格與換行
Typora 在空格與換行部分主要是使用 CommonMark 作為標注規范。與前文提到的 GFM 一樣,CommonMark 也是比較流行的 Markdown 語言規范(解析器)之一。
- 空格:在輸入連續的空格后,Typora 會在編輯器視圖里為你保留這些空格,但當你打印或導出時,這些空格會被省略成一個。
你可以在源代碼模式下,為每個空格前加一個\
轉義符,或者直接使用 HTML 風格的&nbps;
來保持連續的空格。 - 軟換行:需要說明的是,在 Markdown 語法中,換行(line break)與換段是不同的。且換行分為軟換行和硬換行。在 Typora 中,你可以通過
Shift + Enter
完成一次軟換行。軟換行只在編輯界面可見,當文檔被導出時換行會被省略。 - 硬換行:你可以通過
空格 + 空格 + Shift + Enter
完成一次硬換行,而這也是許多 Markdown 編輯器所原生支持的。硬換行在文檔被導出時將被保留,且沒有換段的段后距。 - 換段:你可以通過
Enter
完成一次換段。Typora 會自動幫你完成兩次Shift + Enter
的軟換行,從而完成一次換段。這也意味着在 Markdown 語法下,換段是通過在段與段之間加入空行來實現的。 - Windows 風格(CR+LF)與 Unix 風格(CR)的換行符:CR 表示回車
\r
,即回到一行的開頭,而 LF 表示換行\n
,即另起一行。
所以 Windows 風格的換行符本質是「回車 + 換行」,而 Unix 風格的換行符是「換行」。這也是為什么 Unix / Mac 系統下的文件,如果在 Windows 系統直接打開會全部在同一行內。 你可以在文件 - 偏好設置 - 編輯器 - 默認換行符
中對此進行切換。
下附以上各空格、換行、換段的測試結果圖。具體內容你可以在官網的 這篇文檔 中查閱。
空格、換行、換段
emoji 表情
如今 emoji 表情越來越多地出現在一些網站文章中,但在桌面端(特別是 Windows 系統)文本編輯器上插入 emoji 是一件十分麻煩的事情。在使用 Typora 之前,我打出 emoji 表情的辦法基本有兩個:
- 輸入法聯想:優點是比較方便,但會插入一張圖片而不是一個字符,在許多情景下都不是很合適。
- 復制 emoji 符號:優點是能保證符號的形式,但顯然每次用都需要去復制,比較麻煩。

在 Typora 中,你可以用 :emoji:
的形式來打出 emoji,軟件會自動給出圖形的提示,還是比較好用的。
Typora 中輸入 emoji
一個學術文檔編輯器
除了基本的文本編輯體驗極佳之外,Typora 還是一個非常優秀的學術文檔編輯器。當然作為一個輕量級的、基於 Markdown 的編輯器,它不能與那些 LaTeX 編輯器相提並論,但它仍支持了許多可用於學術寫作的功能。
LaTeX
LaTeX 是一種基於 TeX 的排版系統,由於它易於快速生成復雜表格和數學公式,非常適用於生成高印刷質量的科技和數學類文檔。如果你常閱讀數學、計算機等領域的學術論文,你一定對 LaTeX 不陌生。
Typora 原生支持 LaTeX 語法,你有兩種方式輸入 LaTeX 風格的數學公式:
- 行內公式(inline):用
$...$
括起公式,公式會出現在行內。 - 塊間公式(display):用
$$...$$
括起公式(注意$$
后需要換行),公式會默認顯示在行中間。
具體的 LaTeX 語法在此不贅述了,你可以在 這篇文章 中查看。
代碼高亮
Typora 中代碼的插入也可以分為行內和塊間兩種:
- 行內代碼:用
`...`
或``...``
括起代碼,代碼會以主題中設置的樣式出現在行內,但不會實現代碼高亮。 - 代碼塊:輸入
```
后並輸入語言名,換行,開始寫代碼,Typora 就會自動幫你實現代碼高亮。Typora 原生支持許多編程語言代碼塊的語法高亮,基本日常常用的編程語言它都能很好地支持。
除此以外,你也可以直接換行開始寫,而后再選擇語言。
代碼塊
表格
在 Markdown 中插入表格一直是一件比較頭疼的事情。在一般的 Markdown 編輯器中,你可以通過以下的格式插入表格:
| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |
乍一看還挺直觀好用的是吧?但想想,一旦表格內容層次不齊,又或是表格長得難以下手,直接用鍵盤輸入表格就顯得十分麻煩和痛苦了。
好在 Typora 為我們提供了圖形界面的插入表格的功能,你只需要在行內 鼠標右鍵 - 插入 - 表格
,並輸入行數和列數,Typora 就會自動生成一張樣式不錯的空表格。
Typora 表格
鏈接引用與腳注
鏈接引用類似於我們常在論文末尾看到的「參考文獻」的寫法,你可以通過 []:
的語法來為你的文檔加上鏈接引用。
腳注在少數派的文章中也很常見,即某段話結尾右上角標有數字標記,頁面底部進行注釋的寫法。你可以在需要插入腳注標號的位置寫 [^ number ]
,再在下方通過 [^ number ]:
在文檔中插入腳注。注意不要遺漏了腳注編號 number
前后的空格。
鏈接引用和腳注
文件系統
除了前文提到的文件側邊欄,Typora 還提供了一些耦合度不高的文件系統。
- 快速打開:你可以通過
文件 - 快速打開...
或Ctrl + P
快捷鍵快速打開最近的文檔。 - 保存:Typora 支持自動保存,一般很少有寫好的文檔丟失的情況。同時它也提供了諸如「保存」、「另存為」、「保存全部打開的文件...」之類的功能。
- 導入:Typora 支持非常多的文件格式:.docx, .latex, .tex, .ltx, .rst, .rest, .org, .wiki, .dokuwiki, .textile, .opml, .epub。
- 導出:Typora 原生支持導出 PDF,HTML等格式。你可以根據軟件內提示安裝 Pandoc 插件來導出更多例如 docx,LaTeX 等格式。

一個偽裝成文本編輯器的瀏覽器
當我的一個朋友問我「Typora 有什么好寫的?」時,我回答「Typora 是一個偽裝成文本編輯器的瀏覽器」。是的,事實上如果你有一定的計算機基礎,你可以找到許多有關於「Typora 其實是一個瀏覽器」的蛛絲馬跡。
圖片插入
在圖片插入的選項中,Typora 用了「復制圖片到 ./${filename}.assets 文件夾」的說法,而這其實是網頁前端常用的 Javascript 字符串模板語法的風格。
再比如,Typora 將更遵循 GFM 標准的 Markdown 語法模式稱為「嚴格模式 Strict Mode」,這一說法常見於 HTML 和 JavaScript 編程中。類似「源代碼模式」的說法也是同理。
當然,最明顯的一點是當你按下 Shift + F12
快捷鍵時,頁面會彈出一個基於 Chrome 的開發者工具欄,也就是我們在瀏覽器中常說的「審查元素」。
審查元素
偽裝從何而來?
當我們把視角放在「Typora 是一個支持 Markdown 語言的文本編輯器」的出發點來考慮這個問題,一切就都顯得很明白了。
John Gruber 在 2004 年用 Perl 創造了 Markdown 語言,這個語言的目的是希望大家使用「易於閱讀、易於撰寫的純文字格式,並選擇性的轉換成有效的 XHTML(或是 HTML)」。也就是說,在 Markdown 誕生之初,它就是為了被瀏覽器閱讀而設計的。
我們在用 Markdown 語言撰寫文稿的時候,其實本質上是在借助某種編程語言的轉化(解析器)來編寫一個 HTML 網頁。Markdown 從它誕生之初就與 Web 技術有着及其緊密的聯系。
如果我說,我們每一篇文稿都是一個網頁,那就很好理解了。Typora 利用解析器先將我們寫的 Markdown 文檔解析成為 HTML 文檔,再為它嵌入一個 CSS 樣式,最后再加上可能需要的腳本等。
HTML
HTML 是一種標記語言,主要負責構成網頁的骨架,它包含所有不加裝飾的網頁元素。在 Typora 的使用場景下則是所有的文本、段落、標題等的記號。
你可以把一張網頁想象成一幅數字油畫,HTML 就是那個黑白線條的底,上面寫滿了數字標記,示意你哪一塊區域要塗什么顏色。而 CSS 則負責在對應的區域塗上顏色,甚至加上一些裝飾等。
數字油畫
HTML 標簽
Typora 支持許多常用的 HTML 標簽,如果你了解 HTML 語法的話,你可以寫出十分美觀豐富的文檔頁面。
HTML 標簽
事實上你可以在 Typora 中完成許多基本的 HTML 風格的文本輸入,例如 HTML 字符、HTML 塊、HTML 風格的注釋,甚至是視頻和音頻。具體支持的功能和限制請在 官方文檔 中查閱。
有了這一功能,我們就可以在 Typora 中創造出遠超普通 Markdown 文檔的頁面效果。
導出為 HTML
Typora 原生支持將文檔導出為 HTML 格式的文件,並選擇是否要嵌入 style(也就是后文我將提到的 CSS 的部分)。
除此之外,由於其本身「瀏覽器」的屬性,你可以直接在實時預覽界面用 Ctrl +C
復制到 HTML 代碼。一個實用的用處是將這些 HTML 代碼直接 Ctrl + V
黏貼到微信公眾號后台,基本可以保證兩邊顯示效果相同。這一點不僅使公眾號推送可以有更自由、美觀的樣式,也讓編輯、排版更輕松了。(由於微信自帶瀏覽器的一些特性,可能有少部分 CSS style 不能生效,建議多多校對。)
公眾號
具體如何用 Typora 完成公眾號寫作,你可以在 這篇文章 中進一步了解。
CSS
為了讓文檔更美觀,我們可以為其加上 CSS style。我認為 Typora 對 CSS 的支持讓它成為一眾桌面筆記應用中最與眾不同的一個。在 Typora 中 CSS 被稱為「主題」,但其本質仍是 CSS 文件。你可以在 文件 - 偏好設置 - 主題 - 打開主題文件夾
看到這些 CSS 文件。
主題
主題文件夾
選擇不同的主題可以使文檔擁有不同的外觀,但不會影響內容。Typora 自帶了若干主題,你也可以在 官網 下載更多的主題。
主題商店
除此以外,如果你有一定的 Web 編程基礎,你當然也可以自己修改、新建適合你使用需求的 CSS 文件。我自己就寫了一份名為 WeChat 的 CSS 文件,來符合我公眾號特定的排版需求,例如正文是 15px,頁邊距是 8,小標題是 18px 等等。
CSS 文件
使用 Typora 的「主題」功能寫公眾號的一個好處是,只需要每次都套用同樣的主題,我們就可以在保證每次排版規范都相同的同時,節省許多重復的工作。
YAML front-matter
Typora 支持在文檔頭部加上基於 YAML 的 front-matter 信息,這一特性適用於把 Markdown 文檔分類歸檔上傳到用 Hexo 框架搭建的博客中。我對於這一點不太了解,這里就不誤導大家了。有所了解的朋友可以在評論區談談!
寫在最后
如果你看過 Typora 的 更新日志 你會發現它早在 2015 年 12 月 19 日就發布了 0.7.0 (alpha) 版本,但到目前為止它仍處於 beta 階段。截止到筆者寫作這篇文章的初稿時,Typora 的版本號為 0.9.9.24.6 (beta)。
我想,能夠潛心三年多打磨、測試一個產品,開發者們一定是傾注了極大的心血到這款筆記應用中。而在使用中,我也能體會到開發者的良苦用心。他們不想做知識的儲備中心,不想做快速的草稿、筆記應用,也不想做任何和生產力無關的功能和特性。對於 Typora 的設計和構想,只有唯一的宗旨——「生產效率」。
因為移動端生產效率低,所以只有桌面端應用。因為左顧右盼的兩欄式預覽影響思路,所以他們甚至去掉了 Markdown 語法標記,只留下最終呈現的樣式。因為 Markdown 是為了 HTML 呈現而設計的,所以他們提供了從入門到高級的一系列 Web 輔助功能…… 這一切都只是為了純粹的生產效率。如果我們回頭想想,Markdown 語言本身,當初不也是為了高效地生成簡單網頁而誕生的嗎?
最后,讓我們一起期待這款頂級桌面文本生產力工具的正式版的到來吧!😆
參考
- Front-matter - Hexo
- 讓 Markdown 寫作更簡單,免費極簡編輯器:Typora
- 使用 Typora 一次性搞定公眾號寫作與排版
- 簡中求效:Markdown 遇上 LaTeX
- 關於Typora + pandoc導出文件功能的介紹
- 我的 LaTeX 入門
- 選擇正確的 Markdown Parser
- Typora —— 能用 ⌘C⌘V 插圖的 Markdown 編輯器
- HTML Support in Typora - Typora
- Markdown - Wikipedia
- Windows、Unix、Mac不同操作系統的換行問題-剖析回車符\r和換行符\n
- 簡中求效:Markdown 遇上 LaTeX
- 通用標注 (CommonMark)
- Whitespace and Line Breaks - Typora