Markdown 顯示語法測試

溯言｜Rhett Caen Lv4
  2017-07-11 21:46:21 2017-07-11 21:46:21 撰寫   2018-03-29 2018-03-29 更新      2.1k 字數  9 分鐘

這裡是從Hackmd的官方介紹中直接把原始碼拿過來用的，並作解析MarkDown語法測試。這裡也有完整中文介紹與維基百科介紹。這個語言的重點在於方便直接看懂內容，並且容易學習。相較於沒有任何標示的純文字文件而言，MarkDown的確是一個可以快速幫你標記，並且紀錄各種想法的好幫手。另一方面，龐大無比功能複雜的word絕對不是一個紀錄筆記的好方式（當然也可以選擇用word…但若要把word的內容直接發布到網誌上也是需要花費一番功夫的。）那為什麼不選擇在許多部落格都支援的Markdown語法作為寫作的最佳幫手呢？當然，本站主要以Hexo+Github在fedora27作業系統下架設。

表情符號

您可以像是這樣使用表情符號 :smile: :smiley: :cry: :wink:

完整的表情符號列表 在這裡

待辦清單

  • 待辦
    • 買些沙拉
      • 刷牙
    • 喝水

程式碼區塊

我們支援非常多程式語言，使用自動完成來看看有些什麼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

如果想要 行號，在表明程式語言之後輸入 =
您也可以指定開始行號，如下所示，行號從101開始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

或是可以接續上一個程式碼區塊的行號，使用 =+

1
2
var s = "JavaScript syntax highlighting";
alert(s);

引用區塊標籤

您可以使用以下語法，表明自己的 姓名、時間與顏色 並與其他的引用區塊做區別
[name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]

也支援巢狀引用區塊喔！
[name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

外部

Youtube

Vimeo

Gist

SlideShare 不支援

%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %

Speakerdeck 不支援

speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}

PDF 不支援

注意：請使用 https 的網址，否則可能會被您的瀏覽器阻擋載入
%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %}

MathJax

您可以使用 MathJax 語法 來產生 LaTeX 數學表達式，如同 math.stackexchange.com：

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,.
$$

更多關於 LaTeX 數學表達式 請至這裡

UML 圖表

循序圖

您可以像是以下使用循序圖：

1
2
3
4
5
艾莉絲->包柏: 哈摟，你好嗎？
Note right of 包柏: 包柏思考中
包柏-->艾莉絲: 我很好，謝謝！
Note left of 艾莉絲: 艾莉絲回應
艾莉絲->包柏: 最近過得怎樣？

流程圖

您可以像是以下使用流程圖：

1
2
3
4
5
6
7
8
9
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
op2=>operation: 啦啦啦
cond=>condition: 是或否？

st->op->op2->cond
cond(yes)->e
cond(no)->op2

Graphviz

1
2
3
4
5
6
7
8
9
10
11
12
digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes
                
                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                Headteacher->{Deputy1 Deputy2 BusinessManager}
                Deputy1->{Teacher1 Teacher2}
                BusinessManager->ITManager
                {rank=same;ITManager Teacher1 Teacher2}  // Put them on the same level
}

Mermaid

1
2
3
4
5
6
7
8
9
gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d

更多關於 循序圖 語法 在這裡.
更多關於 流程圖 語法 在這裡.
更多關於 Graphviz 語法 在這裡
更多關於 Mermaid 語法 在這裡

警告區塊

:::success
耶 :tada:
:::

:::info
這是訊息 :mega:
:::

:::warning
注意 :zap:
:::

:::danger
喔不 :fire:
:::

排版

標頭

1
2
3
4
5
6
# h1 標頭
## h2 標頭
### h3 標頭
#### h4 標頭
##### h5 標頭
###### h6 標頭

水平分隔線

字形替換

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

測試.. 測試… 測試….. 測試?….. 測試!….

!!!!!! ???? ,,

Remarkable – awesome

“Smartypants, 雙引號”

‘Smartypants, 單引號’

強調

這是粗體文字

這是粗體文字

這是斜體文字

這是斜體文字

這是刪除文字

上標： 19^th^

下標： H2O

++這是底線文字++

==這是標記文字==

引用區塊

引用區塊也可以是巢狀的喔…

…可以多層次的使用…

…或是用空白隔開

清單

項目

  • 在行開頭使用 + - 或是 * 來建立清單
  • 空兩個空白就可以產生子清單
    • 當清單標記使用的字元不同，會強制建立新的清單
      • Ac tristique libero volutpat at
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
  • 非常簡單！

編號

  1. Lorem ipsum dolor sit amet

  2. Consectetur adipiscing elit

  3. Integer molestie lorem at massa

  4. 您可以逐次增加項目數字…

  5. …或是全部都使用 1.

  6. feafw

  7. 332

  8. 242

  9. 2552

  10. e2

從其他範圍開始編號清單

  1. foo
  2. bar

程式碼

行內 程式碼

縮排程式碼

// Some comments
line 1 of code
line 2 of code
line 3 of code

程式碼區塊

1
Sample text here...

語法標色

1
2
3
4
5
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

表格

選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

向右對齊

選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

向左對齊

選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

置中對齊

選項 描述
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

連結

連結文字
加上標題的連結文字
自動轉換連結 https://github.com/nodeca/pica

圖片

Minion
Stormtroopocat
如同連結一般，圖片也可以用註腳語法
Alt text
使用參考，可以在稍後的文件中再定義圖片網址

![Minion](https://octodex.github.com/images/minion.png =200x200)
使用指定的大小顯示圖片

註腳

註腳 1 連結[^first].
註腳 2 連結[^second].
行內註腳^[行內註腳的文字] 定義
重複的註腳參考[^second].

[^first]: 註腳 也可以標記
還可以有很多段落
[^second]: 註腳 文字

定義清單

名詞 1

: 定義 1 快速連續項目

名詞 2 加上 行內標記

: 定義 2

    { 這些程式碼屬於 定義 2 的一部分 }

定義 2 的第三段落

緊密樣式：

名詞 1
~ 定義 1

名詞 2
~ 定義 2a
~ 定義 2b

縮寫

這是 HTML 的縮寫範例
它會轉換 “HTML”，但是縮寫旁邊其他的部分，例如：”xxxHTMLyyy”，不受影響

*[HTML]: Hyper Text Markup Language

註記

markdown本身並沒有額外的語法註解，而是使用html本身的語言作為替代若只是單純的要註解單行，直接用上述的方式將要註解的內容寫入即可。若是要多行的話，只要將內容放置在此標注內即可，例如：

1
2
3
4
<!--
我是標注
第二行
-->

文章的 read more 功能

要在文章中加入read more的功能十分簡單，也是利用註記的方式將文章顯示在首頁的內容分開，只要在文章中加入 即可。

Mathjax

有關使用MathJax在Hexo中可以參考必富客的網誌。如果只是簡單要引用的話，超級容易的，只要用下面的方式就可以了喔！
舉個例子：

1
$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$

$_frac{(n^2+n)(2n+1)}{6}$

${\sum_{i=0}^n i^2}$

$\theta^{n+1}=\theta^n-\eta\nabla C\left( \theta^n\right)$

如果是在字裡行間的話可以這樣$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$

簡單講把你要的東西用$ $包起來，就可以拉！
當然如果想要知道更多用法可以參考Mathematics-MathJax討論

  • 標題: Markdown 顯示語法測試
  • 作者: 溯言｜Rhett Caen
  • 撰寫於 : 2017-07-11 21:46:21
  • 更新於 : 2018-03-29 00:00:00
  • 連結: https://fractalrhythm.vercel.app/2017/07/11/hexo-test-mdandhackmd/
  • 版權宣告: 本作品採用 CC BY-NC-SA 4.0 進行許可。
目錄
Markdown 顯示語法測試
  1. 表情符號
  2. 待辦清單
  3. 程式碼區塊
  4. 引用區塊標籤
  5. 外部
    1. Youtube
    2. Vimeo
    3. Gist
    4. SlideShare 不支援
    5. Speakerdeck 不支援
    6. PDF 不支援
  6. MathJax
  7. UML 圖表
    1. 循序圖
    2. 流程圖
    3. Graphviz
    4. Mermaid
  8. 警告區塊
  9. 排版
    1. 標頭
    2. 水平分隔線
    3. 字形替換
    4. 強調
    5. 引用區塊
    6. 清單
    7. 程式碼
    8. 表格
    9. 連結
    10. 圖片
    11. 註腳
    12. 定義清單
    13. 縮寫
  10. 註記
    1. 文章的 read more 功能
    2. Mathjax