【三】用Markdown寫blog的經常使用操做

本系列有五篇：分別是
【一】Ubuntu14.04+Jekyll+Github Pages搭建靜態博客：主要是安裝方面
【二】jekyll 的使用 ：主要是jekyll的配置
【三】Markdown+jekyll在Gitpages上寫blog的經常使用操做 ：主要Markdown的使用

【四】搭建Markdown的編輯器 

【五】將博客從jekyll遷移到了hexo

 

---

 

 

參考：【Markdown+jekyll在Gitpages上寫blog的經常使用操做】和【Markdown中文文檔】

Markdown解析器

jekyll支持不一樣的md文件解析器，好比kramdown和rdiscount。雖然markdown的標準語法是統一的，但每種解析器對於標準的實現都有所區別，例如加入了本身的拓展功能，所以有可能某種寫法在別人的例程可使用，push到本身的博客中就沒法渲染，相信這一點困惑着包括我在內的許多新手。

      我選用了kramdown做爲解析器，由於彷佛它支持一些很好的功能，好比標題連接、腳註和目錄。高亮渲染選擇了pygments。本文下面的內容，也僅僅保證在固定的環境下但是使用。

 

基本操做

字體

 

標題

Markdown 支持兩種標題的語法，類 Setext 和類 atx 形式。

類 Setext 形式是用底線的形式，利用 = （最高階標題）和 - （第二階標題），例如：

This is an H1
=============

This is an H2
-------------

任何數量的 = 和 - 均可以有效果。

類 Atx 形式則是在行首插入 1 到 6 個 # ，對應到標題 1 到 6 階，例如：

# 這是 H1

## 這是 H2

###### 這是 H6

你能夠選擇性地「閉合」類 atx 樣式的標題，這純粹只是美觀用的，如果以爲這樣看起來比較溫馨，你就能夠在行尾加上 #，而行尾的 # 數量也不用和開頭同樣（行首的井字符數量決定標題的階數）：

# 這是 H1 #

## 這是 H2 ##

### 這是 H3 ######

段落和換行

一個 Markdown 段落是由一個或多個連續的文本行組成，它的先後要有一個以上的空行（空行的定義是顯示上看起來像是空的，便會被視爲空行。比方說，若某一行只包含空格和製表符，則該行也會被視爲空行）。普通段落不應用空格或製表符來縮進。

「由一個或多個連續的文本行組成」這句話其實暗示了 Markdown 容許段落內的強迫換行（插入換行符），這個特性和其餘大部分的 text-to-HTML 格式不同（包括 Movable Type 的「Convert Line Breaks」選項），其它的格式會把每一個換行符都轉成 <br /> 標籤。

若是你確實想要依賴 Markdown 來插入 <br /> 標籤的話，在插入處先按入兩個以上的空格而後回車。

的確，須要多費點事（多加空格）來產生 <br /> ，可是簡單地「每一個換行都轉換爲 <br />」的方法在 Markdown 中並不適合， Markdown 中 email 式的 區塊引用 和多段落的 列表 在使用換行來排版的時候，不但更好用，還更方便閱讀。

分隔線

你能夠在一行中用三個以上的星號、減號、底線來創建一個分隔線，行內不能有其餘東西。你也能夠在星號或是減號中間插入空格。下面每種寫法均可以創建分隔線：

* * *

***

*****

- - -

---------------------------------------

---

引用

引用爲大於號開頭，好比

> 這裏是引用

顯示爲：

列表

有序列表項前加數字和點（注意先後面要空格）

1. 列表1     

2. 列表2

顯示爲：

1. 列表1
2. 列表2

注意：有序列表的編號值僅爲記號，輸出順序以列表順序爲準，與編號無關。好比：

2. 列表1

1. 列表2

輸出仍然爲：

1. 列表1
2. 列表2

無序列表爲* 、+、 -中任意一個開頭，用法同有序列表。而且能夠混合使用。

輸入：

* 無序列表1
* 無序列表2
1. 有序列表1
2. 有序列表2
    + 無序列表3
    - 無序列表4

輸出：

 

代碼

代碼渲染器使用的是pygments。其使用方法爲加標記：

void main()
{
	std::cout << "Hello StackEdit" << std::endl;
	return;
}

其中c++能夠更換爲任意pygments支持的語言。

注意： 彷佛有些markdown解釋器支持圍欄代碼塊的形式渲染，可是我在pygments渲染器下嘗試沒法使用，只能使用highlight的形式。

表格（注意段前段後要各空一行，否則可能會解析出錯）

表格也是寫blog中經常使用的功能之一，markdown中表格的處理和latex比較像，語句也很簡單：例如：

|水果名稱|價格（元/500克）|
|:-------:|-----:|
|蘋果|3.2|
|香蕉|4.5|

顯示爲：

其中第二行的冒號表示對齊方式，默認爲左對齊，冒號在右邊表示右對齊，兩邊都有冒號表示居中對齊。

連接

在文中對某些文字插入超連接是很經常使用的操做。好比上面的pygments支持的語言。方法爲: [須要超連接的正文](連接) 具體到剛纔的例子： [pygments支持的語言] (http://pygments.org/docs/lexers/) >

注意： 插入的連接必須帶http或者https，不然連接爲相對路徑，沒法訪問。

輸入：有兩種方法，一個紅框對應一種方法

輸出：

公式（使用mathjax）

更多公式語法參考《MathJax使用LaTeX語法編寫數學公式教程》

插入公式可以使用直接在markdown中添加html語言，可是這種作法喪失了markdown的可讀性。markdown支持MathJax引擎渲染公式。

MathJax是一個開源JavaScript庫。它支持LaTeX、MathML、AsciiMath符號，能夠運行於全部流行瀏覽器上。 它的設計目標是利用最新的web技術，構建一個支持math的web平臺。支持主要的瀏覽器和操做系統,包括那些移動設備。 對大部分用戶而言它不須要安裝，即沒有插件須要下載也沒有軟件須要安裝，因此網頁做者能夠編寫包含數學公式的頁面並有信心能夠天然而容易的瀏覽到它們。 只須要在頁面中包含MathJax腳本和一些數學公式，其餘的事情交給MathJax來處理吧。

MathJax使用網絡字體（大部分瀏覽器都支持）去產生高質量的排版，使其在全部分辨率均可縮放和顯示，這遠比使用包含公式的圖片要有效得多。 MathJax也能夠用於屏幕閱讀器，讓視力受損者也可使用。

使用MathJax顯示數學公式是基於文本的，而非圖片。它能夠被搜索引擎使用，這意味着方程式和頁面上的文字同樣是能夠被搜索的。 MathJax容許頁面做者使用TeX、LaTeX符號和 MathML 或者 AsciiMath 去書寫公式。 MathJax甚至能夠將Tex格式轉化爲MathML格式，使其能夠被原生支持MathML格式的瀏覽器更多的渲染。轉化爲MathML格式後你能夠複製粘貼它們到其餘程序中。

MathJax是模塊化的，因此它僅僅在須要時才加載它的組件，同時也能夠被擴展以實現更多功能。 MathJax同時也是高度可配置的，容許做者做出更適宜網站自身的自定義。 最重要的，MathJax的API可讓你在你的網頁上動態的建立公式。

mathjax官網

mathjax中文官方文檔

下面以Jekyll爲例。。。

爲了使用Mathjax，須要在佈局文件（好比default.html中添加）：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

因爲mathjax和Markdown部分符號衝突，因此須要增長配置以下：

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script> 
<!-- mathjax config similar to math.stackexchange --> 
<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
    jax: ["input/TeX", "output/HTML-CSS"], 
    tex2jax: { 
        inlineMath: [ ['$', '$'] ], 
        displayMath: [ ['$$', '$$']], 
        processEscapes: true, 
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] }, 
    messageStyle: "none", 
    "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] } 
}); 
</script>

 

能夠是公式插入與stackoverflow中插入公式樣式相同。 行內公式爲單美圓號 $ 公式 $，例如[Math Processing Error]，行間公式雙美圓號 $$ 公式 $$,例如：

 

更多公式語法請參考【【轉】LATEX數學公式基本語法】

 

圖片

Gitpages中插入圖片是一件相對比較麻煩的事。簡單的方法是將圖片直接放入目錄中，而後直接在文中引用。 markdown的語法爲

![alt text](/path/image.jpg "Title")

html的語法爲：

<img src="/path/image.jpg" height="100%" width="100%">

html的語法要靈活一些，而且能夠控制圖片的大小。

Gitpages中用於靜態blog的大小是有限制的，因此這種方法試用與圖片很少，圖不大的狀況。因此比較推薦的方法是將圖片上傳到圖片存儲網站，而後插入圖片外鏈。 以flickr爲例，先將圖片上傳到本身的flickr帳號，而後將連接文件目錄變爲圖片外鏈目錄便可。好比

小技巧： 使用flickr進行批量圖片插入時，可使用一個工具quickr pickr, 它支持批量插入上傳到flickr的圖片，而且能夠選擇合適的分辨率。具體使用方法可查看這裏。

腳註

腳註的語法很簡單，有些像特殊的連接。語法爲：

[^ 腳註名稱]

[^腳註名稱]: 腳註內容

好比，你知道上面圖片中的歌手是誰嗎?是Barry White¹

注意： 腳註的內容能夠寫在任意位置，建議寫在腳註聲明的下方，但必須與腳註聲明部分有一行的間隔，不然沒法渲染出腳註。

另外，腳註名稱要用英文或者數字，中文會解析錯誤，會被解析成前面的連接

輸入：

輸出：

在頁面後面會顯示：

標題引用

標題引用是kramdown支持的小衆特性之一，便可以像引用外部連接同樣引用文中的標題（估計不少人都使用過word中的相似功能）。

markdown的實現語法也與連接和腳註相似，爲：（#ID不要用中文）

###這是一個標題 {#ID1}

引用[標題1](#ID1)

渲染效果爲

這是一個標題

引用標題1

 

閱讀全文

在正文須要截斷的地方添加使用 <!-- more -->標籤便可。

反斜槓

Markdown 能夠利用反斜槓來插入一些在語法中有其它意義的符號，例如：若是你想要用星號加在文字旁邊的方式來作出強調效果（但不用 <em> 標籤），你能夠在星號的前面加上反斜槓：

\*literal asterisks\*

Markdown 支持如下這些符號前面加上反斜槓來幫助插入普通的符號：

\   反斜線
`   反引號
*   星號
_   底線
{}  花括號
[]  方括號
()  括弧
#   井字號
+   加號
-   減號
.   英文句點
!   驚歎號

後記

目前本身也只是markdown和jekyll寫blog的初學者，不少功能估計尚未開發出來，所寫的內容估計也有紕漏。本身將會在博客寫做的過程當中不斷完善本身使用過程當中的實踐經驗，也但願看官們批評指正。

1. https://en.wikipedia.org/wiki/Barry_White ↩