markmap-autoloader
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.