JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9717
  • Score
    100M100P100Q134445F
  • License MIT

Markdown-it plugin to specify image size

Package Exports

  • markdown-it-imsize
  • markdown-it-imsize/dist/markdown-it-imsize.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markdown-it-imsize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

markdown-it-imsize

Build Status NPM version Coverage Status Dependency Status devDependency Status

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

Usage

Enable plugin

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

Example

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

is interpreted as

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

Options

Auto fill

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

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

Therefore,

![test](image.png)

is interpreted as

<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,

bower install markdown-it-imsize

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

require(['require', 'MarkdownIt', 'MarkdownItImsize'], function(require) {
  var md = require('MarkdownIt')({
    html: true,
    linkify: true,
    typography: true
  }).use(require('MarkdownItImsize'));

  var rendered = md.render("![test](test.jpg =100x)");
  document.getElementById('image-box').innerHTML = rendered;
});