Plugin to add block-level <div>s to markdown-it markdown parser

Downloads in past


501.1.05 years ago5 years agoMinified + gzip package size for markdown-it-div in KB


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>

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

::: footer
Copyright 2018



node.js, browser:
$ npm install markdown-it-div --save
$ bower install markdown-it-div --save


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

  • 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.


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](

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>