markdown-it-container

What is markdown-it-container?

The markdown-it-container package is a plugin for the markdown-it Markdown parser that allows you to create custom containers in your Markdown content. These containers can be used to add custom styling, notes, warnings, or any other block-level content that you want to differentiate from the rest of your Markdown content.

What are markdown-it-container's main functionalities?

Custom Containers

This feature allows you to define custom containers in your Markdown content. In this example, a 'warning' container is created, which can be used to highlight warning messages.

```javascript
const md = require('markdown-it')();
const container = require('markdown-it-container');

md.use(container, 'warning');

const result = md.render(`
::: warning
*Warning*: This is a custom warning container.
:::
`);
console.log(result);
```

Custom Rendering

This feature allows you to customize the rendering of the containers. In this example, a 'note' container is created with custom rendering logic to include additional HTML structure and styling.

```javascript
const md = require('markdown-it')();
const container = require('markdown-it-container');

md.use(container, 'note', {
  render: function (tokens, idx) {
    var m = tokens[idx].info.trim().match(/^note\s+(.*)$/);
    if (tokens[idx].nesting === 1) {
      return '<div class="note">' + md.utils.escapeHtml(m[1]) + '\n';
    } else {
      return '</div>\n';
    }
  }
});

const result = md.render(`
::: note This is a custom note
*Note*: This is a custom note container.
:::
`);
console.log(result);
```

Other packages similar to markdown-it-container

markdown-it-attrs

The markdown-it-attrs package allows you to add attributes to Markdown elements. While it doesn't create custom containers, it provides a way to add classes, IDs, and other attributes to elements, which can be used for styling and customization similar to markdown-it-container.

markdown-it-admonition

The markdown-it-admonition package provides a way to create admonition blocks (notes, warnings, tips, etc.) in Markdown. It is similar to markdown-it-container in that it allows for custom block-level content, but it is specifically designed for admonitions.

markdown-it-div

The markdown-it-div package allows you to create custom <div> containers in your Markdown content. It is similar to markdown-it-container but focuses specifically on <div> elements, providing a simpler API for creating custom containers.

README

markdown-it-container

Plugin for creating block-level custom containers for 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:

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

Markup is the same as for fenced code blocks. Difference is, that marker use another character and content is rendered as markdown markup.

Installation

node.js, browser:

$ npm install markdown-it-container --save
$ bower install markdown-it-container --save

API

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

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