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.
```language [keyword-title]
```
Optional, Used to distinguish between different groups. default will consider as a anonymous group.
Optional, Used to customize the title of each code fence. default will using the language name.
Go to Playground to see the output.
```ruby [printA]
puts 'A'
```
```python [printA-python3]
print('A')
```
```javascript [printB]
console.log('B')
```
puts 'A'
print('A')
console.log('B')
```ruby []
put 'Hello world!'
```
```python [-python3]
print('Hello world!')
```
```javascript []
console.log('Hello world!')
```
put 'Hello world!'
print('Hello world!')
console.log('Hello world!')
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',
},
}),
);