Skip to content

Latest commit

 

History

History
68 lines (51 loc) · 2.06 KB

README.md

File metadata and controls

68 lines (51 loc) · 2.06 KB
Raw

Diplodoc cut extension

NPM version

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