menu

Markdown

基于 kramdown。同时支持 Liquid 模板语言进行扩展

Math

math 基于 mathjax,启用 mathjax 脚本,需要在 Front Matter 加入:

---
...
math: true
---

$$ 包围的块:

$$
\begin{align*}
  & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
  = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
  & (x_1, \ldots, x_n) \left( \begin{array}{ccc}
      \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
      \vdots & \ddots & \vdots \\
      \phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
    \end{array} \right)
  \left( \begin{array}{c}
      y_1 \\
      \vdots \\
      y_n
    \end{array} \right)
\end{align*}
$$

行内

The following is a math block:

$$ 5 + 5 $$

But next comes a paragraph with an inline math statement: $$ 5 + 5 $$ 

This is block: \$$ 5 + 5 $$ 

This is block: \$\$ 5 + 5 $$ 

The following is a math block:

But next comes a paragraph with an inline math statement:

This is block: $$ 5 + 5 $$

This is block: $$ 5 + 5 $$

FIX:表格

强制 Kramdown 把 | 开头的行才作为表格处理,相关讨论 https://github.com/gettalong/kramdown/issues/151

Liquid

标签逃逸

用 {% raw %} 标签 

Graphviz

要支持 graphviz 需要在 Front Matter 加入

---
...
graphviz: true
---
{% graphviz %}
digraph G {

	subgraph cluster_0 {
		style=filled;
		color=lightgrey;
		node [style=filled,color=white];
		a0 -> a1 -> a2 -> a3;
		label = "process #1";
	}

	subgraph cluster_1 {
		node [style=filled];
		b0 -> b1 -> b2 -> b3;
		label = "process #2";
		color=blue
	}
	start -> a0;
	start -> b0;
	a1 -> b3;
	b2 -> a3;
	a3 -> a0;
	a3 -> end;
	b3 -> end;

	start [shape=Mdiamond];
	end [shape=Msquare];
}
{% endgraphviz %} 

Mermaid

Mermaid 与 graphviz 有一定的重复,默认启用无需 Front Matter。

{% mermaid %}
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

  click A "http://google.com" "This is a link"
  click B "http://google.com" "This is a link"
  click C "http://google.com" "This is a link"
  click D "http://google.com" "This is a link"
{% endmermaid %}

{% mermaid %}
 classDiagram
      Class01 <|-- AveryLongClass : Cool
      Class03 *-- Class04
      Class05 o-- Class06
      Class07 .. Class08
      Class09 --> C2 : Where am i?
      Class09 --* C3
      Class09 --|> Class07
      Class07 : equals()
      Class07 : Object[] elementData
      Class01 : size()
      Class01 : int chimp
      Class01 : int gorilla
      Class08 <--> C2: Cool label
{% endmermaid %}

{% mermaid %}
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
{% endmermaid %}
graph TD; A-->B; A-->C; B-->D; C-->D; click A "http://google.com" "This is a link" click B "http://google.com" "This is a link" click C "http://google.com" "This is a link" click D "http://google.com" "This is a link"
classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d