Jekyll 集成 mermaid

印象笔记支持了 Markdown，额外还支持了 mermaid 。

第一次听说 mermaid，看起来非常不错。就想在个人主页中也添加支持，这样以后就可以直接在印象笔记写日志，然后复制到 Github repository 就行了。

先在 _config.yaml 文件中添加个开关选项，用来控制是否开启 mermaid 功能

mermaid_enable: true

目标是兼容印象笔记中使用 mermaid 的格式

```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
```

Jekyll 使用 kramdown 处理 Markdown 文本生成的代码块标签结构如下:

<pre>
<code class="language-xxx">
...
</code>
</pre>

修改 Jekyll theme 的模版文件

{%- if site.mermaid_enable -%}
<script type="text/javascript" src="https://cdn.staticfile.org/mermaid/8.12.0/mermaid.min.js"></script>
<script type="text/javascript">
  (function(){
    // Initial mermaid
    mermaid.init({startOnLoad:true}, "pre code.language-mermaid", function(){
      // Change <pre> and <code> block style
      var codeBlock = document.querySelector('code.language-mermaid');
      var preBlock = codeBlock.parentNode;

      codeBlock.style.backgroundColor = 'initial';
      preBlock.style.border = 'none';
      preBlock.style.textAlign = 'center';
      preBlock.style.backgroundColor = 'initial';
    });
  })()
</script>
{%- endif -%}

默认情况下，mermaid 只处理 class="mermaid" 中内容，所以需要告诉 mermaid 处理由特别语言代码块中的内容，这里是 class="language-mermaid"。这里在 mermaid 初始化回调函数中修改了部分影响图形样式的样式代码。只针对 mermaid 的部分设置不同的样式，确保我们在使用 mermaid 功能时不会影响其它语言代码高亮功能。

试试看

graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]

gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1           :a1, 2018-06-06, 30d
任务2     :after a1  , 20d
section 项目B
任务3      :2018-06-12  , 12d
任务4      : 24d

测试其它语言代码高亮

#include <stdio.h>

int main(int argc, const char *argv[])
{
    printf("Hello world!\n");
    return 0;
}

🍻