はてなブログのMarkdown記法内でmermaidを使えるようにする

mermaid

公式でやりかたが案内されていますが、自分のブログのCSS設定ではmermaidのコードブロック内にもそのスタイルが反映されて黒く塗りつぶされてしまう状態でした。

staff.hatenablog.com

そこで以下記事を参考にmermaid記法で記述する箇所についてはスタイルがリセットされるようにしました。

cartman0.hatenablog.com

/*mermaid用*/
.entry-content pre.code.mermaid {
  background: none;
  border: none;
  padding: 0;
}
.entry-content pre.code.mermaid[data-lang="mermaid"]:before {
    content: none;
}

その結果以下のように表示されるようになりました🎉

---
title: Simple sample
---
stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]