hexo-在博客中插入思维脑图

  1. 实现目标
  2. 实现过程

实现目标

在hexo博客中,编辑,展示思维导图

实现过程

  1. 安装插件 hexo-markmap
npm install hexo-markmap
  1. 配置 hexo-markmap

在文章中插入markmap代码块,如下

<!-- 视频 -->
<div style="display: flex;justify-content:center;">
 <div style="height:auto;width:80%">
 {% markmap 300px %}
# Testa
## test1
## test2
# Testb
## test1
## test2
{%endmarkmap%}
 </div>
</div>

效果如下:

*[该插件有个不兼容的bug,第一次打开可能无法显示脑图,需要F5刷新一下浏览器]*:

{"t":"root","d":0,"v":"","c":[{"t":"heading","d":1,"p":{"lines":[0,1]},"v":"Testa","c":[{"t":"heading","d":2,"p":{"lines":[1,2]},"v":"test_a1"},{"t":"heading","d":2,"p":{"lines":[2,3]},"v":"test_a2"}]},{"t":"heading","d":1,"p":{"lines":[3,4]},"v":"Testb","c":[{"t":"heading","d":2,"p":{"lines":[4,5]},"v":"test_b1"},{"t":"heading","d":2,"p":{"lines":[5,6]},"v":"test_b2"}]}],"p":{}}

更多配置,请参考官网:https://github.com/MaxChang3/hexo-markmap


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。
My Show My Code