This is an extension of the Diplodoc platform, which allows adding collapsible sections in the documentation.
The extension contains some parts:
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 })
]
});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'Plugin for @diplodoc/transform package.
Options:
-
runtime.script- name on runtime script which will be exposed in resultsscriptsection.
Default:_assets/tabs-extension.js -
runtime.style- name on runtime css file which will be exposed in resultsstylesection.
(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