實現(xiàn)功能

• TOC （目錄）
• 代碼高亮
• LaTeX 顯示：支持 MathJax 和 KaTeX 兩種方式
• 序列圖

Ubuntu 下安裝

sudo apt-get install jekyll

Markdown 文章

存放在 _post 目錄下开伏，可分子目錄存放

以下內(nèi)容均以 kramdown 實現(xiàn)

TOC

Table of Contect

kramdown 默認(rèn)支持 TOC 功能

在需要插入目錄的地方加入如下內(nèi)容

* toc
{:toc}

時間

文章日期需增加時區(qū)，否則可能導(dǎo)致無法顯示

date: 2017-08-07 13:26:51 UTC+8

語法高亮

配置 _config.yml

highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM

下載 pygments郎任，附下載地址

HTML head 中添加

<!-- 語法高亮 -->
<link rel="stylesheet" href="{{ "/static/pygments/native.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ "/static/custom/article_content.css" | prepend: site.baseurl }}">

article_content.css 中覆蓋了部分樣式

body {
    font-size:2rem;
}

/* 代碼塊 */
.highlight {
    padding:1rem 2rem 1rem 2rem;
    border:2rem solid transparent;
    border-radius:.8rem .8rem .8rem .8rem;
    box-shadow:0 0 15px rgba(0,0,0,.3);

    font-size:1.8rem;
    line-height:2.1rem;

    background:#272822;
    color:#f8f8f2;
}

/* 字符串背景色與代碼塊背景色一致 */
.highlight .s {
    background-color: #272822
}

LaTeX 支持

支持 LaTeX 數(shù)學(xué)公式顯示适滓，以 KaTex 方式為例锨侯，公式均以 $$ 括起來

1. 公式放在段落內(nèi)或緊挨著段落临燃，則為行內(nèi)公式
2. 公式前后有空行橱乱，則為整行公式

行內(nèi)公式 $$ E=mc^2 $$

行內(nèi)公式
$$ \sum_{i=1}^n a_i=0 $$

整行公式

$$ f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

$$
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
$$

簡書中不支持办成，可查看我另外兩篇博客預(yù)覽

• 碼云Pages
• 作業(yè)部落

MathJax

在線方式

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

本地方式

1. 下載 MathJax.js
2. HTML head 中添加如下內(nèi)容

<script src="{{ "/static/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" | prepend: site.baseurl }}"></script>

KaTeX

在線方式

<link rel="stylesheet"  integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>

本地方式

1. 下載 KaTeX
2. HTML head 中添加如下內(nèi)容

<link rel="stylesheet" href="{{ "/static/katex/katex.min.css" | prepend: site.baseurl }}">
<script src="{{ "/static/katex/katex.min.js" | prepend: site.baseurl }}"></script>

KaTeX 方式均需要在 </body> 前增加如下內(nèi)容

<script>
  $("script[type='math/tex']").replaceWith(function() {
      var tex = $(this).text();
      return katex.renderToString(tex, {displayMode: false});
  });

  $("script[type='math/tex; mode=display']").replaceWith(function() {
      var tex = $(this).html();
      return katex.renderToString(tex.replace(/%.*/g, ''), {displayMode: true});
  });
</script>

序列圖

js-sequence-diagrams

1. 下載依賴：webfont.js，snap.svg-min.js官疲，underscore-min.js
2. 下載 js-sequence-diagrams
3. HTML head 中添加如下內(nèi)容

<script src="{{ "/static/js-sequence-diagrams-deps/webfont.js" | prepend: site.baseurl }}"></script>
<script src="{{ "/static/js-sequence-diagrams-deps/snap.svg-min.js" | prepend: site.baseurl }}"></script>
<script src="{{ "/static/js-sequence-diagrams-deps/underscore-min.js" | prepend: site.baseurl }}"></script>

<link rel="stylesheet" href="{{ "/static/js-sequence-diagrams/dist/sequence-diagram-min.css" | prepend: site.baseurl }}">
<script src="{{ "/static/js-sequence-diagrams/dist/sequence-diagram-min.js" | prepend: site.baseurl }}"></script>

在 </body> 前增加

<script>
  $(".language-sequence").sequenceDiagram({theme: 'hand'});
</script>

或者

<script>
  var diagram = Diagram.parse("A->B: Message");
  diagram.drawSVG("language-sequence", {theme: 'hand'});
</script>

theme: 'hand' 表示草繪效果
theme: 'simple' 為標(biāo)準(zhǔn)效果

markdown 文件中使用 sequence 替代 python/shell 之類的代碼塊袱结，其語法可訪問官網(wǎng)

```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

簡書中不支持，可查看我另外兩篇博客預(yù)覽

• 碼云Pages
• 作業(yè)部落