markmap-autoloader

Carregue markmaps automaticamente em HTML.

Uso

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>

Observe que <script type="text/template"> é opcional. Você pode precisar dele por duas razões:

• Para que o conteúdo interno fique invisível antes que o markmap seja renderizado.
• Impedir que os conteúdos HTML sejam analisados pelo navegador. Isso é crucial quando você tem HTML bruto (por exemplo, <br>) no seu código Markdown.

Carregue automaticamente todos os elementos que correspondem a .markmap, usando a versão mais recente do autoloader:

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

Para usar uma versão específica (aqui: 0.14.3) do mark-autoloader:

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

Carregue manualmente:

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

Desativar plugins embutidos:

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

API

Veja a documentação da API.

Opções

window.markmap.autoLoader: AutoLoaderOptions

Se window.markmap.autoLoader estiver definido antes que este pacote seja carregado, ele será passado para o autoloader como opções. Consulte a documentação de tipos para todas as opções disponíveis.