Markdown編輯器千千萬嫂丙，可是有顏值娘赴、功能強并且免費的，就沒有幾個了跟啤。之前一直在用Mou诽表，分屏預覽模式方便得很，是一個非常好的選擇隅肥。不過這篇可不是要推薦大家去用Mou竿奏，畢竟它只支持Mac這一平臺，如果感興趣的話可以去官網(wǎng)觀摩一下Mou腥放。
最近我開始轉(zhuǎn)投新陣營Typora了泛啸，它簡潔、跨平臺秃症、所見即所得候址，并且可定制性高，功能強大种柑。
這篇文章只說兩點岗仑，Typora的一些有用的設置以及修改代碼塊(Code Fences)樣式。
開啟有用的特性
開啟行內(nèi)公式特性支持
Typora默認已經(jīng)支持數(shù)學公式了聚请，只需要輸入$$后敲擊回車鍵即可開始填寫公式荠雕，不過這樣只能使用行間模式(display)，如果我們需要使用行內(nèi)模式(inline)的話驶赏，就需要手動開啟了炸卑。
打開Typora的偏好設置，選擇「Markdown」這一選項煤傍，在「Markdown Support」這里可以看到有5個選項盖文，分別是：行內(nèi)公式、下標蚯姆、上標椅寺、高亮以及圖表功能。
Markdown選項
這些選項默認是沒有勾選的蒋失，我們將「Inline Math」勾選上，就可以開啟行內(nèi)公式的特性支持了桐玻，使用方式是在兩個$間填寫公式篙挽，如:$E=mc^2$。
注意: 在「Markdown」選項卡下的所有更改镊靴，都需要重啟Typora才會生效铣卡。
來看一下行內(nèi)公式和行間公式的效果:
開啟關鍵詞高亮特性
在做一些文摘和筆記的時候链韭，我們有時候需要對某些重點的段落或關鍵詞進行醒目的標注，開啟「Highlight」這一特性的支持煮落，可以讓我們方便地使用高亮功能來進行標注敞峭。使用時只需要將想要高亮的段落或關鍵詞用==包裹起來即可，如:==高亮特性==蝉仇。
開啟圖表繪制功能
使用markdown寫東西的時候旋讹，難免會需要用到圖表，例如流程圖轿衔、甘特圖等沉迹，這時候要切出去使用Viso等工具繪制之后導出成圖片格式再導入到markdown中使用，就略顯麻煩了害驹，如果遇到一些錯誤需要修改鞭呕，就得重新來一遍，效率什么的就蕩然無存了宛官。
好在Typora有圖表繪制的功能提供給我們葫松，不過它默認是沒有開啟的。同樣是在「Markdown Support」里底洗，將「Diagrams」勾選即可開啟腋么。
流程圖
以上這個流程圖，是這樣繪制的:
?? ```flow
?? st=>start: Start
?? op=>operation: Your Operation
?? cond=>condition: Yes or No?
?? e=>end
?? st->op->cond
?? cond(yes)->e
?? cond(no)->op
?? ```
如果發(fā)現(xiàn)錯誤枷恕，只需要修改一點文字就可以搞定党晋，豈不快哉～
關于圖表這一特性的支持，這里將不作太多的演示徐块，詳細內(nèi)容請各位看官移步到官方提供的內(nèi)容查看 -Draw Diagrams With Markdown
其他特性
除了以上提到的未玻，還有一些有很方便的特性可以選擇性開啟，例如Emoji自動補全的特性胡控，默認是需要輸入之后按ESC鍵的扳剿，開啟之后只需要輸入文字就會自動出現(xiàn)候選的emoji，開啟位置是在「Editor」選項里昼激。使用方法是在輸入:和任意一個英文字母后庇绽，就會自動出現(xiàn)候選emoji，你可以用方向鍵選擇好你要的emoji后敲擊回車鍵橙困，將會自動補全瞧掺，或者自己手動輸入完整，如:smile:凡傅。
在「Appearance」選項里可以開啟數(shù)字統(tǒng)計功能辟狈，統(tǒng)計的結(jié)果是實時顯示在Typora標題欄右側(cè)的。
最后再提一個特性，對經(jīng)常貼代碼的程序猿們是非常有用的哼转，就是顯示行號明未。在「Markdown」選項里，勾選「Code Fences」這一項壹蔓，然后重啟Typora即可開啟這一特性趟妥。
修改代碼塊樣式
Typora的代碼塊語法高亮使用的是CodeMirror實現(xiàn)的，所以需要更換代碼塊的樣式佣蓉，我們可以去CodeMirror提供的主題里下載樣式表文件進行修改披摄。
我個人最喜歡的當屬基于Sublime Text的Monokai樣式了，在這里可以看到樣式內(nèi)容偏螺。替換自己喜歡的樣式到Typora行疏，只需要兩步即可:
把樣式表的內(nèi)容復制粘貼到主題目錄themes下的base.user.css或[theme].user.css樣式表文件內(nèi)，其中[theme]表示對應的主題的名字套像，我使用的主題是Github酿联，所以我修改的是github.user.css文件。粘貼進去之后把.cm-s-monokai統(tǒng)一改成.cm-s-inner夺巩，使用查找替換功能可以瞬間完成 :)
在以上樣式的底部贞让，添加代碼塊的基礎樣式到樣式表中，如font-family, color還有background等屬性柳譬，完成后的樣式表內(nèi)容應該是類似這樣的:
/* Based on Sublime Text's Monokai theme */
.cm-s-inner.CodeMirror { background: #272822; color: #f8f8f2; }
.cm-s-inner div.CodeMirror-selected { background: #49483E; }
.cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
.cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
.cm-s-inner .CodeMirror-gutters { background: #272822; border-right: 0px; }
.cm-s-inner .CodeMirror-guttermarker { color: white; }
.cm-s-inner .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
.cm-s-inner .CodeMirror-linenumber { color: #d0d0d0; }
.cm-s-inner .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
.cm-s-inner span.cm-comment { color: #75715e; }
.cm-s-inner span.cm-atom { color: #ae81ff; }
.cm-s-inner span.cm-number { color: #ae81ff; }
.cm-s-inner span.cm-property, .cm-s-inner span.cm-attribute { color: #a6e22e; }
.cm-s-inner span.cm-keyword { color: #f92672; }
.cm-s-inner span.cm-builtin { color: #66d9ef; }
.cm-s-inner span.cm-string { color: #e6db74; }
.cm-s-inner span.cm-variable { color: #f8f8f2; }
.cm-s-inner span.cm-variable-2 { color: #9effff; }
.cm-s-inner span.cm-variable-3 { color: #66d9ef; }
.cm-s-inner span.cm-def { color: #fd971f; }
.cm-s-inner span.cm-bracket { color: #f8f8f2; }
.cm-s-inner span.cm-tag { color: #f92672; }
.cm-s-inner span.cm-header { color: #ae81ff; }
.cm-s-inner span.cm-link { color: #ae81ff; }
.cm-s-inner span.cm-error { background: #f92672; color: #f8f8f0; }
.cm-s-inner .CodeMirror-activeline-background { background: #373831; }
.cm-s-inner .CodeMirror-matchingbracket {
? text-decoration: underline;
? color: white !important;
}
/**apply to code fences with plan text**/
.md-fences {
? background-color: #272822;
? color: #f8f8f2;
? border: none;
}
.md-fences .code-tooltip {
? background-color: #272822;
}
注意: 如果主題目錄themes下沒有對應的.css文件喳张，自己手動創(chuàng)建即可。
就這樣美澳，代碼塊樣式的修改已經(jīng)完成了销部，最終效果如下:
codefences
有話說
Markdown這么好的東西你還不趕緊用起來？那什么word啊制跟、pages啊舅桩，哪兒能了啊，專注寫作才是正道嘛雨膨！
好馬配好鞍擂涛，一個稱手編輯器可以讓你更好地進行寫作，Typora用起來～
PS: 本文旨在安利Typora聊记，不會對市面上眾多的markdown編輯器進行對比和評測撒妈，只要好用而且對口味就好了，不是嗎排监？
typora 快捷鍵
無序列表：輸入-之后輸入空格
有序列表：輸入數(shù)字+“.”之后輸入空格
任務列表：-[空格]空格 文字
標題：ctrl+數(shù)字
表格：ctrl+t
生成目錄：[TOC]按回車
選中一整行：ctrl+l
選中單詞：ctrl+d
選中相同格式的文字：ctrl+e
跳轉(zhuǎn)到文章開頭：ctrl+home
跳轉(zhuǎn)到文章結(jié)尾：ctrl+end
搜索：ctrl+f
替換：ctrl+h
引用：輸入>之后輸入空格
代碼塊：ctrl+alt+f
加粗：ctrl+b
傾斜：ctrl+i
下劃線：ctrl+u
刪除線：alt+shift+5
插入圖片：直接拖動到指定位置即可或者ctrl+shift+i
插入鏈接：ctrl+k
About Typora——關于 Typora
Preferences——偏好（設置）——?狰右，
Check for Updates——檢查更新
Services——服務
Hide Typora——隱藏 Typora——?H
Hide Other——隱藏 Other——??H
Show All——顯示全部
Quit Typora——退出 Typora——?Q
File——文件
New——新建——?N
Open..——打開 .——?O
Open Recent——打開最近
Open Quickly...——快速打開——??O
Open File Location——打開文件位置
Close——關閉——?W
Save...——保存——?S
Duplicate——另存為——??S
Rename——重命名
Move To...——移動到
Revert To——恢復
Export——輸出
Page? Setup...——頁面設置——??P
Print...——打印——?P
Edit——編輯
Undo——撤消——?Z
Redo——重做——?Y
Cut——剪切——?X
Copy——復制——?C
Paste——黏貼——?V
Delete——刪除
Copy? As? Markdown——另存為Markdown——??C
Copy? As? HTML Code——另存為超鏈接代碼——??C
Paste? As? Plain? Text——另存為純文本——??V
Select? All——全選——?A
Select? Line/Sentence——選擇行/句子——?L
Select? Styled? Scope——選擇段落——?E
Select? Word——選定單詞——?D
Jump? To——跳到...()
Math? Tools——數(shù)學工具
Image? Tools——圖片工具
Find——尋找
Spelling? and? Grammar——拼寫和語法
Substitutions——替換
Speech——語音
Start? Dictation…——開始聽寫
Emoji? &? Symbosls——表情 & 符號——??Space
Paragraph——段落
Heading? 1——標題1——?1
Heading? 2——標題2——?2
Heading? 3——標題3——?3
Heading? 4——標題4——?4
Heading? 5——標題5——?5
Paragraph——段落——?0
Table——表格——?T
Code? Fences——代碼欄——??C
Math? Block——數(shù)字塊——??B
Quote——引用——??Q
Ordered? List——順序列表——??O
Unordered? List——無序列表——??U
Task? List——任務列表——??X
List? Indentation——列表縮進
Link? Reference——參考鏈接——??L
Footnotes——腳注——??R
Horizontal? Line——水平線——??-
Table? of? Contents——目錄
YAML? Front? Matter
Format——格式
Strong——粗體——?B
Emphasis——重點（傾斜）——?I
Underline——下劃線——?U
Code——代碼——??`
Strike——中劃線——?~
Comment——評論
Hyperlink——超鏈接——?K
Image——圖片——??I
Clear? Format——清除格式——?\
View——查看
Source? Code? Mode——源代碼模式——?/
Focus? Mode——聚焦模式——??R
Typewriter? Mode——打字機模式
Toggle Outine Panel——面板切換——??B
Always? On? Top——總是在上面
Full? Screen——全屏——??F
Window——窗口
Minimize——最小化——?M
Zoom——變焦（偽全屏）
參考：
在 Markdown 中玩轉(zhuǎn) UML 時序圖：意外發(fā)現(xiàn)的 js-sequence-diagrams
