markdown-it-grouped-code-fence

markdown-it-grouped-code-fence

Grouped code fence is almost the same as code fence. The only difference is that you can use a syntax, keyword-title within a pair of brackets , in the info string to combine multiple code fence into a single group. In a Markdown renderer that does not support this syntax, will ignore the syntax and render it as a normal code fence.

Syntax

```language [keyword-title]
```

keyword

Optional, Used to distinguish between different groups. default will consider as a anonymous group.

title

Optional, Used to customize the title of each code fence. default will using the language name.

Examples

Go to Playground to see the output.

Use keywords to distinguish between different groups

```ruby [printA]
  puts 'A'
```

```python [printA-python3]
  print('A')
```

```javascript [printB]
  console.log('B')
```

output:

  puts 'A'

  print('A')

  console.log('B')

Anonymous group

```ruby []
  put 'Hello world!'
```

```python [-python3]
  print('Hello world!')
```

```javascript []
  console.log('Hello world!')
```

output:

  put 'Hello world!'

  print('Hello world!')

  console.log('Hello world!')

Installation

Using yarn:

yarn add markdown-it-grouped-code-fence

Or via npm:

npm install markdown-it-grouped-code-fence

Then, to enable the feature:

import MarkdownIt from 'markdown-it';
import { groupedCodeFencePlugin } from 'markdown-it-grouped-code-fence';

const md = new MarkdownIt();

md.use(
  groupedCodeFencePlugin({
    className: {
      container: 'class name here',
      navigationBar: 'class name here',
      fenceRadio: 'class name here',
      labelRadio: 'class name here',
    },
  }),
);