Markdown編輯器千千萬，可是有顏值、功能強并且免費的，就沒有幾個了。之前一直在用Mou，分屏預(yù)覽模式方便得很，是一個非常好的選擇。不過這篇可不是要推薦大家去用Mou，畢竟它只支持Mac這一平臺，如果感興趣的話可以去官網(wǎng)觀摩一下Mou。
最近我開始轉(zhuǎn)投新陣營Typora了，它簡潔、跨平臺、所見即所得，并且可定制性高，功能強大。
這篇文章只說兩點，Typora的一些有用的設(shè)置以及修改代碼塊(Code Fences)樣式。
開啟有用的特性
開啟行內(nèi)公式特性支持
Typora默認已經(jīng)支持數(shù)學(xué)公式了，只需要輸入$$后敲擊回車鍵即可開始填寫公式，不過這樣只能使用行間模式(display)，如果我們需要使用行內(nèi)模式(inline)的話，就需要手動開啟了。
打開Typora的偏好設(shè)置，選擇「Markdown」這一選項，在「Markdown Support」這里可以看到有5個選項，分別是：行內(nèi)公式、下標(biāo)、上標(biāo)、高亮以及圖表功能。
Markdown選項
這些選項默認是沒有勾選的，我們將「Inline Math」勾選上，就可以開啟行內(nèi)公式的特性支持了，使用方式是在兩個$間填寫公式，如:$E=mc^2$。
注意: 在「Markdown」選項卡下的所有更改，都需要重啟Typora才會生效。
來看一下行內(nèi)公式和行間公式的效果:
開啟關(guān)鍵詞高亮特性
在做一些文摘和筆記的時候，我們有時候需要對某些重點的段落或關(guān)鍵詞進行醒目的標(biāo)注，開啟「Highlight」這一特性的支持，可以讓我們方便地使用高亮功能來進行標(biāo)注。使用時只需要將想要高亮的段落或關(guān)鍵詞用==包裹起來即可，如:==高亮特性==。
開啟圖表繪制功能
使用markdown寫東西的時候，難免會需要用到圖表，例如流程圖、甘特圖等，這時候要切出去使用Viso等工具繪制之后導(dǎo)出成圖片格式再導(dǎo)入到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)錯誤，只需要修改一點文字就可以搞定，豈不快哉～
關(guā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標(biāo)題欄右側(cè)的。
最后再提一個特性，對經(jīng)常貼代碼的程序猿們是非常有用的，就是顯示行號。在「Markdown」選項里，勾選「Code Fences」這一項，然后重啟Typora即可開啟這一特性。
修改代碼塊樣式
Typora的代碼塊語法高亮使用的是CodeMirror實現(xiàn)的，所以需要更換代碼塊的樣式，我們可以去CodeMirror提供的主題里下載樣式表文件進行修改。
我個人最喜歡的當(dāng)屬基于Sublime Text的Monokai樣式了，在這里可以看到樣式內(nèi)容。替換自己喜歡的樣式到Typora，只需要兩步即可:
把樣式表的內(nèi)容復(fù)制粘貼到主題目錄themes下的base.user.css或[theme].user.css樣式表文件內(nèi)，其中[theme]表示對應(yīng)的主題的名字，我使用的主題是Github，所以我修改的是github.user.css文件。粘貼進去之后把.cm-s-monokai統(tǒng)一改成.cm-s-inner，使用查找替換功能可以瞬間完成 :)
在以上樣式的底部，添加代碼塊的基礎(chǔ)樣式到樣式表中，如font-family, color還有background等屬性，完成后的樣式表內(nèi)容應(yīng)該是類似這樣的:
/* 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下沒有對應(yīng)的.css文件，自己手動創(chuàng)建即可。
就這樣，代碼塊樣式的修改已經(jīng)完成了，最終效果如下:
codefences
有話說
Markdown這么好的東西你還不趕緊用起來？那什么word啊、pages啊，哪兒能了啊，專注寫作才是正道嘛！
好馬配好鞍，一個稱手編輯器可以讓你更好地進行寫作，Typora用起來～
PS: 本文旨在安利Typora，不會對市面上眾多的markdown編輯器進行對比和評測，只要好用而且對口味就好了，不是嗎？
typora 快捷鍵
無序列表：輸入-之后輸入空格
有序列表：輸入數(shù)字+“.”之后輸入空格
任務(wù)列表：-[空格]空格 文字
標(biāo)題：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——關(guān)于 Typora
Preferences——偏好（設(shè)置）——?，
Check for Updates——檢查更新
Services——服務(wù)
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——關(guān)閉——?W
Save...——保存——?S
Duplicate——另存為——??S
Rename——重命名
Move To...——移動到
Revert To——恢復(fù)
Export——輸出
Page? Setup...——頁面設(shè)置——??P
Print...——打印——?P
Edit——編輯
Undo——撤消——?Z
Redo——重做——?Y
Cut——剪切——?X
Copy——復(fù)制——?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ù)學(xué)工具
Image? Tools——圖片工具
Find——尋找
Spelling? and? Grammar——拼寫和語法
Substitutions——替換
Speech——語音
Start? Dictation…——開始聽寫
Emoji? &? Symbosls——表情 & 符號——??Space
Paragraph——段落
Heading? 1——標(biāo)題1——?1
Heading? 2——標(biāo)題2——?2
Heading? 3——標(biāo)題3——?3
Heading? 4——標(biāo)題4——?4
Heading? 5——標(biāo)題5——?5
Paragraph——段落——?0
Table——表格——?T
Code? Fences——代碼欄——??C
Math? Block——數(shù)字塊——??B
Quote——引用——??Q
Ordered? List——順序列表——??O
Unordered? List——無序列表——??U
Task? List——任務(wù)列表——??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
