markdown-it-container - GitLite

KO | EN

gitlite — search

#svg #codex #self-hosted #java #command-line #agents #vue #reactjs #machine-learning #automation

markdown-it-container

(★ 585)

Fenced container plugin for markdown-it markdown parser

File Explorer

ZIP Download

- - ci.yml
- dependabot.yml
- - default.txt
- api.mjs
- cjs.js
- default.mjs
- misc.mjs
.eslintrc.yml
.gitignore
CHANGELOG.md
index.mjs
LICENSE
package.json
README.md
rollup.config.mjs

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`bower`

View Details ▼

A package manager optimized for front-end web development.
A package can be a GitHub user/repo shorthand, a Git endpoint, a URL or a registered package.

bower install

Install a project's dependencies, listed in its `bower.json`:

bower install {{package1 package2 ...}}

Install one or more packages to the bower_components directory:

bower uninstall {{package1 package2 ...}}

Uninstall packages locally from the bower_components directory:

🔍

`npm install`

View Details ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

# Project Badges

CI Visit
NPM version Visit
Coverage Status Visit

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> 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)