@hackmd/markdown-it-container
Plugin to create block-level custom containers for markdown-it markdown parser
Last updated 3 months ago by yukaii .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @hackmd/markdown-it-container 
SYNC missed versions from official npm registry.

markdown-it-container

Build Status NPM version Coverage Status

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

Current Tags

  • 2.1.0                                ...           latest (3 months ago)

1 Versions

  • 2.1.0                                ...           3 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (8)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |