1. 程式人生 > >markdown語法及插入圖片、連結、公式

markdown語法及插入圖片、連結、公式

markdown語法簡要規則

標題

標題是每篇文章都需要也是最常用的格式,在 Markdown 中,如果一段文字被定義為標題,只要在這段文字前加 # 號即可。

# 一級標題

## 二級標題

### 三級標題

以此類推,總共六級標題,建議在井號後加一個空格,這是最標準的 Markdown 語法。

列表

熟悉 HTML 的同學肯定知道有序列表與無序列表的區別,在 Markdown 下,列表的顯示只需要在文字前加上 - 或 * 即可變為無序列表,有序列表則直接在文字前加1. 2. 3. 符號要和文字之間加上一個字元的空格。
####無序列表
*1
*2
*3
####有序列表


1.1
2.2
3.3

無序列表

  • 1
  • 2
  • 3

有序列表

  1. 1
  2. 2
  3. 3

引用

如果你需要引用一小段別處的句子,那麼就要用引用的格式。

例如這樣

只需要在文字前加入 >這種尖括號(大於號)即可

粗體與斜體

Markdown 的粗體和斜體也非常簡單,用兩個 * 包含一段文字就是粗體的語法,用一個*包含一段文字就是斜體的語法。

例如:這裡是粗體 這裡是斜體

表格

表格是我覺得 Markdown 比較累人的地方,例子如下:

| Tables | Are | Cool |

| ------------- |:-------------:| -----:|

| col 3 is | right-aligned | $1600 |

| col 2 is | centered | $12 |

| zebra stripes | are neat | $1 |

這種語法生成的表格如下:

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

程式碼框

程式猿(媛)在文章裡優雅的引用程式碼框是必須的,在 Markdown下實現也非常簡單,只需要用兩個 `

把中間的程式碼包裹起來。如下:
print "Hello World!"
使用 tab 鍵即可縮排。

分割線

分割線的語法只需要三個 * 號,例如:

圖片與連結

插入連結與插入圖片的語法很像,區別在一個!

圖片為:![](){ImgCap}{/ImgCap}

連結為:[]()

插入圖片的地址需要圖床,網上很多都推薦圍脖圖床修復計劃CloudApp 的服務來生成URL地址。但本人在安裝時發現,圍脖圖床修復計劃無論在Firefox還是chrome安裝外掛都會受到阻止,由於電腦系統(win10)和瀏覽器版本的一些原因,網上的一些針對Firefox的解決方案並沒有用,chrome上雖然安裝外掛成功,但無法匯出URL且每次重新開啟瀏覽器均有提醒,於是放棄。CloudApp需要註冊下載,不夠輕便。
最後選擇Dev Fancy+ 的網頁免費圖床。

插入公式

最複雜的方式:先使用Latex書寫(線上的Latex編輯器參考[1]),然後儲存為圖片,使用img標籤進行引用。
本文的方法使用html的語法,呼叫[1]的公式生成API,線上生成Latex數學公式,免去將公式儲存為圖片的麻煩。當然,弊端也是有的,公式太多,可能會造成重新整理比一般的網頁慢一些。

方法一:使用Google Chart的伺服器

<img src="http://chart.googleapis.com/chart?cht=tx&amp;chl= 在此插入Latex公式" style="border:none;">
一個例子,
<img src="http://chart.googleapis.com/chart?cht=tx&chl=\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" style="border:none;">
公式顯示結果為:

###方法二:使用forkosh伺服器
forkosh上提供了關於Latex公式的一份簡短而很有用的幫助,參考[1]和[3].

使用forkosh插入公式的方法是
<img src="http://www.forkosh.com/mathtex.cgi? 在此處插入Latex公式">
給個例子,
<img src="http://www.forkosh.com/mathtex.cgi? \Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">
顯示結果為:

因為網頁插入公式的原理是呼叫“某某網站的伺服器”動態生成的,所有保證公式正常顯示的前提是該網址能一直存在著為我等小生做些小小的服務。forkosh我是用了快2年了,一直很好,推薦!

方法三:使用MathJax引擎

大家都看過Stackoverflow上的公式吧,漂亮,其生成的不是圖片。這就要用到MathJax引擎,在Markdown中新增MathJax引擎也很簡單,
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
然後,再使用Tex寫公式。$$公式$$表示行間公式,本來Tex中使用\(公式\)表示行內公式,但因為Markdown中\是轉義字元,所以在Markdown中輸入行內公式使用\(公式\),如下程式碼:
$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
\\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\\)

分別顯示結果
行間公式:

x=b±b24ac2a
行內公式:

\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)

不信,你可以試一下,在公式上還可以使用滑鼠右鍵操作。

參考