cmpt-markmap | FixIt

Features

• Embed markmap mind maps anywhere via code blocks in Markdown, with configurable height
• Dedicated markmap page layout with a resizable split pane — article on the left, mind map on the right
• Custom toolbar with fullscreen support
• Seamlessly integrates with the FixIt theme’s dark mode

Requirements

• FixIt v1.0.0 or later.

Install Component

The installation method is the same as installing a theme. There are several ways to install, choose one, Here are two mainstream ways.

Install as Hugo Module

First make sure that your project itself is a Hugo module.

Then add this theme component to your hugo.toml configuration file:

1
2
3
4
5
6
7

[module]

[[module.imports]]
path = "github.com/hugo-fixit/FixIt"

[[module.imports]]
path = "github.com/hugo-fixit/cmpt-markmap"

On the first start of Hugo it will download the required files.

To update to the latest version of the module run:

1
2

hugo mod get -u
hugo mod tidy

Install as Git Submodule

Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.

1
2

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/cmpt-markmap.git themes/cmpt-markmap

Next edit hugo.toml of your project and add this theme component to your themes:

1

theme = ["FixIt", "cmpt-markmap"]

Configuration

In order to inject the partial {xxx}.fixit.html into the custom-assets through the custom block opened by the FixIt theme, you need to fill in the following necessary configurations:

1
2
3
4
5
6
7
8

[params]

[params.customPartials]
# ... other partials
assets = [
  "inject/cmpt-markmap.fixit.html",
]
# ... other partials

markmap Options

• In the theme config file and page front matter, use snake_case.
• In the front matter inside an extended markmap code block, use camelCase (same as the official markmap docs).

Global default configuration:

1
2
3
4
5
6

[params]

# Markmap configuration for layout (in snake_case)
# https://markmap.js.org/docs/json-options#option-list
[params.markmap]
color_freeze_level = 0

Usage

Extended Code Block

Use a fenced code block with the markmap language identifier in any Markdown file. Supports an optional height attribute (default 24rem):

1
2
3
4
5
6
7

```markmap
# Root

## Branch 1

## Branch 2
```

Or with front matter configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

```markmap {height="400px"}
---
title: Root
markmap:
  colorFreezeLevel: 2
---

## Branch 1

## Branch 2
```

Page Layout

Set layout: markmap in the page Front Matter to enable the dedicated split-pane mind map layout:

1
2
3
4
5
6
7
8

---
title: My Mind Map
layout: markmap
---

## Branch 1

## Branch 2

References

• Full Usage Example
• markmap Official Website
• Develop Theme Components | FixIt
• How to Develop a Hugo Theme Component | FixIt