【应用软件】Jekyll 配置

实现功能

TOC （目录）
代码高亮
LaTeX 显示：支持 MathJax 和 KaTeX 两种方式
序列图

Ubuntu 下安装

sudo apt-get install jekyll

Markdown 文章

存放在 _post 目录下，可分子目录存放

以下内容均以 kramdown 实现

时间

文章日期需增加时区，否则可能导致无法显示

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 数学公式显示，以 KaTex 方式为例，公式均以 $$ 括起来

公式放在段落内或紧挨着段落，则为行内公式
公式前后有空行，则为整行公式

行内公式 $$ E=mc^2 $$

行内公式
$$ \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
$$

简书中不支持，可查看我另外两篇博客预览

MathJax

在线方式

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

本地方式

下载 MathJax.js
HTML head 中添加如下内容

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

KaTeX

在线方式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" 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>

本地方式

下载 KaTeX
HTML head 中添加如下内容

<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> 前增加如下内容

<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

下载依赖：webfont.js，snap.svg-min.js，underscore-min.js
下载 js-sequence-diagrams
HTML head 中添加如下内容

<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' 为标准效果

markdown 文件中使用 sequence 替代 python/shell 之类的代码块，其语法可访问官网

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