markmap-autoloader

NPM License Downloads

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

Options

If window.markmap.autoLoader is defined before this package is loaded, it will be regarded as autoLoader options.

  • autoLoader.manual boolean default as false

    Whether to render markmaps manually. If false, all elements matching .markmap will be rendered once this package loads or DOMContentLoaded is emitted, whichever later.

  • autoLoader.transformPlugins ITransformPlugin[]

    Override built-in plugins if provided. Set to [] to disable all built-in plugins for auto-loader.

  • autoLoader.onReady function

    Callback when markmap-lib/markmap-view and their dependencies are loaded. We can tweak global options in this callback.

markmap.autoLoader.renderAll()

Render all elements matching .markmap.

markmap.autoLoader.renderAllUnder(el)

Render all elements matching .markmap under container el.

markmap.autoLoader.render(el)

Render markmap in el, which is supposed to have the class name markmap.