開發工具總結(5)之Markdown語法圖文全面詳解及其工具介紹

版權聲明:本文為博主原創文章(少量文字參考他人博文,已加上引用說明),未經博主允許不得轉載。http://www.lxweimin.com/p/c0a2897ad4eb

轉載請標明出處:
http://www.lxweimin.com/p/c0a2897ad4eb
本文出自 AWeiLoveAndroid的博客


【前言】寫過博客或者github上面的文檔的,應該知道Markdown語法的重要性,不知道的朋友們也別著急,一篇博客輕松搞定Markdown語法。話說這個語法超級簡單,一看就會,不信你點開看看。


目錄:
一、快捷鍵
二、基本語法
三、常用技巧
四、高端用法
五、Markdow工具
六、不同平臺功能對比
七、使用MarkdowPad軟件遇到的坑


一、快捷鍵

加粗 Ctrl + B
斜體 Ctrl + I
引用 Ctrl + Q
插入鏈接 Ctrl + L
插入代碼 Ctrl + K
插入圖片 Ctrl + G
提升標題 Ctrl + H
有序列表 Ctrl + O
無序列表 Ctrl + U
橫線 Ctrl + R
撤銷 Ctrl + Z
重做 Ctrl + Y

二、基本語法

(一)對字體設置斜體、粗體、刪除線,語法如下:
*這里是文字*
_這里是文字_
**這里是文字**
***這里是文字***
~~這里是文字~~

示意圖如下:

(二)分級標題,兩種寫法,如下所示:
寫法1:
# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題  這個寫法和 **文字**效果是一樣的
寫法2:
這是一個一級標題
============================

或者

二級標題
--------------------------------------------------
(三)鏈接
(1)插入本地圖片鏈接

語法規則,有兩種寫法:

插入本地圖片鏈接兩種寫法

注意:這個圖片描述可以不寫。

示例圖如下:

(2)插入互聯網上圖片

語法規則:

插入互聯網上圖片語法規則

注意:這個圖片描述可以不寫。

示例如下:

(3)自動連接

Markdown 支持以比較簡短的自動鏈接形式來處理網址和電子郵件信箱,只要是用<>包起來, Markdown 就會自動把它轉成鏈接。也可以直接寫,也是可以顯示成鏈接形式的

例如:

(四)分割線

你可以在一行中用三個以上的星號(*)、減號(-)、底線(_)來建立一個分隔線,行內不能有其他東西。你也可以在星號或是減號中間插入空格。

(五)代碼塊

對于程序員來說這個功能是必不可少的,插入程序代碼的方式有兩種,一種是利用縮進(tab), 另一種是利用英文“`”符號(一般在ESC鍵下方,和~同一個鍵)包裹代碼。

(1)代碼塊:縮進 4 個空格或是 1 個制表符。效果如下:
#include <stdio.h>
int main(void)
{
    printf("Hello world\n");
}
(2)行內式:如果在一個行內需要引用代碼,只要用反引號`引起來就好(Esc?。?/h6>
(3)多行代碼塊與語法高亮:在需要高亮的代碼塊的前一行及后一行使用三個單反引號“`”包裹,就可以了。

示例如下:

(4)代碼塊里面包含html代碼

在代碼區塊里面, & 、 < 和 > 會自動轉成 HTML 實體,這樣的方式讓你非常容易使用 Markdown 插入范例用的 HTML 原始碼,只需要復制貼上,剩下的 Markdown 都會幫你處理。

注意:簡書代碼塊里不支持html。

示例如下:

(六)引用

在被引用的文本前加上>符號,以及一個空格就可以了,如果只輸入了一個>符號會產生一個空白的引用。

(1)基本使用

使用如下圖所示:

引用的使用示范
(2)引用的嵌套使用

使用如圖所示:

引用嵌套
(3)引用其它要素

引用的區塊內也可以使用其他的 Markdown 語法,包括標題、列表、代碼區塊等。

使用如圖所示:

引用里面使用其他元素
(七)列表
(1)無序列表

使用 *,+,- 表示無序列表。
注意:符號后面一定要有一個空格,起到縮進的作用。

無序列表
(2)有序列表

使用數字和一個英文句點表示有序列表。
注意:英文句點后面一定要有一個空格,起到縮進的作用。

有序列表
(3)無序列表和有序列表同時使用
(4)列表和其它要素混合使用

列表不光可以單獨使用,也可以使用其他的 Markdown 語法,包括標題、引用、代碼區塊等。

注意事項:列表中包含多行代碼塊,需要另起一行,否則不生效。

使用示例如下圖:


(5)注意事項

在使用列表時,只要是數字后面加上英文的點,就會無意間產生列表,比如2017.12.30 這時候想表達的是日期,有些軟件把它被誤認為是列表。解決方式:在每個點前面加上\就可以了。如下圖所示:

(八)表格

表格的基本寫法很簡單,就跟表格的形狀很相似:

表格的基本使用

表格對齊方式:我們可以指定表格單元格的對齊方式,冒號在左邊表示左對齊,右邊表示有對齊,兩邊都有表示居中。

如下圖所示:

表格對齊

三、常用技巧

(一)換行

方法1: 連續兩個以上空格+回車
方法2:使用html語言換行標簽:<br>

(二)縮進字符

不斷行的空白格 &nbsp; 或 &#160;
半角的空格 &ensp; 或 &#8194;
全角的空格 &emsp; 或 &#8195;
markdown縮進語法

(三)如何打出一些特殊符號

  • (1)對于 Markdown 中的語法符號,前面加反斜線\即可顯示符號本身。

示例如下:

如何打出一些特殊符號
  • (2)其他特殊字符,示例如下:
其他特殊字符

想知道字符對應的Unicode碼,可以看這個網站:https://unicode-table.com/cn/

附上幾個工具對特殊字符的支持的對比圖:

工具或網站 是否特殊字符
簡書
MarkDownPad 否(不知道付費版是否支持)
有道云筆記
zybuluo.com

(四)字體、字號與顏色

Markdown是一種可以使用普通文本編輯器編寫的標記語言,通過類似HTML的標記語法,它可以使普通文本內容具有一定的格式。但是它本身是不支持修改字體、字號與顏色等功能的!

CSDN-markdown編輯器是其衍生版本,擴展了Markdown的功能(如表格、腳注、內嵌HTML等等)!對,就是內嵌HTML,接下來要講的功能就需要使用內嵌HTML的方法來實現。

字體,字號和顏色編輯如下代碼

<font face="黑體">我是黑體字</font>
<font face="微軟雅黑">我是微軟雅黑</font>
<font face="STCAIYUN">我是華文彩云</font>
<font color=#0099ff size=7 face="黑體">color=#0099ff size=72 face="黑體"</font>
<font color=#00ffff size=72>color=#00ffff</font>
<font color=gray size=72>color=gray</font>

Size:規定文本的尺寸大小??赡艿闹担簭?1 到 7 的數字。瀏覽器默認值是 3

具體顏色分類及標記請看下表:


顏色分類及標記對照表

(五)鏈接的高級操作(這個需要掌握一下,很有用)

(1)行內式。這個在上文第二條基本語法鏈接這個小節已經過,這里就不繼續講解了。
(2)參考式鏈接。
在文檔要插入圖片的地方寫![圖片或網址鏈接][標記],在文檔的最后寫上[標記]:圖片地址 “標題”。(最后這個"標題"可以不填寫)

示例如下:

(3)內容目錄

一般在文章開頭打上[TOC] 就可以顯示全文內容的目錄結構。

【注意:】簡書不支持[TOC]目錄結構。

  • 下面講一下github的目錄結構是怎么做的,每個標簽要對應標題名稱:


    Github的目錄結構
(4)錨點

錨點其實就是頁內超鏈接。比如我這里寫下一個錨點,點擊回到目錄,就能跳轉到目錄。 在目錄中點擊這一節,就能跳過來。

語法說明:

在你準備跳轉到的指定標題后插入錨點{#標記},然后在文檔的其它地方寫上連接到錨點的鏈接。

github支持錨點跳轉,這里說一下錨點在github的使用:

如果不起作用的話,可以使用嵌入html的方式,就像下面這樣做:

簡書中的 錨點 使用如下圖所示:

注意:在簡書中使用錨點時,點擊會打開一個新的當前頁面,雖然錨點用的不是很舒服,但是可以用注腳實現這個功能。

(5)注腳

語法說明:

在需要添加注腳的文字后加上腳注名字[^注腳名字],稱為加注。 然后在文本的任意位置(一般在最后)添加腳注,腳注前必須有對應的腳注名字。

示例如下:

image.png

注意事項:
(1)腳注自動被搬運到最后面,請到文章末尾查看,并且腳注后方的鏈接可以直接跳轉回到加注的地方。
(2)由于簡書不支持錨點,所以可以用注腳實現頁面內部的跳轉。

(六)背景色

Markdown本身不支持背景色設置,需要采用內置html的方式實現:借助 table, tr, td 等表格標簽的 bgcolor 屬性來實現背景色的功能。舉例如下:

<table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>
效果圖

(七)emoji表情符號

emoji表情使用:EMOJICODE:的格式,詳細列表可見 https://www.webpagefx.com/tools/emoji-cheat-sheet/

當然現在很多markdown工具或者網站都不支持。

下面列出幾個平臺的對比:

工具或網站 是否支持emoji表情符號
簡書
MarkDownPad 否(不知道付費版是否支持)
有道云筆記
zybuluo.com
github

四、高端用法

目前我用過的簡書,CSDN,包括markdownPad軟件都不支持下面這些功能,有一個在線網站https://www.zybuluo.com/mdeditor 可以支持。

(一)使用LaTex數學公式

  • 1.行內公式:使用兩個”$”符號引用公式:

    $公式$
    
  • 2.行間公式:使用兩對“$$”符號引用公式:

    $$公式$$
    
示例

具體可以參考 markdown編輯器使用LaTex數學公式

(二)流程圖

這里簡單介紹一下流程圖的語法,僅作為了解,如下圖所示:

(三)制作一份待辦事宜----Todo 列表

(四)繪制 序列圖

(五)繪制 甘特圖


五、簡書如何設置Markdown

默認的簡書寫博客是富文本模式的,想要設置成Markdown,可以這樣設置:

(一)進入博客主頁,點擊頭像旁邊的倒三角符號,選擇 "設置"

(二)選擇“基礎設置”,“常用編輯器”,選擇 Markdown,點擊保存


六、Markdown工具

(一)markdownpad軟件,就是利用markdown語言寫筆記的。官網下載地址:
http://markdownpad.com/

軟件安裝之后的示意圖如下圖所示:


(二)MarkEditor軟件,它是mac系統上面使用的軟件,收費的。官網下載地址:
http://markeditor.com/app/markeditor
具體介紹使用有人寫了博文,這里不再重復,請看 MarkEditor——也許是最強大Markdown寫作軟件(集美貌與才華于一身)

(三)有道云筆記支持markdownpad語法。官方網址:http://note.youdao.com/ 它有在線網頁版以及PC端可以下載。當然有道云筆記也支持html語法。

網頁版使用markdown示例圖如下:

(四)在線編輯markdown https://www.zybuluo.com/mdeditor

(五)在線md排版編輯網站,可以支持自定義樣式排版 http://md.aclickall.com/

(六)在線md排版編輯網站,http://www.mdeditor.com/

【注】其他工具請看下文圖中的對比


七、不同平臺功能對比

(一)Windows平臺的下的免費的桌面版的Markdown編輯器對比圖(截至2016/2/10)
圖片來源參考: https://www.zhihu.com/question/19637157

Windows平臺的下的免費的桌面版的Markdown編輯器對比圖

(二)


八、使用MarkdowPad軟件遇到的坑

(一)markdown表格內容如果是|怎么辦?

解決方法:輸入&#124; 就可以了,如圖所示:

markdown表格內容如果是|豎線怎么辦?

(二)Awesomium.Windows.Controls.WebControl’

解決方法:修改注冊表:

按Win+R運行regedit,依次選擇:
HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Control/Lsa/FipsAlgorithmPolicy/Enabled
然后修改值為0就可以了。

如果不能解決,下載一個Awesomium軟件,然后再按上述方法修改注冊表試試看。

(三)彈窗顯示的內容是這樣的:
An error occurred with the HTML rendering component.
This issue may be fixed by installing a missing component.Would you like to learn more?

解決方法:修改注冊表:

按Win+R運行regedit,依次選擇:
HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Control/Lsa/FipsAlgorithmPolicy/Enabled
然后修改值為0就可以了。

本文參考文章:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,345評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,494評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,283評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,953評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,714評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,410評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,940評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,776評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,210評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,654評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容

  • 為什么學習Markdown 自從搭建了 Hexo 博客之后,發現還有 Markdown 這種寫文章的方法,想到以后...
    lifeColder閱讀 20,176評論 10 216
  • 寫在前面 由于TW的作業需要以簡書博客的形式來完成,所以我將Markdown作為我的第一份作業。文章將介紹Mark...
    sunshy360閱讀 1,757評論 3 4
  • 1. 斜體和粗體 代碼: 顯示效果: 這是一段斜體 這是一段粗體 這是一段加粗斜體 這是一段刪除線 2. 分級標題...
    泊牧閱讀 2,364評論 0 2
  • 借我歲月從頭,眉目依舊,塞外張弓,侯官溫酒,論古今長短,嘆美人垂暮,醉飲無緒君莫笑,我本天涯惆悵客。
    莫青山閱讀 255評論 2 5