https://github.com/markdown-it/markdown-it-container

Fenced container plugin for markdown-it markdown parser
https://github.com/markdown-it/markdown-it-container

Last synced: 10 days ago
JSON representation

Fenced container plugin for markdown-it markdown parser

• Host: GitHub
• URL: https://github.com/markdown-it/markdown-it-container
• Owner: markdown-it
• License: mit
• Created: 2015-03-12T09:11:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-12-05T14:33:08.000Z (11 months ago)
• Last Synced: 2024-04-14T04:21:12.931Z (7 months ago)
• Language: JavaScript
• Size: 34.2 KB
• Stars: 482
• Watchers: 8
• Forks: 72
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# markdown-it-container

[![CI](https://github.com/markdown-it/markdown-it-container/actions/workflows/ci.yml/badge.svg)](https://github.com/markdown-it/markdown-it-container/actions/workflows/ci.yml)

[![NPM version](https://img.shields.io/npm/v/markdown-it-container.svg?style=flat)](https://www.npmjs.org/package/markdown-it-container)

[![Coverage Status](https://img.shields.io/coveralls/markdown-it/markdown-it-container/master.svg?style=flat)](https://coveralls.io/r/markdown-it/markdown-it-container?branch=master)

> Plugin for creating block-level custom containers for [markdown-it](https://github.com/markdown-it/markdown-it) markdown parser.

__v2.+ requires `markdown-it` v5.+, see changelog.__

With this plugin you can create block containers like:

```

::: warning

*here be dragons*

:::

```

.... and specify how they should be rendered. If no renderer defined, `
` with

container name class will be created:


```html



here be dragons



```


Markup is the same as for [fenced code blocks](http://spec.commonmark.org/0.18/#fenced-code-blocks).

Difference is, that marker use another character and content is rendered as markdown markup.

## Installation

node.js, browser:

```bash

$ npm install markdown-it-container --save

$ bower install markdown-it-container --save

```

## API

```js

var md = require('markdown-it')()

            .use(require('markdown-it-container'), name [, options]);

```

Params:

- __name__ - container name (mandatory)

- __options:__

   - __validate__ - optional, function to validate tail after opening marker, should

     return `true` on success.

   - __render__ - optional, renderer function for opening/closing tokens.

   - __marker__ - optional (`:`), character to use in delimiter.

## Example

```js

var md = require('markdown-it')();

md.use(require('markdown-it-container'), 'spoiler', {

  validate: function(params) {

    return params.trim().match(/^spoiler\s+(.*)$/);

  },

  render: function (tokens, idx) {

    var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);

    if (tokens[idx].nesting === 1) {

      // opening tag

      return '' + md.utils.escapeHtml(m[1]) + '\n';

    } else {

      // closing tag

      return '\n';

    }

  }

});

console.log(md.render('::: spoiler click me\n*content*\n:::\n'));

// Output:

//

// click me

// 
content

// 

```


## License

[MIT](https://github.com/markdown-it/markdown-it-container/blob/master/LICENSE)