当前位置:   article > 正文

markmap入门

markmap

markmap入门

1、它是干啥的?

支持 Markdown 语法的思维导图工具,可支持在线编写思维导图,或者在VS Code内编写思维导图

  1. 在线使用

    image-20201209211014160

  2. VS Code内使用

    image-20201209211106309

2、参考资料

  1. 首先当然是参考官网啦:https://markmap.js.org/
  2. 然后是别人的博客啦:https://blog.csdn.net/u013129932/article/details/110288646

3、如何使用

3.1、在线使用

  1. 进入官网后,点击【Try it out】,可以在线绘制思维导图

    image-20201209210645514

  2. 然后就可以编写思维导图啦,是不是超级方便~~~

    image-20201209211014160

3.2、VS Code 内使用

  1. 首先需要在 VS Code 内安装 markup 插件

    image-20201209222211191

  2. markup 要求思维导图的后缀名为 .mm.md,然后用 VS Code 打开就能编辑啦

    image-20201209211106309

3.3、语法格式

先从官网的代码开始研究

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## Related

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

语法规则

  1. 感觉就是 Markdown 语法换了种表现形式,# 表示一级标题,##表示二级标题。### 表示三级标题

    image-20201209223020773

  2. emmm,然后疯狂用各种 Markdown 语法就完事了

3.4、导出思维图

  1. 在网页中导出 .html 格式和 .svg 格式

    image-20201209224050421

  2. 在 VS Code 内导出 .html 格式

    image-20201209223307367

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/86005
推荐阅读
相关标签
  

闽ICP备14008679号