markmap-autoloader

在HTML中自动加载markmaps。

用法

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>

请注意，<script type="text/template"> 是可选的。您可能需要它的两个原因：

• 在markmap渲染之前，内部内容不可见。
• 防止浏览器解析HTML内容。当您的Markdown代码中有原始HTML（例如<br>）时，这一点至关重要。

自动加载所有匹配.markmap的元素，使用最新的自动加载器版本：

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

要使用特定版本（这里是0.14.3）的mark-autoloader：

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

手动加载：

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

禁用内置插件：

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

API

选项

如果在加载此包之前定义了window.markmap.autoLoader，则将其视为autoLoader选项。

• autoLoader.manual 布尔值 默认值为false

  是否手动渲染markmaps。如果为false，则所有匹配.markmap的元素将在加载此包或发出DOMContentLoaded事件时渲染，以后者为准。

• autoLoader.transformPlugins ITransformPlugin[]

  如果提供，则覆盖内置插件。设置为[]以禁用自动加载器的所有内置插件。

• autoLoader.onReady 函数

  当markmap-lib/markmap-view及其依赖项加载时的回调。我们可以在此回调中调整全局选项。

markmap.autoLoader.renderAll()

渲染所有匹配.markmap的元素。

markmap.autoLoader.renderAllUnder(el)

在容器el下渲染所有匹配.markmap的元素。

markmap.autoLoader.render(el)

在el中渲染markmap，该元素应具有类名markmap。