markdown-it-imsize

A markdown-it plugin for size-specified image markups. This plugin overloads original image renderer of markdown-it.

Usage

Enable plugin

1var md = require('markdown-it')({
2  html: true,
3  linkify: true,
4  typography: true
5}).use(require('markdown-it-imsize')); // <-- this use(package_name) is required

Example

1![test](image.png =100x200)

is interpreted as

1<p><img src="image.png" alt="test" width="100" height="200"></p>

Options

Auto fill

1var md = require('markdown-it')({
2  html: true,
3  linkify: true,
4  typography: true
5}).use(require('markdown-it-imsize'), { autofill: true });

will fill the width and height fields automatically if the specified image path is valid.

Therefore,

1![test](image.png)

is interpreted as

1<p><img src="image.png" alt="test" width="200" height="200"></p>

where image.png is a valid path and its size is 200 x 200.

Use with RequireJS

markdown-it-imsize is available with bower and RequireJS. First, you can install the package with,

1bower install markdown-it-imsize

Script for using markdown-it-imsize with RequireJS is like,

1require(['require', 'MarkdownIt', 'MarkdownItImsize'], function(require) {
2  var md = require('MarkdownIt')({
3    html: true,
4    linkify: true,
5    typography: true
6  }).use(require('MarkdownItImsize'));
7
8  var rendered = md.render("![test](test.jpg =100x)");
9  document.getElementById('image-box').innerHTML = rendered;
10});