markdown-it-responsive

    0.1.0 • Public • Published

    markdown-it-responsive

    Build Status NPM version Coverage Status

    A markdown-it plugin for responsive images. 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-responsive'), options);  // <-- this use(package_name) is required

    How to specify options?

    The notation to specify responsive sizes is as follows.

    var option = { responsive: {
        'srcset': {
          'header-*': [ {
            width: 320,
            rename: {
              suffix: '-small'
            }
          }, {
            width: 640,
            rename: {
              suffix: '-medium'
            }
          } ]
        },
        'sizes': {
          'header-*': '(min-width: 36em) 33.3vw, 100vw'
        }
      }
    };

    Example

    With the options above, a markdown

    ![test](header-test.png)

    is rendered as

    <p><img src="header-test.png" srcset="header-test-small.png 320w, header-test-medium.png 640w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="test"></p>

    Install

    npm i markdown-it-responsive

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • tatsy