Skip to content

Commit

Permalink
feat: add markmap plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
Renovamen committed Mar 26, 2021
1 parent 651210d commit 1e942dc
Show file tree
Hide file tree
Showing 22 changed files with 759 additions and 91 deletions.
2 changes: 1 addition & 1 deletion README-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
- 文章目录
- 多种代码高亮主题,支持代码块全屏(从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能)
- 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
- 在文章中使用图表:[Chart.js](https://www.chartjs.org)[Mermaid](https://mermaid-js.github.io)[roughViz.js](https://github.com/jwilber/roughViz)
- 在文章中使用图表:[Chart.js](https://www.chartjs.org)[Mermaid](https://mermaid-js.github.io)[roughViz.js](https://github.com/jwilber/roughViz)[markmap](https://github.com/gera2ld/markmap)
- 文章中的一些附加样式,目前支持:
- 脚注(基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)
- 高亮(基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ A blog theme for [VuePress](https://vuepress.vuejs.org/). The [Jekyll](https://j
- Table of contents
- Multiple syntax highlighting themes, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
- Tex support ([Katex](https://github.com/KaTeX/KaTeX))
- Draw charts in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io) and [roughViz.js](https://github.com/jwilber/roughViz)
- Draw charts and graphs in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io), [roughViz.js](https://github.com/jwilber/roughViz) and [markmap](https://github.com/gera2ld/markmap)
- Markdown enhancements:
- Footnote ([markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote))
- Mark ([markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))
Expand Down
1 change: 1 addition & 0 deletions example/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ module.exports = {
mermaid: true,
chartjs: true,
roughviz: true,
markmap: true,
mdPlus: {
all: true
},
Expand Down
4 changes: 2 additions & 2 deletions example/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Gungnir is the spear of the god Odin in Norse mythology, made from the wood of t
- Table of contents
- Multiple syntax highlighting themes, support full screening the code blocks (inspired by WordPress theme [Sakura](https://github.com/mashirozx/Sakura))
- Tex support ([Katex](https://github.com/KaTeX/KaTeX))
- Draw charts in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io) and [roughViz.js](https://github.com/jwilber/roughViz)
- Draw charts and graphs in Markdown easily: [Chart.js](https://www.chartjs.org), [Mermaid](https://mermaid-js.github.io), [roughViz.js](https://github.com/jwilber/roughViz) and [markmap](https://github.com/gera2ld/markmap)
- Markdown enhancements:
- Footnote ([markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote))
- Mark ([markdown-it-mark](https://github.com/markdown-it/markdown-it-mark))
Expand All @@ -61,4 +61,4 @@ Gungnir is the spear of the god Odin in Norse mythology, made from the wood of t

## Other Resources

As mentioned above, Gungnir was originally a [Jekyll](https://jekyllrb.com/) theme: 🖥️ [[Home Page / Demo Site]](https://jekyll-theme-gungnir.vercel.app) 📖 [[Docs]](https://jekyll-theme-gungnir.vercel.app/theme/) 🧐 [[Github]](https://github.com/Renovamen/jekyll-theme-gungnir)
As mentioned above, Gungnir was originally a [Jekyll](https://jekyllrb.com/) theme: 🖥️ [[Home Page / Demo Site]](https://jekyll-theme-gungnir.vercel.app) 📖 [[Docs]](https://jekyll-theme-gungnir.vercel.app/theme/) 🧐 [[Github]](https://github.com/Renovamen/jekyll-theme-gungnir)
108 changes: 65 additions & 43 deletions example/posts/2020-10-29-hello-word.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ This is a test post without the header image.

<!-- more -->


## Paragraphs

### English
Expand Down Expand Up @@ -73,67 +74,88 @@ Inline code: `const a = 1`

```chart
{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}
```

### Mermaid

```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```

### roughViz.js

```roughviz-donut
{
"data": {
"labels": ["North", "South", "East", "West"],
"values": [10, 5, 8, 3]
},
"title": "Regions",
"colors": ["red", "orange", "blue", "skyblue"],
"roughness": 4
"data": {
"labels": ["North", "South", "East", "West"],
"values": [10, 5, 8, 3]
},
"title": "Regions",
"colors": ["red", "orange", "blue", "skyblue"],
"roughness": 4
}
```

### markmap

```markmap
# Fruit
## Red
- [Apple](https://en.wikipedia.org/wiki/Apple)
- *Cherry*
## Yellow
- **Lemon**
- Banana
- ~~Pumpkin~~
## Not related
- $E = mc^2$
```


## Images

Expand Down
21 changes: 21 additions & 0 deletions example/posts/2020-10-30-hello-word-with-header-image.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,27 @@ sequenceDiagram
}
```

### markmap

```markmap
# Fruit
## Red
- [Apple](https://en.wikipedia.org/wiki/Apple)
- *Cherry*
## Yellow
- **Lemon**
- Banana
- ~~Pumpkin~~
## Not related
- $E = mc^2$
```


## Images

Expand Down
4 changes: 2 additions & 2 deletions example/zh/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题,在 [H
- 文章目录
- 多种代码高亮主题,支持代码块全屏(从 WordPress 主题 [Sakura](https://github.com/mashirozx/Sakura) 搬过来的功能)
- 基于 [Katex](https://github.com/KaTeX/KaTeX) 的公式支持
- 在文章中使用图表:[Chart.js](https://www.chartjs.org)[Mermaid](https://mermaid-js.github.io)[roughViz.js](https://github.com/jwilber/roughViz)
- 在文章中使用图表:[Chart.js](https://www.chartjs.org)[Mermaid](https://mermaid-js.github.io)[roughViz.js](https://github.com/jwilber/roughViz)[markmap](https://github.com/gera2ld/markmap)
- 文章中的一些附加样式,目前支持:
- 脚注(基于 [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote)
- 高亮(基于 [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
Expand All @@ -63,4 +63,4 @@ Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题,在 [H

## 其他版本

如上所述,Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题:🖥️ [[主页 / 演示站点]](https://jekyll-theme-gungnir.vercel.app) 📖 [[文档]](https://jekyll-theme-gungnir.vercel.app/theme/) 🧐 [[Github]](https://github.com/Renovamen/jekyll-theme-gungnir)
如上所述,Gungnir 最初是一个基于 [Jekyll](https://jekyllrb.com/) 的主题:🖥️ [[主页 / 演示站点]](https://jekyll-theme-gungnir.vercel.app) 📖 [[文档]](https://jekyll-theme-gungnir.vercel.app/theme/) 🧐 [[Github]](https://github.com/Renovamen/jekyll-theme-gungnir)
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"dev": "vuepress dev example --no-cache --host 0.0.0.0 --port 4000",
"lint": "eslint --ext .js,.vue ./",
"lint-fix": "eslint --fix --ext .js,.vue ./",
"preview": "cd dist && http-server"
"preview": "cd dist && http-server",
"cp-readme": "cp {README.md,README-CN.md} packages/theme-gungnir/"
},
"husky": {
"hooks": {
Expand Down
21 changes: 21 additions & 0 deletions packages/plugins/markmap/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Xiaohan Zou (@Renovamen)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
56 changes: 56 additions & 0 deletions packages/plugins/markmap/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# vuepress-plugin-markmap

A plugin for adding [markmap](https://github.com/gera2ld/markmap) to [VuePress](https://vuepress.vuejs.org/) to visualize your Markdown as mindmaps.

&nbsp;

## Installation

Install this plugin with:

```bash
yarn add vuepress-plugin-markmap
# or
npm install vuepress-plugin-markmap
```

And add it to your `.vuepress/config.js`:

```js
module.exports = {
plugins: [
[
'vuepress-plugin-markmap'
]
]
}
```

&nbsp;

## Usage

Then you can use [markmap](https://github.com/gera2ld/markmap) in Markdown:

~~~markdown
```markmap
# Fruit

## Red

- [Apple](https://en.wikipedia.org/wiki/Apple)
- *Cherry*

## Yellow

- **Lemon**
- Banana
- ~~Pumpkin~~
```
~~~

&nbsp;

## License

[MIT](LICENSE)
6 changes: 6 additions & 0 deletions packages/plugins/markmap/enhanceApp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import Markmap from "./lib/Markmap";

export default function (ctx) {
const { Vue } = ctx;
Vue.component("Markmap", Markmap);
}
12 changes: 12 additions & 0 deletions packages/plugins/markmap/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const path = require("path");
const markmap = require("./lib/markdown-it-markmap");

module.exports = (options, ctx) => {
return {
name: "vuepress-plugin-markmap",
enhanceAppFiles: path.resolve(__dirname, "./enhanceApp.js"),
chainMarkdown(config) {
config.plugin("markmap").use(markmap);
}
};
};
55 changes: 55 additions & 0 deletions packages/plugins/markmap/lib/Markmap.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<div class="vuepress-markmap">
<svg :id="id" ref="markmap"></svg>
</div>
</template>

<script>
import { transform, getUsedAssets } from "markmap-lib/dist/transform";
import { Markmap, loadCSS, loadJS } from "markmap-lib/dist/view";
import * as markmap from "markmap-lib/dist/view";
export default {
name: "Markmap",
props: {
id: {
type: String,
required: true
},
code: {
type: String,
required: true
}
},
mounted() {
// transform markdown
const { root, features } = transform(this.code);
// get assets required by used features
const { styles, scripts } = getUsedAssets(features);
// load assets
if (styles) loadCSS(styles);
if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
// create markmap
const svg = this.$refs.markmap;
const mm = Markmap.create(svg, null, root);
// resize svg and fit graph
// https://github.com/gera2ld/markmap/issues/63
mm.rescale(1).then(function () {
svg.style.height = svg.getBBox().height + 10 + "px";
mm.fit();
});
}
};
</script>

<style lang="stylus">
.vuepress-markmap
margin 30px 0
width 100%
svg
display block
width 100%
</style>

1 comment on commit 1e942dc

@vercel
Copy link

@vercel vercel bot commented on 1e942dc Mar 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.