はてなブログでmarkmapを用いてマインドマップを描く

Markmap という JavaScript のライブラリがあります．

これはMarkdownをマインドマップに変換してくれます． HackMD では標準的に使えるのですが，はてなブログでは最初からは使えません．

結構簡単にはてなブログでも使用することができるのですが，調べても意外と指摘しているひとがいなかったのでここで書いておきます．

さて，やり方の説明です．

ステップが２つあります．

Step 1

まず，次のコードを記事の冒頭部分にでも貼り付けます．

<div><style> 
.markmap > svg {
width: 100%; 
height: 300px;
}
 </style></div>

<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>

Script 部分とStyle 部分に分かれていることに気をつけてください．

Style部分は，生成される画像の大きさを指定しています．

Script部分は，Markmapを読み込んでいます．

Step 2

次に，div要素を用意してそのクラス属性に markmap を指定します．

その後 div要素の中にMarkdownで見出しをいくつか階層構造を意識しつつ書いておきます．

つまり，次のようなコードを書きます．

<div class="markmap">
# markmap
## べんり
## きれい
## はやい
</div>

これでおしまいです．

そのまま記事を投稿すれば，以下のようにマインドマップとして表示されます．

# markmap ## べんり ## きれい ## はやい

○部分をクリックすると，閉じたり開いたりします．