english | русский
Extension for the Diplodoc platform that enables collapsible sections (cuts) in documentation. Provides both a MarkdownIt transform plugin for processing cut directives and a runtime component for interactive behavior.
- Collapsible sections — Create expandable/collapsible content blocks in documentation
- MarkdownIt plugin — Transform cut directives during markdown processing
- Runtime component — Interactive cut behavior with keyboard navigation
- Grouped cuts — Support for mutually exclusive cut groups
- URL hash navigation — Direct linking to specific cuts via URL hash
- Accessibility — ARIA attributes and keyboard navigation support
- SCSS styles — Customizable styling for cut components
npm install @diplodoc/cut-extensionAttach 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: [cutExtension.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/cut-extension.js' and '_assets/cut-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/cut-extension.js -
runtime.style- name on runtime css file which will be exposed in resultsstylesection.
(Default:_assets/cut-extension.css) -
bundle- boolean flag to enable/disable copying of bundled runtime to target directory.
Where target directory is<transformer output option>/<plugin runtime option>
Default:true
# Install dependencies
npm install
# Build the package
npm run build
# Run tests
npm test
# Type check
npm run typecheck
# Lint code
npm run lintFor detailed information about architecture, development, and contributing, see AGENTS.md.
MIT