markdown-it-gallery
v0.1.6
Published
A markdown-it plugin for wrapping a sequence of images with a custom block element
Downloads
20
Readme
markdown-it-gallery
A markdown-it plugin for wrapping a sequence of images with a custom block element.
Usage
Options
galleryClass: String
galleryTag: String
Default:figure
imgClass: String
wrapImagesInLinks: Boolean
Default:false
linkClass: String
linkTarget: String
Link target attributeimgTokenType: String
Default:image
linkTokenType: String
Default:link
imageFilterFn: function(token) { ... } => Boolean
token argument is a Token instanceimageSrcFn: function(token) { ... } => String
token argument is a Token instancelinkHrefFn: function(token) { ... } => String
token argument is a Token instance
Example
const Md = require('markdown-it');
const galleryPlugin = require('markdown-it-gallery');
const md = Md().use(galleryPlugin, {
galleryClass: 'md-gallery',
galleryTag: 'figure',
imgClass: 'md-gallery__image',
wrapImagesInLinks: true,
linkClass: 'md-gallery__link',
linkTarget: '_blank',
imgTokenType: 'image',
linkTokenType: 'link',
imageFilterFn: token => /example.com/.test(token.attrGet('src')),
imageSrcFn: token => token.attrGet('src').replace(/(\.\w+$)/, '-320x320$1'),
linkHrefFn: token => token.attrGet('src').replace(/(\.\w+$)/, '-1920x1920$1'),
});
/**
* @param {string} markdown
* @returns {string} HTML
*/
function render(markdown) {
return md.render(markdown);
}
Input markdown:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Aliquam elit felis, varius non ligula et, vestibulum pulvinar libero.


Cras ut rutrum est, sodales porta orci.  Quisque aliquet ipsum sit amet lacus consequat varius.

Proin pretium tortor in turpis tristique, in pharetra ipsum maximus.
Output HTML:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure class="md-gallery">
<a href="http://example.com/image-1-1920x1920.jpg" class="md-gallery__link" target="_blank">
<img src="http://example.com/image-1-320x320.jpg" alt="Gallery Image 1" class="md-gallery__image">
</a>
<a href="http://example.com/image-2-1920x1920.jpg" class="md-gallery__link" target="_blank">
<img src="http://example.com/image-2-320x320.jpg" alt="Gallery Image 2" class="md-gallery__image">
</a>
</figure>
<p>Aliquam elit felis, varius non ligula et, vestibulum pulvinar libero.</p>
<figure class="md-gallery">
<a href="http://example.com/image-3-1920x1920.jpg" class="md-gallery__link" target="_blank">
<img src="http://example.com/image-3-320x320.jpg" alt="Gallery Image 3" class="md-gallery__image">
</a>
</figure>
<p>
<img src="http://example.net/image-4.jpg" alt="Filtered Image 3">
</p>
<p>
Cras ut rutrum est, sodales porta orci. <img src="http://example.com/inline-image-1.jpg" alt="Inline image 1"> Quisque aliquet ipsum sit amet lacus consequat varius.
</p>
<p>
<img src="http://example.com/inline-image-2.jpg" alt="Inline image 2">
Proin pretium tortor in turpis tristique, in pharetra ipsum maximus.
</p>