@gerhobbelt/markdown-it-container

    3.0.0-10 • Public • Published

    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 v10.+, 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 & bower:

    $ npm install @gerhobbelt/markdown-it-container --save
    $ bower install @gerhobbelt/markdown-it-container --save

    browser (CDN):

    API

    // node.js
    var md = require('@gerhobbelt/markdown-it')()
                .use(require('@gerhobbelt/markdown-it-container'), name [, options]);
    
    // browser
    var md =  window.markdownit()
                .use(window.markdownitContainer, 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.
      • content - optional, renderer function for the container content.
      • marker - optional (:), character/string to use in delimiter.
      • endMarker - optional (default: same as marker), character/string to use in terminating delimiter. Specify when the closing mark differs from the starting mark of your container.
      • minMarkerCount - optional (3), character/string repeated number to use in delimiter.

    Example

    var options = {
      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';
        }
      }
    };
    
    // node.js
    var md = require('@gerhobbelt/markdown-it')();
    md.use(require('@gerhobbelt/markdown-it-container'), 'spoiler', options);
    
    // or browser
    var md = window.markdownit();
    md.use(window.markdownitContainer, 'spoiler', options);
    
    console.log(md.render('::: spoiler click me\n*content*\n:::\n'));
    
    // Output:
    //
    // <details><summary>click me</summary>
    // <p><em>content</em></p>
    // </details>

    Example with markdown-it-attrs

    You can use markdown-it-attrs syntax like '#my-id.my-class title="hello"'

    var md = require('@gerhobbelt/markdown-it')();
    
    md.use(require('@gerhobbelt/markdown-it-attrs'))
      .use(require('@gerhobbelt/markdown-it-container'), 'decorate' , {
                validate: function(params) {
                    return params.trim().match(/^(.*)$/);
                },
    
                render: function (tokens, idx) {
                    var m = tokens[idx].info.trim().match(/^(.*)$/);
    
                    if (tokens[idx].nesting === 1) {
                        // opening tag
                        var fake=md.render('TMP_FOR_CONTAINER<!-- {'+ m[1]+'} -->')
    console.log(fake)
                        return '<div '+ fake.substring(3,  fake.indexOf('>'))+'>\n';
    
                    } else {
                        // closing tag
                        return '</div>\n';
                    }
                }
       })
      
    
    console.log(md.render('::: #n.ok title=hello\nccc\n:::'));
    
    // Output:
    // <div id="n" class="ok" title="hello">
    // <p>ccc</p>
    // </div>

    License

    MIT

    Install

    npm i @gerhobbelt/markdown-it-container

    DownloadsWeekly Downloads

    25

    Version

    3.0.0-10

    License

    MIT

    Unpacked Size

    88.4 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar