Markmap

简介

Markmap是Markdown和思维导图的组合。
它解析Markdown内容并提取其固有的层次结构，并呈现交互式思维导图。

使用方案

1. 基于 React 框架的使用
2. 基于 Vue 框架的使用
3. 基于 auto-loader 的使用
4. VS Code 插件

在 Hugo 中使用

Hugo 中对 Markdown 的代码块(codeblock)语法 有自定义的渲染功能，可将 markmap 设为一种语法进行自定义渲染

1. 创建 markmap 语法的代码块渲染器

    1<!-- /layout/_default/_markup/render-codeblock-markmap.html -->
    2<!-- 获取 markmap 的高度 -->
    3{{ $height := .Attributes.height }}
    4 <div class="markmap" id="markmap">
    5     <script type="text/template">
    6         {{- .Inner -}}
    7     </script>
    8 </div>
    9 <style>
   10     svg.markmap {
   11         width: 100%;
   12         height: {{ $height }};
   13     }
   14 </style>
   15 {{ .Page.Store.Set "hasMarkmap" true }}
   

2. 在页面内容模版中配置渲染功能

    1<!-- 判断当前页面是否有 markmap 代码块 -->
    2{{ if .Page.Store.Get "hasMarkmap" }}
    3    <!-- 为了更好的掌控渲染时机，将 markmap 的渲染方式设置为手动 -->
    4    <script>
    5        window.markmap = {
    6        autoLoader: { manual: true },
    7        };
    8    </script>
    9    <!-- 引入 markmap 相关脚本 -->
   10    <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@0.14.4"></script>
   11    <!-- 进行手动渲染 markmap -->
   12    <script>
   13        // 0.3s 后渲染 markmap
   14        setTimeout(() => {
   15            markmap.autoLoader.renderAll();
   16        }, 300);
   17    </script>
   18{{ end }}
   

3. 在 Markdown 文件中编写 markmap 代码块

 1``` markmap {height = "20vh"}
 2    # MarkMap
 3    ## 简介
 4    ## 使用方案  
 5    1. React框架
 6    2. Vue框架
 7    3. auto-loader
 8    4. VS Code 插件
 9    ## 在 Hugo 中的使用
10    5. 创建 Markmap 语法的代码块渲染器  
11    6. 在页面内容模版中配置渲染功能  
12    7. 在 Markdown 文件中编写 markmap 代码块