Skip to content
Markmap Universe

hexo-markmap

Version Version GithubStars

Insert a mindmap into your Hexo blog using markmap.

Install

Section titled “Install”
Terminal window
pnpm add hexo-markmap -D

Usage

Section titled “Usage”
{% markmap %}
---
markmap:
  colorFreezeLevel: 2
---
# Markdown
# Syntax
{% endmarkmap %}

Inline Options

Section titled “Inline Options”

You can customize each mindmap individually in the markmap tag ({% markmap %} ... {% endmarkmap %}).

Frontmatter Options

Section titled “Frontmatter Options”

Just like you use frontmatter in your Markdown files in Hexo, you can use frontmatter in the markmap tag to customize your mindmap!

All frontmatter options are optional.

  • id : Used to define the ID of the markmap-wrap element.

  • markmap : Correspond to the IMarkmapJSONOptions in the markmap project. For more details, please refer to jsonOptions.

Tag Options

Section titled “Tag Options”

You can also specify the height of the mindmap directly in the tag. By default, it will be calculated based on the content.

{% markmap 300px %}
# Markdown
# Syntax
{% endmarkmap %}

Config

Section titled “Config”

Add your options to config.yml.

  • Directoryhexo-project
    • config.yml
    • Directorysource
      • Directory_posts/
        • …

Convention over configuration, if you don’t need any of the following features, then you don’t need to add these configs.

By default, it works well. Each option has a default value.

Default options

Section titled “Default options”
hexo_markmap:
  darkThemeCssSelector: '.dark'
  CDN: 'fastly'
  • darkThemeCssSelector : Used to specify the CSS selector for the dark theme.
  • CDN : Used to specify the CDN for Markmap. The supported values are fastly, jsdelivr, unpkg, and custom.
    • If set to custom, the customCDN value will be used as the CDN prefix.
  • customCDN : Defines a custom CDN URL for Markmap. This must be a valid URL.
  • globalOptions : Used to define global options for all mindmaps.

Example

Section titled “Example”
{% markmap %}
---
markmap:
  colorFreezeLevel: 2
---


## Links


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


## Related Projects


- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs


## Features


Note that if blocks and lists appear at the same level, the lists will be ignored.


### Lists


- **strong** ~~del~~ *italic* ==highlight==
- `inline code`
- [x] checkbox
- Katex: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ <!-- markmap: fold -->
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
- Ordered list
  1. item 1
  2. item 2


### Blocks
<!-- To avoid hexo treat the following as code block, we need to use a list -->
- ```js
  console.log('hello, JavaScript')
  ```


- | Products | Price |
  |-|-|
  | Apple | 4 |
  | Banana | 2 |


- ![](https://markmap.js.org/favicon.png)
{% endmarkmap %}

Contributors

Section titled “Contributors”

Thanks to all contributors🥰!

Credits

Section titled “Credits”
  • This project would not have been possible without markmap.
  • Originally inspired by hexo-simple-mindmap.
  • Thanks to @coderxi1 for conceiving and implementing the initial version 2!