博客编辑神器:Markdown编辑器
什么是極客最愛的Markdown?
Markdown是一種輕量級(jí)的「標(biāo)記語言」,通常為程序員群體所用,目前它已是全球最大的技術(shù)分享網(wǎng)站 GitHub 和技術(shù)問答網(wǎng)站 StackOverFlow 的御用書寫格式
Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言,通過類似HTML的標(biāo)記語法,它可以使普通文本內(nèi)容具豐富多彩的格式
Markdown的語法十分簡單,常用的標(biāo)記符號(hào)不超過十個(gè),用于日常寫作記錄綽綽有余,不到半小時(shí)就能完全掌握。
就是這十個(gè)不到的標(biāo)記符號(hào),卻能讓人優(yōu)雅地沉浸式記錄,專注內(nèi)容而不是糾結(jié)排版,達(dá)到「心中無塵,碼字入神」的境界
- Markdown和擴(kuò)展Markdown簡潔的語法
- 代碼塊高亮
- 圖片鏈接和圖片上傳
- LaTex數(shù)學(xué)公式
- UML序列圖和流程圖
- 離線寫博客
- 導(dǎo)入導(dǎo)出Markdown文件
- 豐富的快捷鍵
利用Markdown可以做什么?
代碼高亮
制作待辦事項(xiàng)To-do List
高效繪制 流程圖、序列圖、甘特圖、表格
流程圖:
序列圖
甘特圖:
表格:
書寫數(shù)學(xué)公式
Markdown使用指南
標(biāo)題
標(biāo)題是每篇文章必備而且最常用的格式。
在Markdown中,如果想將一段文字定義為標(biāo)題,只需要在這段文字前面加上 #,再在 # 后加一個(gè)空格即可。還可增加二、三、四、五、六級(jí)標(biāo)題,總共六級(jí),只需要增加 # ,增加一個(gè) # ,標(biāo)題字號(hào)相應(yīng)降低一級(jí)。如圖:
列表
列表格式也很常用,它可以讓你的文稿變得井井有條。在 Markdown 中,你只需要在文字前面加上 - 就可以了;如果你希望是有序列表,在文字前面加上 1. 2. 3. 即可。
注:-、1.和文字之間要保留一個(gè)字符的空格。
引用
如果你需要在文稿中引用一段別處的句子,那么就要用到「引用」格式。
在引用文字前加上 > 并與文字保留一個(gè)字符的空格,即可。
粗體和斜體
Markdown 的粗體和斜體也非常簡單:
用兩個(gè) * 包含一段文本就是粗體的語法;
用一個(gè) * 包含一段文本就是斜體的語法。
鏈接與圖片
鏈接:在 Markdown 中,插入鏈接只需要使用[顯示文本](鏈接地址) 即可。
圖片:在 Markdown 中,插入圖片只需要使用 即可。
注:插入圖片的語法和鏈接的語法很像,只是前面多了一個(gè) !
分割線
分割線的語法只需要另起一行,連續(xù)輸入三個(gè)星號(hào) * 即可分割兩段文字內(nèi)容。
如圖:
表格
當(dāng)你需要在Markdown文稿中鍵入表格,代碼如下:
示例參考:
如上7大格式是寫作文稿時(shí)最常使用的。
怎么樣,看了相關(guān)Markdown語法是不是覺得挺簡單?
當(dāng)然,Markdown新手在使用不熟練的情況下,可能會(huì)忘記相關(guān)語法,也沒關(guān)系,筆記的工具欄內(nèi)置了Markdown語法,方便學(xué)習(xí)與熟悉。
如,「表格」語法相對(duì)復(fù)雜,你可能忘記了,這時(shí)候,你只需要點(diǎn)擊編輯框上方工具欄,點(diǎn)選「表格」的圖標(biāo),左邊編輯區(qū)便會(huì)出現(xiàn)「表格」相應(yīng)代碼:
然后,你只需要將代碼替換成相應(yīng)文本即可,如圖:
熟悉語法之后,還是建議大家少使用輔助工具欄,盡量自己鍵入代碼,感受純文本之美。
當(dāng)然,有道云筆記的Markdown還能支持制作待辦事項(xiàng),書寫流程圖、序列圖、甘特圖,書寫數(shù)學(xué)公式等,是不是夠極客,夠有逼格?
看看筆記菌用Markdown甘特圖寫的項(xiàng)目計(jì)劃時(shí)間表:
待辦和清單
待辦事項(xiàng)和清單在日常工作、生活中經(jīng)常被使用。
在Markdown中,你只需要在待辦的事項(xiàng)文本或者清單文本前加上- [ ]、- [x]即可。
- [ ] 表示未完成,- [x] 表示已完成。
注:鍵入字符與字符之間都要保留一個(gè)字符的空格。
具體呈現(xiàn)如下:
流程圖
在Markdown中,一段流程圖語法以 “開頭,以 “ 結(jié)尾。
在 “` 后另起一行,書寫graph XX,用以確定將要繪制的流程圖及其類型(XX表示流程圖類型)。
流程圖分為豎向和橫向兩大類,豎向包括自上而下和自下而上兩種順序,橫向包括從右到左和從左到右兩種順序。
其對(duì)應(yīng)語法分別為:graph TB/graph BT/graph RL/graph LR。
TB - top bottom(自上而下)
BT - bottom top(自下而上)
RL - right left(從右到左)
LR - left right(從左到右)
簡單示例如圖:
來學(xué)習(xí)一個(gè)具體案例:
仔細(xì)研究上述案例,會(huì)發(fā)現(xiàn),我們可以通過調(diào)整語法來調(diào)整流程圖的框線、連接線,不同條件能導(dǎo)向不同結(jié)果。
對(duì)框線形狀的調(diào)整,如
對(duì)箭頭的調(diào)整,如
只要充分掌握該語法,再復(fù)雜的流程圖也完全能用Markdown書寫!
更詳細(xì)的流程圖語法,可參見:http://knsv.github.io/mermaid/#flowcharts-basic-syntax
甘特圖
我們?cè)诠ぷ髦杏酶侍貓D作計(jì)劃進(jìn)度表、項(xiàng)目進(jìn)度表再合適不過了。
以如下甘特圖為例說明
與流程圖一樣,Markdown中,甘特圖的語法也是以 “開頭,以 “ 結(jié)尾。
在 “` 后另起一行,書寫 gantt ,用以確定將要繪制的是甘特圖。
標(biāo)題的書寫語法如下:
dateFormat YYYY-MM-DD規(guī)定了時(shí)間軸,title (標(biāo)題文本)表示甘特圖標(biāo)題。
如需按項(xiàng)目進(jìn)行劃分,需鍵入section,空一個(gè)字符,再輸入項(xiàng)目名稱的文本(一個(gè)section和另一個(gè)section之間要空行)。
每個(gè)大項(xiàng)目將拆解為若干個(gè)小任務(wù),只需在section之后另起一行,直接輸入小項(xiàng)目名稱即可。
更詳細(xì)的甘特圖語法,參見:http://knsv.github.io/mermaid/#styling39
Tips for 有道云筆記中的 Markdown
實(shí)時(shí)同步預(yù)覽,所看即所得
我們將筆記編輯界面一分為二,左邊為編輯區(qū),右邊為預(yù)覽區(qū),兩區(qū)滾動(dòng)條同步。在編輯區(qū)的操作能夠?qū)崟r(shí)反映在預(yù)覽區(qū),方便及時(shí)調(diào)整和查看最終版面效果。
工具欄內(nèi)置Markdown語法,方便新手學(xué)習(xí)
編輯頁面頂端的工具欄有對(duì)應(yīng)代碼,如果你是一個(gè)不熟悉Markdown語法的新手,可以先嘗試用工具欄輔助操作。也可以在網(wǎng)上搜索「Markdown語法指南」進(jìn)行學(xué)習(xí)。
當(dāng)然,如果你覺得工具欄太打擾,點(diǎn)擊下方分界條即可隱藏工具欄,切換到極簡編輯環(huán)境。
實(shí)時(shí)云端保存
Markdown模式繼承了有道云筆記的優(yōu)良傳統(tǒng),你每一次擊鍵的內(nèi)容都會(huì)實(shí)時(shí)保存在云端,無需擔(dān)心瀏覽器崩潰、設(shè)備沒電、突然斷網(wǎng)等情況。對(duì)于寫作者來說,更是再也不用擔(dān)心因?yàn)楦鞣N原因痛失文稿的情況了。
界面大小可點(diǎn)擊分界條調(diào)整。
點(diǎn)擊“1”處,工具欄收起;
點(diǎn)擊“2”處,右側(cè)預(yù)覽區(qū)收起。
點(diǎn)擊后效果如圖
http://note.youdao.com/iyoudao/?p=2411
快捷鍵
- 加粗 Ctrl + B
- 斜體 Ctrl + I
- 引用 Ctrl + Q
- 插入鏈接 Ctrl + L
- 插入代碼 Ctrl + K
- 插入圖片 Ctrl + G
- 提升標(biāo)題 Ctrl + H
- 有序列表 Ctrl + O
- 無序列表 Ctrl + U
- 橫線 Ctrl + R
- 撤銷 Ctrl + Z
- 重做 Ctrl + Y
Markdown及擴(kuò)展
Markdown 是一種輕量級(jí)標(biāo)記語言,它允許人們使用易讀易寫的純文本格式編寫文檔,然后轉(zhuǎn)換成格式豐富的HTML頁面。 —— [ 維基百科 ]
使用簡單的符號(hào)標(biāo)識(shí)不同的標(biāo)題,將某些文字標(biāo)記為粗體或者斜體,創(chuàng)建一個(gè)鏈接等,詳細(xì)語法參考幫助?。
本編輯器支持 Markdown Extra , 擴(kuò)展了很多好用的功能。具體請(qǐng)參考[Github]
表格
Markdown Extra 表格語法:
| Computer | $1600 |
| Phone | $12 |
| Pipe | $1 |
可以使用冒號(hào)來定義對(duì)齊方式:
| Computer | 1600 元 | 5 |
| Phone | 12 元 | 12 |
| Pipe | 1 元 | 234 |
定義列表
Markdown Extra 定義列表語法:項(xiàng)目1項(xiàng)目2定義 D
定義D內(nèi)容
代碼塊
代碼塊語法遵循標(biāo)準(zhǔn)markdown代碼,例如:
@requires_authorization def somefunc(param1='', param2=0):'''A docstring'''if param1 > param2: # interestingprint 'Greater'return (param2 - param1 + 1) or None class SomeClass:pass >>> message = '''interpreter ... prompt'''腳注
生成一個(gè)腳注[^footnote]
[^footnote]: 這里是 腳注 的 內(nèi)容
目錄
用 [TOC]來生成目錄
數(shù)學(xué)公式
使用MathJax渲染LaTex 數(shù)學(xué)公式,詳見[math.stackexchange.com]
- 行內(nèi)公式,數(shù)學(xué)公式為:Γ(n)=(n?1)!?n∈N。
- 塊級(jí)公式:
x=?b±b2?4ac???????√2a
更多LaTex語法請(qǐng)參考 [這兒]
UML 圖:
可以渲染序列圖:
Created with Rapha?l 2.1.0張三張三李四李四嘿,小四兒, 寫博客了沒?李四愣了一下,說:忙得吐血,哪有時(shí)間寫。或者流程圖:
Created with Rapha?l 2.1.0開始我的操作確認(rèn)?結(jié)束yesno- 關(guān)于 序列圖 語法,參考 [這兒]
- 關(guān)于 流程圖 語法,參考 [這兒]
離線寫博客
即使用戶在沒有網(wǎng)絡(luò)的情況下,也可以通過本編輯器離線寫博客(直接在曾經(jīng)使用過的瀏覽器中輸入write.blog.csdn.net/mdeditor即可。Markdown編輯器使用瀏覽器離線存儲(chǔ)將內(nèi)容保存在本地
用戶寫博客的過程中,內(nèi)容實(shí)時(shí)保存在瀏覽器緩存中,在用戶關(guān)閉瀏覽器或者其它異常情況下,內(nèi)容不會(huì)丟失。用戶再次打開瀏覽器時(shí),會(huì)顯示上次用戶正在編輯的沒有發(fā)表的內(nèi)容
博客發(fā)表后,本地緩存將被刪除
用戶可以選擇 把正在寫的博客保存到服務(wù)器草稿箱,即使換瀏覽器或者清除緩存,內(nèi)容也不會(huì)丟失
注意:雖然瀏覽器存儲(chǔ)大部分時(shí)候都比較可靠,但為了您的數(shù)據(jù)安全,在聯(lián)網(wǎng)后,請(qǐng)務(wù)必及時(shí)發(fā)表或者保存到服務(wù)器草稿箱
讓 Markdown 寫作更簡單,免費(fèi)極簡編輯器:Typora
數(shù)學(xué)公式對(duì)應(yīng)的markdown代碼
a2?b2=(a+b)(a?b)
a3?b3=(a+b)(a2?ab+b2)
a3+b3=(a?b)(a2+ab+b2)
(a+b)2=a2+2ab+b2
(a?b)2=a2?2ab+b2
ax2+bx+c=0
x1,2=?b±b2?4ac√2a
設(shè)x1,x2是一元二次方程ax2+bx+c=0的兩個(gè)根,則x1,x2滿足:
x1+x2=?ba
x1?x2=ca
設(shè)I為全集,?為空集,如果A是I的子集,B是I的子集,則A?I, B?I。
于是,
I∪A=I
I∩?=?
若Aˉ={x|x∈I且x?A,A?I},
Bˉ={x|x∈I且x?B,B?I}
則
A∪Aˉ=I
A∩Aˉ=?
A∩Bˉˉˉˉˉˉˉˉˉ=Aˉ∪Bˉ
A∪Bˉˉˉˉˉˉˉˉˉ=Aˉ∩Bˉ
8.1) |a|≥0
8.2) |a|?|b|≤|a+b|≤|a|+|b|
8.3) |a|≤b
8.5) |a|≤b??b≤a≤b (b>0)
8.6) a2+b2>2ab (a,b∈R)
8.7) a+b2≥ab??√ (a,b∈R+)
8.7) ba+ab≥2 (ab>0)
8.7) a+b+c3≥abc???√3 (a,b,c∈R)
8.7) a1+a2+…+ann≥a1a2…an????????√n a1,a2,…,an∈R+n∈N且n>1
排列組合
9.1) Amn=n!(n?m)!
9.2) Cmn=n!m!(n?m)!
9.3) Cmn=C(nn?m)
9.4) Cmn+1=Cmn+Cm?1n
9.5) C0n+C1n+…+Cnn=2n
積分公式
10.1) ∫sin(x)dx=cos(x)+C
10.2) ∫cos(x)dx=?sin(x)+C
10.3) ∫tan(x)dx=?ln|cos(x)|+C
10.4) ∫cot(s)dx=ln|sin(x)|+C
10.5) ∫sec2(x)dx=tan(x)+C
11.1) (C)′=0
11.2) (sinx)′=cosx
11.3) (tanx)′=sec2x
11.4) (secx)′=secxtanx
11.5) (ax)′=axlnx
11.6) (xμ)=μxμ?1
11.7) (cosx)′=?sinx
11.8) (cotx)′=?csc2x
11.9) (cscx)′=?cscxcotx
11.10) (ex)′=ex
11.11) (logax)′=1xlna
11.12) (lnx)′=1x
11.13) (arcsinx)′=11?x2?????√
11.14) (arccosx)′=?11?x2?????√
11.15) (arctanx)′=11+x2
11.16) (arccotx)′=?11+x2
12.1) limx→0sinxx=1
12.2) limx→∞(1+1x)x=e
說明:
- \pi 表示希臘字母 π,\infty 表示 ∞。更多的符號(hào)請(qǐng)參見:http://www.math.harvard.edu/texman/node21.html
- \frac{分子}{分母} 表示分?jǐn)?shù)。另外,\tfrac{分子}{分母} 表示小號(hào)的分?jǐn)?shù)
- \sqrt{被開方數(shù)} 表示平方根。另外,\sqrt[n]{x} 表示 n 次方根
- \sum_{下標(biāo)}^{上標(biāo)} 表示求和符號(hào)。另外,\prod 表示乘積符號(hào),\int 表示積分符號(hào)
- _{下標(biāo)} 和 ^{上標(biāo)} 可以用在任何地方。如果上下標(biāo)只是一個(gè)字符,可以省略 { 和 }
- 此外,\ldots 和 \cdots 都表示省略號(hào),前者排在基線上,后者排在中間
- 還有:\pm:±、\times:×、\div:÷
回車換行
點(diǎn)擊一次【回車】,結(jié)果顯示為一個(gè)空格;點(diǎn)擊兩次【回車】,文檔內(nèi)容才出現(xiàn)換行但是此時(shí)的行距較大。
處理:在文字末尾輸入 2 個(gè)及以上的空格,再點(diǎn)擊回車即可實(shí)現(xiàn)回車換行。
markdown更改圖片大小
1、使用Mou編輯器方法
原始圖像,markdown格式
更改大小

或
可以省略高度
2、如果使用的是簡書自帶的markdown編輯器
原始圖像
更改大小
只需要將后面的寬度更改就可以了.高度會(huì)自動(dòng)變的不需要設(shè)置.
3、使用HTML
只需要更改上面的屬性width或height的值就可以了.
注意:每家的markdown編輯器語法會(huì)有所不同,因此在一個(gè)編輯器下寫的markdown復(fù)制到另一家的編輯器下,顯示可能會(huì)有差異.對(duì)于新手來說簡書自帶的markdown編輯差不多已經(jīng)夠用了
總結(jié)
以上是生活随笔為你收集整理的博客编辑神器:Markdown编辑器的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。