markmap-autoloader
TypeScript icon, indicating that this package has built-in type declarations

0.17.0 • Public • Published

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, for the content inside to be invisible before the markmap is rendered.

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

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

To use 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.

Package Sidebar

Install

npm i markmap-autoloader

Weekly Downloads

56

Version

0.17.0

License

MIT

Unpacked Size

18.6 kB

Total Files

5

Last publish

Collaborators

  • gera2ld