https://github.com/diplodoc-platform/cut-extension

Cut extension for Diplodoc platform
https://github.com/diplodoc-platform/cut-extension

Last synced: about 2 months ago
JSON representation

Cut extension for Diplodoc platform

• Host: GitHub
• URL: https://github.com/diplodoc-platform/cut-extension
• Owner: diplodoc-platform
• License: mit
• Created: 2024-07-12T23:53:13.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-11-07T15:51:40.000Z (about 2 months ago)
• Last Synced: 2024-11-07T16:44:28.113Z (about 2 months ago)
• Language: TypeScript
• Size: 404 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Diplodoc cut extension

[![NPM version](https://img.shields.io/npm/v/@diplodoc/cut-extension.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/cut-extension)

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

The extension contains some parts:

- [Prepared runtime](#prepared-runtime)

- [MarkdownIt transform plugin](#markdownit-transform-plugin)

## Quickstart

Attach the plugin to the transformer:

```js

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](#markdownit-transform-plugin).

```html

    

        

        

        

    

    

        ${result.html}

    

```

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

```js

import '@diplodoc/cut-extension/runtime'

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

```

## MarkdownIt transform plugin

Plugin for [@diplodoc/transform](https://github.com/diplodoc-platform/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 `/`


  Default: `true`