markmap-autoloader

NPM License Downloads

Cargar Markmaps automáticamente en 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>

Tenga en cuenta que <script type="text/template"> es opcional. Puede que lo necesite por dos razones:

  • Para que el contenido interno sea invisible antes de que se renderice el Markmap.
  • Evitar que el navegador analice el contenido HTML. Esto es crítico cuando tiene HTML sin procesar (por ejemplo, <br>) en su código Markdown.

Cargar automáticamente todos los elementos que coincidan con .markmap, utilizando la última versión del autoloader:

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

Para usar una versión específica (aquí: 0.14.3) de mark-autoloader:

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

Cargar manualmente:

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

Deshabilitar los plugins integrados:

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

API

Ver la documentación de la API.

Opciones

window.markmap.autoLoader: AutoLoaderOptions

Si window.markmap.autoLoader está definido antes de que se cargue este paquete, se pasará al autoloader como opciones. Consulte la documentación de tipos para todas las opciones disponibles.