@diplodoc/cut-extension NPM

Diplodoc cut extension

This is an extension of the Diplodoc platform, which allows adding collapsible sections in the documentation.

The extension contains some parts:

Quickstart

Attach the plugin to the transformer:

import cutExtension from '@diplodoc/cut-extension';
import transform from '@diplodoc/transform';

const {result} = await transform(`
{% cut "Cut title" %}

Cut content

{% endcut %}
`, {
    plugins: [
        tabsExtension.transform({ bundle: false })
    ]
});

Prepared runtime

It is necessary to add runtime scripts to make cuts interactive on your page. You can add assets files which were generated by the MarkdownIt transform plugin.

<html>
    <head>
        <!-- Read more about '_assets/tabs-extension.js' and '_assets/tabs-extension.css' in 'Transform plugin' section -->
        <script src='_assets/cut-extension.js' async></script>
        <link rel='stylesheet' href='_assets/cut-extension.css' />
    </head>
    <body>
        ${result.html}
    </body>
</html>

Or you can just include runtime's source code in your bundle.

import '@diplodoc/cut-extension/runtime'
import '@diplodoc/cut-extension/runtime/styles.css'

MarkdownIt transform plugin

Plugin for @diplodoc/transform package.

Options:

runtime.script - name on runtime script which will be exposed in results script section. Default: _assets/tabs-extension.js
runtime.style - name on runtime css file which will be exposed in results style section. (Default: _assets/tabs-extension.css)
bundle - boolean flag to enable/disable copying of bundled runtime to target directory. Where target directore is <transformer output option>/<plugin runtime option> Default: true