헥소(Hexo)에 마인드맵 추가

작성일 Edited on In Symbols count in article: 802 Reading time ≈ 1 mins.

헥소 사이트에 마인드맵

마인드맵을 작성하기 위해서는
기존에 plantuml 이나 kroki 를 사용했는데 이쁘지 않다

그래서 찾은 것이 markmap 이다

일단 plantuml 마인드맵 보다는 훨씬 이쁘고 사용자의 클릭에 반응한다

링크도 걸 수 있고 좋다

plantuml 마인드맵

markmap 마인드맵

설치 및 사용법

설치

1
npm install hexo-markmap

헥소 설정

1
2
3
4
5
6
7
8
9
10
## _config.yml
hexo_markmap:
  pjax: false
  katex: false
  prism: false
  CDN:
    d3_js: https://fastly.jsdelivr.net/npm/d3@6
    markmap_view_js: https://fastly.jsdelivr.net/npm/markmap-view@0.2.7
    katex_css: https://fastly.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
    prism_css: https://fastly.jsdelivr.net/npm/prismjs@1.25.0/themes/prism.css

post 에서 사용법

아래와 같이 추가해주면 된다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% markmap 400px %}
- [Debian](https://markmap.js.org/)
  - Ubuntu
    - Linux Mint
    - Kubuntu
    - Lubuntu
    - KDE Neon
  - LMDE
  - SolydXK
  - SteamOS
  - Raspbian with a very long name
    - <s>Raspmbc</s> => OSMC
    - <s>Raspyfi</s> => Volumio
{% endmarkmap %}

참고 사이트

  • markmap
  • plantuml