# markdown-it-container

> Plugin to create block-level custom containers for markdown-it markdown parser

Latest version **4.0.0** (published 2023-12-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-it-container
pnpm add markdown-it-container
yarn add markdown-it-container
bun add markdown-it-container
```

## Health

**Score 38/100 (D)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2023-12-05 |
| First published | 2015-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/markdown-it-container) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 585 |
| Maintainers | vitaly |
| Keywords | markdown-it-plugin, markdown-it, markdown |

## Links

- npm: https://www.npmjs.com/package/markdown-it-container
- Repository: https://github.com/markdown-it/markdown-it-container
- Homepage: https://github.com/markdown-it/markdown-it-container#readme
- Issues: https://github.com/markdown-it/markdown-it-container/issues
- npm.io page: https://npm.io/package/markdown-it-container

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.0.0 (latest) — 2023-12-05
- 3.0.0 — 2020-06-02
- 2.0.0 — 2015-10-05
- 1.0.0 — 2015-03-13

## 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, `<div>` with
container name class will be created:

```html
<div class="warning">
<em>here be dragons</em>
</div>
```

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 '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n';

    } else {
      // closing tag
      return '</details>\n';
    }
  }
});

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

// Output:
//
// <details><summary>click me</summary>
// <p><em>content</em></p>
// </details>
```

## License

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

---
_Source: https://npm.io/package/markdown-it-container · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._