Outline
1.Markdown介紹
2.Markdown編輯器
3.Markdown語法
4.網站整合Markdown
一.Markdown介紹
Markdown 是一種用來寫作的輕量級「標記語言」，它用簡潔的語法代替排版，而不像一般我們用的字處理軟件 Word 或 Pages 有大量的排版、字體設置。它使我們專心於碼字，用「標記」語法，來代替常見的排版格式。例如此文從內容到格式，甚至插圖，鍵盤就可以通通搞定了。目前來看，支持 Markdown 語法的編輯器有很多，包括很多網站（例如簡書）也支持了 Markdown 的文字錄入。Markdown 從寫作到完成，導出格式隨心所欲，你可以導出 HTML 格式的文件用來網站發佈，也可以十分方便的導出 PDF 格式，這種格式寫出的簡歷更能得到 HR 的好感。甚至可以利用 七牛 這種雲服務工具直接上傳至網頁用來分享你的文章，全球最大的輕博客平臺 Tumblr，也支持使用 Mou 這類 Markdown 工具進行編輯並直接上傳,同時GitHub也支持Markdown語法進行文本編輯。
下面我們可以看見官方的Markdown語法規則,不過後面我也會介紹語法規則給大家
二.Markdown編輯器
2.1 在線編輯器類
1.dillinger 漂亮強大，支持md, html, pdf 文件導出。支持dropbox, onedrive，google drive, github. 來自國外，可能不夠穩定.
2.簡書 一個非常不錯的博客平臺，每幾秒鐘便會自動存入一個備份。可以直接從本地拖入照片生成鏈接，一直在不斷優化。作爲一個博客平臺，需要註冊賬號後方能進行寫作.
2.2 Chrome插件類
1.Marxico中文名馬克飛象，因爲印象筆記不支持Markdown，而這款可以直接把文本存到印象筆記的編輯器對於重度印象筆記用戶是個不錯的選擇。付費軟件，可以免費試用。
2.3 Windows平臺
1.MarkdownPad一款全功能的編輯器，被很多人稱讚爲windows 平臺最好用的markdown編輯器.
2.4 Mac OS平臺
1.Mou這款免費且十分好用的 Markdown 編輯器，它支持實時預覽，既左邊是你編輯 Markdown 語言，右邊會實時的生成預覽效果，筆者文章就是 Mou 這款應用寫出來的。
2.5 Linux 平臺
1.Remarkable是Linux平臺用的Markdown編輯器,支持PDF,Html等相關文檔的生成.
當然很多文本編輯器提供了對Markdown插件的集成,如Sublime Test,可以自己安裝支持Markdown插件
本模塊借鑑了:
三.Markdown語法
3.1 標題
標題是每一篇文章都需要也是最常用的文本格式,Markdown提供了很好的語法支持:
# 一級標題
## 二級標題
### 三級標題
….
顯示效果如下
一級標題
二級標題
三級標題
Markdown共有六級標題,建議在井號後面添加一個空格,這是標準的Markdown語法.
3.2 列表
學過Html的同學都知道列表分爲 有序列表 和 無序列表.
在Markdown中,列表的顯示只需要在文字前加上 * 即可.
無序列表寫法如下:
* 1
* 2
Tab + * 2.1
* 3
無序列表顯示如下
- 1
- 2
- 2.1
- 3
有序列表寫法如下:
\1. 1
\2. 2
Tab + \1. 2.1
\3. 3
有序列表顯示如下
- 1
- 2
- 2.1
- 3
* 或者 1. 與文字之間要有空格
3.3 文本粗體與斜體的控制
Markdown語法也支持文本粗體與斜體的控制
實現粗體的寫法:
** 粗體文本 **
顯示如下:
粗體文本
實現斜體的寫法:
* 斜體文本 *
顯示如下:
斜體文本
3.4 代碼框的實現(也就是Html裏的
3.5 引用的實現
如果你需要引用一小段別處的句子,或者需要到引用的格式,可以這樣寫
> 這是引用
顯示如下:
這是引用
3.6 Html裏的<pre>標籤的實現
<pre>標籤可以格式化顯示文本,Markdown只需要這樣做即可實現<pre>標籤的樣式顯示
<pre>標籤,Markdown實現只需要在文本前輸入4個空格或者1個製表符(Tab鍵)
(Tab +) 測試文本
效果如下
測試文本
3.7 分割線
Markdown中實現了分割線的顯示.語法中只要單獨一行輸入3個*即可出現Html裏的<hr />
測試分割線
***
顯示效果
3.8 Markdown語法中還支持對圖片的插入與連接的插入
連接插入
插入連接的格式[連接顯示文本](連接Url)
測試連接文本
[GC博客](http://igouc.com)
顯示結果
圖片插入
插入圖片跟插入連接的格式特別相似,只需要在插入連接的方式前加 ! 即可
插入圖片測試
顯示結果
本部分內容僅僅是寫了Markdown常用的語法,其中中劃線,表格等特殊的語法並不是所有的Markdown編輯器都能支持,所有不再敘述.
本部分借鑑Te_Lee的Markdown-入門指南
四.網站整合Markdown
既然Markdown這麼好用,可以在無格式文本編輯器裏寫出Word 或 Pages 的排版、字體設置,能使我們專心於碼字.那麼你的網站是不是也想整合Markdown來顯示你的文本呢? 下面,我們來學習如果在網站上整合Markdown.
- 如何整合Markdown?
整合Markdown其實就是在文本顯示頁面增加Markdown解釋器,將符合Markdown語法的文本解釋成Html標籤, 以此來實現文本多彩的顯示.
如何在文本顯示頁面添加Markdown解釋器?
- 首先,你應該去下載解釋器showdown.js
- 在你的文本顯示頁面引入該js文件
js代碼框裏添加如下代碼:
var converter = new showdown.Converter(),
text = ‘你想顯示的符合Markdown格式的文本’,
html = converter.makeHtml(text);
經過上面的轉換,變量html裏面裝的則是經過Markdow解釋器showdown.js解釋的文本了.直接將該變量的值顯示出來即可
下面是一段測試代碼
<!DOCTYPE html>
<html>
<head>
<title>MarkDown</title>
<script type="text/javascript" src="showdown.min.js"></script>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
ul li {
line-height: 24px;
}
blockquote {
border-left:#eee solid 5px;
padding-left:20px;
}
code {
color:#D34B62;
background: #F9F2F4;
}
</style>
<body>
<div>
<textarea id="content" style="height:400px;width:600px;" onkeyup="compile()"></textarea>
<div id="result"></div>
</div>
<script type="text/javascript">
function compile(){
var text = document.getElementById("content").value;
var converter = new showdown.Converter();
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
本部分借鑑雲霏霏 的讓你的站點也支持MarkDown
本片文章到此已經對Markdown的相內容介紹完畢了,你是不是也心動了呢?趕快讓你的網站支持Markdown吧…
本片內容爲GC純手敲的,其中的部分內容借鑑了一些大神們的博客,也在內容中標註出來了.再次感謝這些大神提供的資源共享.
文章中避免不了錯誤的出現,如果有讀者發現文章中的錯誤,或者有疑問的地方,請留言/Email To Gc
請轉發OR複製的同學,標註出處,尊重作者勞動成果,謝謝親
本篇出自GC博客