Neck Protection Mandate

    markdown-it-div

    1.1.0 • Public • Published

    markdown-it-div

    Build Status NPM version Coverage Status

    Plugin for adding block-level divs to markdown-it markdown parser.

    Requires markdown-it v5.+.

    With this plugin you can create block divs like:

    ::: #warning
    *here be dragons*
    :::
    

    This block will be translated to HTML as:

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

    So, the triple-colon is used to start the div. This may be followed by an ID, any number of class names and any number of other attributes.

    The ID is prefixed with an octothorpe:

    ::: #my-id
    

    Classes need not be prefixed (you can use a dot if like):

    ::: post .blog-post
    

    Other attributes are of the format attr=value. So an ID and class could be set with:

    ::: id=my-id class=blog-post
    

    You can nest divs within each other as well:

    ::: #main
    
    ::: header
    ::: menu
    *menu here*
    :::
    :::
    
    ::: body
    ::: post
    *POST ONE*
    :::
    ::: post
    *POST TWO*
    :::
    :::
    
    ::: footer
    Copyright 2018
    :::
    
    :::
    

    Installation

    node.js, browser:

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

    API

    var md = require('markdown-it')()
                .use(require('markdown-it-div')[, options]);

    Params:

    • 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

    Generally, you're just going to use this to add divs around your markdown text.

    These are my instructions for hooking the device to the mains.
     
    ::: note
    Please do NOT do this if you have never handled the mains before!
     
    These are not instructions: [link](https://example.org).
    :::
     
    Okay, moving along...

    The validate method allows you to use this class like you would with markdown-it-container. So, to add a custom spoiler tag in your javascript code:

    var md = require('markdown-it')();
     
    md.use(require('markdown-it-div'), {
     
      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

    Install

    npm i markdown-it-div

    DownloadsWeekly Downloads

    1,833

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • kicks