Skip to content
Fenced container plugin for markdown-it markdown parser
JavaScript Makefile
Branch: master
Clone or download
Pull request Compare This branch is 5 commits ahead of markdown-it:master.


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>



You can’t perform that action at this time.