yarn是什么意思-Markdown 还能这么玩？有意思

哈喽大家好，我是小编火宝。

今天编程导航跟大家分享一个有意思的工具 – ， 是一个可以将 通过思维导图的方式进行可视化的开源工具，是 和 的结合，它解析 内容并提取其层次结构并呈现交互式思维导图。

试用

我们可以直接通过 的在线网站直接使用该工具，试用地址：。可以根据官网的语法来进行学习：

# Markmap

## 链接

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

## 相关

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

## 特性

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex - $x = {-b pm sqrt{b^2-4ac} over 2a}$

感觉就是 语法换了种表现形式，#表示一级标题，##表示二级标题，###表示三级标题。编写完成后可以将可视化的思维导图导出成交互式的 HTML 或者 svg 图片。

插件

更让人喜欢的是该工具还提供了 插件，在 中搜索 即可安装该插件，可以直接在 中预览 ：

要求思维导图的后缀名为 .mm.md，然后用 打开就能编辑啦：

命令行工具

此外我们还可以使用 命令行工具，比如在本地终端中使用 命令行，使用如下所示的命令即可：

$ npx markmap-cli markmap.md

当然也可以全局安装它：

$ yarn global add markmap-cli
$ markmap markmap.md

还可以使用 -w 参数来 watch 文件，以便可以编辑 文件并即时获取更新：

$ markmap -w markmap.md

前端代码

如果你想在前端代码中自行控制使用 ，可以先安装 -lib 这个库来转换 数据：

$ yarn add markmap-lib

使用如下代码可以将 转换成 数据对象：

import { Transformer } from 'markmap-lib';

const transformer = new Transformer();

// 1. 转换 makrdown
const { root, features } = transformer.transform(markdown);

// 2. 获取 assets 数据
// either get assets required by used features
const { styles, scripts } = transformer.getUsedAssets(features);
// or get all possible assets that could be used later
const { styles, scripts } = transformer.getAssets(features);

有了 的数据后我们可以使用 -view 库来进行渲染：

$ yarn add markmap-view

首先创建一个确定宽高的 SVG 元素：

<script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>

<svg id="markmap" style="width: 800px; height: 800px"></svg>

然后渲染 数据到 SVG 元素：

// load with 
const { markmap } = window;
// or with ESM
import * as markmap from 'markmap-view';

const { Markmap, loadCSS, loadJS } = markmap;

// 1. load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => markmap });

// 2. create markmap
// `options` is optional, i.e. `undefined` can be passed here
Markmap.create('#markmap', options, root);
The first argument of Markmap.create can also be an actual SVG element, for example:

const svgEl = document.querySelector('#markmap');
Markmap.create(svgEl, options, data);

本期内容就到这里啦～感兴趣的同学可以试试哦，如果本文对您有帮助，也请帮忙点个赞 + 在看啦！️

欢迎大家加入鱼皮的，和 7000 多名小伙伴们一起交流学习，向鱼皮等大厂同学 1 对 1 提问、跟着鱼皮直播做项目、领取大量编程资源等。

现在加入限时优惠60 元，5 月 4 日晚 23 点涨价 20 元哦，欢迎想一起学习进步的小伙伴~

admin永久会员

打赏 收藏 海报 链接