markmap-autoloader

Load markmaps automatically in HTML.

Quick Start

HTML:

<!-- Set global styles -->
<style>
	.markmap {
		position: relative;
	}
	.markmap > svg {
		width: 100%;
		height: 300px;
	}
</style>

<!-- Wrap Markdown source in `.markmap` elements -->
<div class="markmap">
	<script type="text/template">
		- markmap
		  - autoloader
		  - transformer
		  - view
	</script>
</div>

<!-- Load markmap -->
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>

All elements matching .markmap will be rendered as markmaps.

Note that <script type="text/template"> is optional. You may need it for two reasons:

• For the content inside to be invisible before the markmap is rendered.
• Prevent the HTML contents from being parsed by the browser. This is critical when you have raw HTML (e.g. <br>) in your Markdown code.

Advanced Usage

You may configure markmap-autoloader by setting window.markmap.autoLoader before loading the package. See AutoLoaderOptions for all possible options.

<script>
	window.markmap = {
		/** @type AutoLoaderOptions */
		autoLoader: {
			toolbar: true, // Enable toolbar
		},
	};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>

Load manually

<script>
	window.markmap = {
		autoLoader: { manual: true },
	};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@latest"></script>
<script>
	// Render in 5s
	setTimeout(() => {
		markmap.autoLoader.renderAll();
	}, 5000);
</script>

API

After loading the package, the module can be accessed from window.markmap.autoLoader. See the API docs for all possible methods and properties.