hexoにmeamaidを組み込んでみるテスト

最近meamaidでの図形作成にはまってる。

で、hexoオリジナルテーマにmeamaidを組み込んだけれど、単純に組み込んだだけだと動作しなかったのでメモ。

動かなかった原因

  • <br>タグとか混ざる
  • --が-に変換される。

javascriptから突っ込んでみるとできる。

1
2
3
4
5
6
7
<div id="drowmmd">
<script>
  (function(){
    document.getElementById('drowmmd').innerHTML 
    = '<div class="mermaid"> graph TD; A-->B; A-->C; B-->D; C-->D; </div>'
  })();
</script>

で、以下のようにちゃんと変換されて表示される。

けれども個人的には、mermaid構文のようにもう少し簡単に書きたい。

1
2
3
4
5
6
7
<div class="mermaid">
 graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
</div>

ので、カスタムmarkdown機能を組み込んでみる。

hexo-renderer-marked-plus でMarkdownの内容をオーバライドできるようなので、ひとまずHexoにinstallする。

  • hexoフォルダに以下を実行
1
npm install hexo-renderer-marked-plus --save

で、themes/自分のテーマ/scripts/markedrenderer.jsに以下のコードを追加して、独自解釈をできるように。

1
2
3
4
5
6
7
8
9
10
11
12
var marmaid ={
  inline: /^mermaid\n/
};
hexo.markedRenderer = {
  codespan: function(code) {
    if (marmaid.inline.test(code)) {
      return '<div class="mermaid">' + code.replace(marmaid.inline,'') + '</div>'
    }
    return this._super.codespan(code);
  }
}

これで以下のように書くと。

1
2
3
4
5
6
7
`mermaid
 graph TD;
   A-->B;
   A-->C;
   B-->D;
   C-->D;
`

下のようにhexo上でmermaidが書けるようになる。

graph TD; A-->B; A-->C; B-->D; C-->D;

mermaid自体、最近シーケンス図書けるようになったりしてるので、今のうちにくみこんでみたけれど
merkdownライクにフローチャートやシーケンスが書けるのは凄い良い気がする。

sequenceDiagram Hexo->>Mermaid: Covert? Hexo-->Mermaid: Drow!

次回調べたいもの