markmap-autoloader

Load markmaps automatically in HTML.

Usage

HTML:

<style>
	.markmap {
		position: relative;
	}
	.markmap > svg {
		width: 100%;
		height: 300px;
	}
</style>

<div class="markmap">
	<script type="text/template">
		- markmap
		  - autoloader
		  - transformer
		  - view
	</script>
</div>

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.

Autoload all elements matching .markmap, using latest autoloader version:

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

To use a specific version (here: 0.14.3) of mark-autoloader:

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

Load manually:

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

Disable built-in plugins:

<script>
	window.markmap = {
		autoLoader: {
			transformPlugins: [],
		},
	};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>

API

See the API docs.

Options

window.markmap.autoLoader: AutoLoaderOptions

If window.markmap.autoLoader is defined before this package is loaded, it will be passed to the auto-loader as options. Check the type docs for all available options.