MarkdownItPlugins

A bunch of plugins for markdown-it wrapped for Meteor.

Table of Contents

• Install
• Usage
• The Plugins
  • markdown-it-abbr
  • markdown-it-attrs
  • markdown-it-sub
  • markdown-it-sup
  • markdown-it-regexp
  • markdown-it-regexp-enhanced
  • mdvariables
  • mdvariables-enhanced

Install

This is available as convexset:markdown-it-plugins on Atmosphere. (Install with meteor add convexset:markdown-it-plugins.)

Usage

Suppose one already has markdown-it installed, e.g. via smoiz:markdown-it. First, instantiate a renderer...

1var markdownRenderer = markdownit({
2    // Enable HTML tags in source
3    html: true,
4    // Use '/' to close single tags (<br />).
5    xhtmlOut: true,
6
7    // This is only for full CommonMark compatibility.
8    // Convert '\n' in paragraphs into <br>
9    breaks: true,
10    // CSS language prefix for fenced blocks. Can be useful for external highlighters.
11    langPrefix: '',
12    // Autoconvert URL-like text to links
13    linkify: true,
14
15    // Enable some language-neutral replacement + quotes beautification
16    typographer: true,
17
18    // Double + single quotes replacement pairs, when typographer enabled,
19    // and smartquotes on. Could be either a String or an Array.
20    //
21    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
22    // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
23    quotes: '“”‘’',
24});

Then to load plugins, do the following:

1var markdownItSubPlugin = MarkdownItPlugins.getPlugin('markdown-it-sub');
2var markdownItSupPlugin = MarkdownItPlugins.getPlugin('markdown-it-sup');
3
4markdownRenderer
5    .use(markdownItSubPlugin)
6    .use(markdownItSupPlugin);
7
8// or add them one by one

Some plugins admit options and may be loaded as outlined in the documentation of markdown-it:

1markdownRenderer
2    .use(somePlugin1)
3    .use(somePlugin2, opts);

Some plugins admit options and may be loaded as outlined in the documentation of markdown-it:

1markdownRenderer
2    .use(somePlugin1)
3    .use(somePlugin2, opts);

Default options can be loaded as follows:

1var opts = MarkdownItPlugins.getDefaults('pluginName');
2var plugin = MarkdownItPlugins.getPlugin('pluginName');
3
4markdownRenderer
5    .use(plugin, opts)

Here's an alternative way to load both:

1var thing = MarkdownItPlugins.get('pluginName');
2var opts = thing.defaultOptions;
3var plugin = thing.plugin;
4
5markdownRenderer
6    .use(plugin, opts)

The Plugins

markdown-it-abbr

• Original Source: npm
• Defaults: None
• Is Modified Package: No

1var markdownItAbbrPlugin = MarkdownItPlugins.getPlugin('markdown-it-abbr');
2markdownRenderer.use(markdownItAbbrPlugin);

The following

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification
is maintained by the W3C.

generates

1<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
2is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

markdown-it-attrs

Add classes, identifiers and attributes to your markdown with {.class #identifier attr=value attr2="spaced value"} curly brackets, similar to pandoc's header attributes.

• Original Source: npm
• Defaults: None
• Is Modified Package: No

1var markdownItAttrsPlugin = MarkdownItPlugins.getPlugin('markdown-it-attrs');
2markdownRenderer.use(markdownItAbbrPlugin);

Example input:

paragraph {data-toggle=modal}

Output:

1<p data-toggle="modal">paragraph</p>

Works with inline elements too:

paragraph *style me*{.red} more text

Output:

1<p>paragraph <em class="red">style me</em> more text</p>

Note: Plugin does not validate any input, so you should validate the attributes in your html output if security is a concern.

** Ambiguity**

When class can be applied to both inline or block element, inline element will take precedence:

- list item **bold**{.red}

Output:

1<ul>
2<li>list item <strong class="red">bold</strong></li>
3<ul>

If you need the class to apply to the list item instead:

- list item **bold**
{.red}

Output:

1<ul>
2<li class="red">list item <strong>bold</strong>
3</li>
4</ul>

If you need finer control, look into decorate.

markdown-it-sub

• Original Source: npm
• Defaults: None
• Is Modified Package: No

1var markdownItSubPlugin = MarkdownItPlugins.getPlugin('markdown-it-sub');
2markdownRenderer
3    .use(markdownItSubPlugin);
4
5markdownRenderer.render('H~2~0') // => '<p>H<sub>2</sub>O</p>'

markdown-it-sup

• Original Source: npm
• Defaults: None
• Is Modified Package: No

1var markdownItSupPlugin = MarkdownItPlugins.getPlugin('markdown-it-sup');
2markdownRenderer
3    .use(markdownItSupPlugin);
4
5markdownRenderer.render('29^th^') // => '<p>29<sup>th</sup></p>'

markdown-it-regexp

• Original Source: npm
• Defaults: None
• Is Modified Package: No. Modified version at markdown-it-regexp-enhanced

1var MarkdownItRegExp = MarkdownItPlugins.getPlugin('markdown-it-regexp-enhanced');
2markdownRenderer.use(MarkdownItRegExp(/@(\w+)/,
3    function(match, utils) {
4        var url = 'http://example.org/u/' + match[1];
5        return '<a href="' + utils.escape(url) + '">' + utils.escape(match[1]) + '</a>';
6    }
7));

Note that utils here only contains the escape method.

markdown-it-regexp-enhanced

• Original Source: See markdown-it-regexp
• Defaults: None
• Is Modified Package: Yes

1var MarkdownItRegExp = MarkdownItPlugins.getPlugin('markdown-it-regexp-enhanced');
2markdownRenderer.use(MarkdownItRegExp(/@(\w+)/,
3    function(match, utils) {
4        var url = 'http://example.org/u/' + match[1];
5        return '<a href="' + utils.escapeHTML(url) + '">' + utils.escapeHTML(match[1]) + '</a>';
6    }
7));

In this version, utils is populated with methods from string. For example,

1S('<a>foo</a>').between('<a>', '</a>').s // => 'foo'

can be achieved with utils

1utils.between('<a>foo</a>, '<a>', '</a>') // => 'foo'

mdvariables

• Original Source: npm
• Defaults: None
• Is Modified Package: No. Modified version at mdvariables-enhanced

1var MdVariables = MarkdownItPlugins.getPlugin('mdvariables');
2markdownRenderer.use(MdVariables(function() {
3    return {
4        title: $('title').val()
5    };
6});
7
8//In your mark up add "@title" to replicate what is in your title input. 

mdvariables-enhanced

• Original Source: See mdvariables
• Defaults: None
• Is Modified Package: Yes

1var MdVariablesEnhanced = MarkdownItPlugins.getPlugin('mdvariables-enhanced');

which takes a few arguments in the following order:

• dataFunction: a function that takes an argument (a key) and returns the replacement text
• regex: a regular expression with one or more match blocks (see example below)
• matchMapper: a maps the outcome of s.match(regex) for s to a key (arguments for ); defaults to match => match[1]

1markdownRenderer.use(
2    MdVariablesEnhanced(
3        function mdVariablesDataDirectory(name) {
4            switch(name) {
5                case 'title':
6                    return $('title').text();
7                    break;
8                case "random-number":
9                    return Math.random();
10                    break;
11                default:
12            }
13        },
14        /\[\[\[([a-zA-Z\-_0-9]+)\]\]\]/,  // defaults to /@(\w+)/ if nothing is
15                                          // passed in
16        match => match[1],                // which the argument defaults to if
17                                          // nothing is passed in
18    )
19);
20
21// In your mark up add "[[[title]]]" to replicate what is in your title input. 
22// In your mark up add "[[[random-number]]]" to generate a random number 
23
24markdownRenderer.use(
25    MdVariablesEnhanced(
26        function(name) {
27            var split = name.split('|').map(x => x.trim());
28            var tag = split[0];
29            var thing = split[1];
30            return "<" + tag + ">" + thing + "</" + tag + ">";
31        },
32        /\[\[\[([a-zA-Z\-_0-9]+)\|([a-zA-Z\-_0-9\s]+)\]\]\]/,
33        match => match[1].toLowerCase() + "|" + match[2]
34    )
35);
36
37// "[[[strong|something something]]]" => "<strong>something something</strong>"