@peaceroad/markdown-it-figure-with-p-caption 0.4.5 → 0.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 This is a markdown-it plugin.
 
-For a paragraph with only one image, a table or code block or a blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.
+For a paragraph with one image/images only, a table or code block or a blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.
 
 1. Check that the element: one image only paragraph, table, code block, samp block, blockquote, and video.
 2. Check if this element has a caption paragraph immediately before or after it
@@ -10,7 +10,9 @@ For a paragraph with only one image, a table or code block or a blockquote, and
 
 The figcaption behavior of this plugin depends on [p7d-markdown-it-p-captions](https://www.npmjs.com/package/p7d-markdown-it-p-captions).
 
-Note. If code block language setting is "samp", change it to use samp element instead of code element.
+Notice. If code block language setting is "samp", change it to use samp element instead of code element.
+
+Notice. It assumes simultaneous use of `markdown-it-attrs`. However, if there is `{.style}` at the end of the image-only paragraph, and the next paragraph is a caption, processing is not handled well with `markdown-it-attrs` alone, so in order to normalize it, {} The processing is written in this plugin. (This process can be turned off by specifying `{styleProcess: false}`.) [0.5.0]
 
 Use it as follows.
 
@@ -96,7 +98,6 @@ A paragraph.
 <p>A paragraph.</p>
 
 
-
 [Markdown]
 A paragraph.
 
@@ -121,7 +122,7 @@ A paragraph.
 [Markdown]
 A paragraph.
 
-Quote. A Caption.
+Source. A Caption.
 
 > A quoted paragraph.
 
@@ -130,7 +131,7 @@ A paragraph.
 [HTML]
 <p>A paragraph.</p>
 <figure class="f-blockquote">
-<figcaption><span class="f-blockquote-label">Code<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
+<figcaption><span class="f-blockquote-label">Source<span class="f-blockquote-label-joint">.</span></span> A Caption.</figcaption>
 <blockquote>
 <p>A quoted paragraph.</p>
 </blockquote>
@@ -219,40 +220,85 @@ A paragraph.
 [Markdown]
 A paragraph.
 
-Quote. Twitter Post.
+Figure. Twitter Post.
 
-<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; UserName (@account) <a href="https://twitter.com/account/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-blockquote">
-<figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Twitter Post.</figcaption>
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </figure>
 <p>A paragraph.</p>
 
+~~~
 
+Note: External embedding supports Youtube and Twitter. Twitter embedding uses blockquote instead of iframe. Therefore, the caption identifier should use "Quote", but "Figure" is also acceptable.
+
+
+From version 0.5.0, it supports cases where a paragraph contains only multiple images. Instead of `f-img` as the figure class name, use the following class name. (This class name is unstable, but I probably won't change it.) 
+
+- `f-img-horizontal` if the image is written in one line on Markdown
+- `f-img-vertical` if images are written only vertically, one per line
+- `f-img-multiple` in other cases
+
+Notice. This process can be turned off by specifying `{multipleImages: false}`.
+
+```
 [Markdown]
-A paragraph.
+A paragraph. multipleImages: true. horizontal images only.
 
-Figure. Twitter Post.
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
 
-<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; UserName (@account) <a href="https://twitter.com/account/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+Figure. Cats.
 
 A paragraph.
 [HTML]
+<p>A paragraph. multipleImages: true.  horizontal images only</p>
+<figure class="f-img-horizontal">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
 <p>A paragraph.</p>
-<figure class="f-img">
-<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Twitter Post.</figcaption>
-<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+[Markdown]
+A paragraph. multipleImages: true. vertical images only.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) 
+     ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true. vertical images only.</p>
+<figure class="f-img-vertical">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat">
+<img src="cat2.jpg" alt="Two cat">
 </figure>
 <p>A paragraph.</p>
 
-~~~
+[Markdown]
+A paragraph. multipleImages: true.
 
-Note: External embedding supports Youtube and Twitter. Twitter embedding uses blockquote instead of iframe. Therefore, the caption identifier should use "Quote", but "Figure" is also acceptable.
+Figure. Cats.
 
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+```
 
 ## Option: Specify file name
 
@@ -345,13 +391,20 @@ A paragraph.
 
 #### Convert one iframe without caption
 
-Convert one iframe without a caption paragraph to figure element.
+Convert one iframe without a caption paragraph to iframe element. (adn twitter blockquote embed eelment.)
 
 ```js
 md.use(mdFigureWithPCaption, {iframeWithoutCaption: true});
 ```
 
 ~~~
+[Markdown]
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+[HTML]
+<figure class="f-iframe">
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+</figure>
+
 [Markdown]
 A paragraph.
 
@@ -364,4 +417,38 @@ A paragraph.
 <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </figure>
 <p>A paragraph.</p>
+
+[Markdown]
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+[HTML]
+<figure class="f-video">
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+</figure>
+
+[Markdown]
+A paragraph. iframeWithoutCaption: true.
+
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+A paragraph.
+[HTML]
+<p>A paragraph. iframeWithoutCaption: true.</p>
+<figure class="f-iframe">
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+[HTML]
+<figure class="f-iframe">
+<iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
+</figure>
+
+[Markdown]
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+[HTML]
+<figure class="f-iframe">
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+</figure>
 ~~~

package/index.js

@@ -16,6 +16,8 @@ module.exports = function figure_with_caption_plugin(md, option) {
     oneImageWithoutCaption: false,
     iframeWithoutCaption: false,
     removeUnnumberedLabel: false,
+    multipleImages: true,
+    styleProcess: true,
   };
   if (option !== undefined) {
     for (let o in option) {
@@ -127,8 +129,12 @@ module.exports = function figure_with_caption_plugin(md, option) {
     const figureStartToken = new state.Token('figure_open', 'figure', 1);
     figureStartToken.attrSet('class', 'f-' + tagName);
     if (sp) {
-      if (sp.isTwitterBlock && sp.hasImgCaption) {
-        figureStartToken.attrSet('class', 'f-img');
+      if (sp.isTwitterBlock) {
+        if (sp.hasImgCaption) {
+          figureStartToken.attrSet('class', 'f-img');
+        } else {
+        figureStartToken.attrSet('class', 'f-iframe');
+        }
       }
     }
     if(/pre-(?:code|samp)/.test(tagName)) {
@@ -137,6 +143,13 @@ module.exports = function figure_with_caption_plugin(md, option) {
     const figureEndToken = new state.Token('figure_close', 'figure', -1);
     const breakToken = new state.Token('text', '', 0);
     breakToken.content = '\n';
+    if (sp) {
+      if (sp.attrs) {
+        for (let attr of sp.attrs) {
+          figureStartToken.attrJoin(attr[0], attr[1]);
+        }
+      }
+    }
     ///Add for vsce
     if(state.tokens[n].attrs) {
       for (let attr of state.tokens[n].attrs) {
@@ -182,9 +195,11 @@ module.exports = function figure_with_caption_plugin(md, option) {
       let tagName = '';
       let caption = {
         name: '',
+        nameSuffix: '',
         hasPrev: false,
         hasNext: false,
       };
+      let sp = {attrs: []};
 
       const checkTags = ['table', 'pre', 'blockquote'];
       let cti = 0;
@@ -235,7 +250,6 @@ module.exports = function figure_with_caption_plugin(md, option) {
       if (token.type === 'html_block') {
         const tags = ['video', 'audio', 'iframe', 'blockquote'];
         let ctj = 0;
-        let sp = {};
         while (ctj < tags.length) {
           const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '> *?(?:<script [^>]*?>(?:</script>)?)?(\\n|$)'));
           if (!hasTag) {
@@ -247,11 +261,9 @@ module.exports = function figure_with_caption_plugin(md, option) {
           }
           tagName = tags[ctj];
           if (tagName === 'iframe') {
-            if(/^<[^>]*? title="YouTube video player"/i.test(token.content)) {
+            if(/^<[^>]*? src="https:\/\/(?:www.youtube-nocookie.com|player.vimeo.com)\//i.test(token.content)) {
               tagName = 'video'; // figure.f-video used.
             }
-            // Non Youtube iframe currently use figure.f-iframe.
-            // Class in caption uses actual caption identifier.
           }
           if (tagName === 'blockquote') {
             if(/^<[^>]*? class="twitter-tweet"/.test(token.content)) {
@@ -259,9 +271,16 @@ module.exports = function figure_with_caption_plugin(md, option) {
               if (n > 2) {
                 if (state.tokens[n-2].children.length > 1) {
                   if (state.tokens[n-2].children[1].attrs.length > 0) {
-                    if (state.tokens[n-2].children[1].attrs[0][0] === 'class' &&
-                      state.tokens[n-2].children[1].attrs[0][1] === 'f-img-label') {
-                      sp.hasImgCaption = true;
+                    if (state.tokens[n-2].children[1].attrs[0][0] === 'class') {
+                      if (state.tokens[n-2].children[1].attrs[0][1] === 'f-img-label') {
+                        sp.hasImgCaption = true;
+                      /* under consideration. I think I should use figure instead of blockquoe for caption.
+                      } else {
+                        if (state.tokens[n-2].children[1].attrs[0][1] === 'f-blockquote-label') {
+                          state.tokens[n-2].children[1].attrs[0][1] = 'f-iframe-label'
+                          state.tokens[n-2].children[3].attrs[0][1] = 'f-iframe-label-joint'
+                        } */
+                      }
                     }
                   }
                 }
@@ -292,13 +311,77 @@ module.exports = function figure_with_caption_plugin(md, option) {
       }
 
 
-      if (token.type === 'paragraph_open' && nextToken.type === 'inline' && nextToken.children[0].type === 'image' && state.tokens[n+2].type === 'paragraph_close' && nextToken.children.length < 3) {
-        if (nextToken.children.length === 2) {
-          if (!nextToken.children[nextToken.children.length - 1].type === 'text' || !/^ *?\{.*?\}$/.test(nextToken.children[nextToken.children.length - 1].content)) {
-            n++; continue;
+      if (token.type === 'paragraph_open' && nextToken.type === 'inline' && nextToken.children[0].type === 'image') {
+        let ntChildTokenIndex = 1
+        let imageNum = 1
+        let isMultipleImagesHorizontal = true
+        let isMultipleImagesVertical = true
+        checkToken = true
+        while (ntChildTokenIndex < nextToken.children.length) {
+          const ntChildToken = nextToken.children[ntChildTokenIndex]
+          if (ntChildTokenIndex === nextToken.children.length - 1) {
+             let imageAttrs = ntChildToken.content.match(/^ *\{(.*?)\} *$/)
+            if(ntChildToken.type === 'text' && imageAttrs) {
+              imageAttrs = imageAttrs[1].split(/ +/)
+              let iai = 0
+              while (iai < imageAttrs.length) {
+                if (/^\./.test(imageAttrs[iai])) {
+                  imageAttrs[iai] = imageAttrs[iai].replace(/^\./, "class=")
+                }
+                if (/^#/.test(imageAttrs[iai])) {
+                  imageAttrs[iai] = imageAttrs[iai].replace(/^\#/, "id=")
+                }
+                let imageAttr = imageAttrs[iai].match(/^(.*?)="?(.*)"?$/)
+                if (!imageAttr || !imageAttr[1]) {
+                  iai++
+                  continue
+                }
+                sp.attrs.push([imageAttr[1], imageAttr[2]])
+                iai++
+              }
+              break
+            }
+          }
+
+          if (!opt.multipleImages) {
+            checkToken = false
+            break
+          }
+          if (ntChildToken.type === 'image') {
+            imageNum += 1
+          } else if (ntChildToken.type === 'text' && /^ *$/.test(ntChildToken.content)) {
+            isMultipleImagesVertical = false
+            if (isMultipleImagesVertical) {
+              isMultipleImagesHorizontal = false
+            }
+          } else if (ntChildToken.type === 'softbreak') {
+            isMultipleImagesHorizontal = false
+            if (isMultipleImagesHorizontal) {
+              isMultipleImagesVertical = false
+            }
+          } else {
+            checkToken = false
+            break
+          }
+          ntChildTokenIndex++
+        }
+        if (checkToken && imageNum > 1 && opt.multipleImages) {
+          if (isMultipleImagesHorizontal) {
+            caption.nameSuffix = '-horizontal'
+          } else if (isMultipleImagesVertical) {
+            caption.nameSuffix = '-vertical'
+          } else {
+            caption.nameSuffix = '-multiple'
+          }
+          ntChildTokenIndex = 0
+          while (ntChildTokenIndex < nextToken.children.length) {
+            const ccToken = nextToken.children[ntChildTokenIndex]
+            if (ccToken.type === 'text' && /^ *$/.test(ccToken.content)) {
+              ccToken.content = ''
+            }
+            ntChildTokenIndex++
           }
         }
-        checkToken = true;
         en = n + 2;
         range.end = en;
         tagName = 'img';
@@ -308,7 +391,12 @@ module.exports = function figure_with_caption_plugin(md, option) {
           if (state.tokens[n-1].type === 'list_item_open') {checkToken = false;}
         }
         if (checkToken && (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext)) {
-          range = wrapWithFigure(state, range, tagName, true);
+          if (caption.nameSuffix) tagName += caption.nameSuffix
+          if (caption.hasNext && opt.styleProcess) {
+            range = wrapWithFigure(state, range, tagName, true, sp);
+          } else {
+            range = wrapWithFigure(state, range, tagName, true);
+          }
         }
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "A markdown-it plugin. For a paragraph with only one image, a table or code block or blockquote, and by writing a caption paragraph immediately before or after, they are converted into the figure element with the figcaption element.",
   "main": "index.js",
   "scripts": {
@@ -17,6 +17,6 @@
     "markdown-it-attrs": "^4.1.4"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.9.0"
+    "p7d-markdown-it-p-captions": "^0.9.1"
   }
 }

package/test/examples.txt

@@ -456,15 +456,15 @@ A paragraph.
 [Markdown]
 A paragraph.
 
-Quote. Twitter Post.
+Source. Twitter Post.
 
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-blockquote">
-<figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
+<figure class="f-iframe">
+<figcaption><span class="f-blockquote-label">Source<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </figure>
 <p>A paragraph.</p>
@@ -511,7 +511,7 @@ Quote. Twitter Post.
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-blockquote">
+<figure class="f-iframe">
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 <figcaption><span class="f-blockquote-label">Quote<span class="f-blockquote-label-joint">.</span></span> Twitter Post.</figcaption>
 </figure>
@@ -519,13 +519,13 @@ A paragraph.
 
 
 [Markdown]
-A paragraph.
+A paragraph. 28.
 
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
 A paragraph.
 [HTML]
-<p>A paragraph.</p>
+<p>A paragraph. 28.</p>
 <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 <p>A paragraph.</p>
 
@@ -676,6 +676,17 @@ Figure. A Caption.
 <img src="cat.jpg" alt="Figure">
 </figure>
 
+
+[Markdown]
+![Figure](cat.jpg) {.style}
+
+Figure. A Caption.
+[HTML]
+<figure class="f-img style">
+<img src="cat.jpg" alt="Figure">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Caption.</figcaption>
+</figure>
+
 [Markdown]
 Figure. A Caption.
 
@@ -712,3 +723,178 @@ A paragraph.
 <figure class="f-iframe">
 <iframe src="https://example.com/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://exapmle.com/embed.js" async="async"></script>
 </figure>
+
+[Markdown]
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+[HTML]
+<figure class="f-iframe">
+<iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/xxxxxxxxxxxxxx" title="xxxxxxxxxxx" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
+</figure>
+
+[Markdown]
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+<p><a href="https://vimeo.com/xxxx">Title</a> from <a href="https://vimeo.com/yyy">User</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
+[HTML]
+<figure class="f-video">
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+<p><a href="https://vimeo.com/xxxx">Title</a> from <a href="https://vimeo.com/yyy">User</a> on <a href="https://vimeo.com">Vimeo</a>.</p></figure>
+
+[Markdown]
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+[HTML]
+<figure class="f-video">
+<iframe src="https://player.vimeo.com/video/xxxxxxxxxxxxxxx" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
+</figure>
+
+[Markdown]
+A paragraph. iframeWithoutCaption: true.
+
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+A paragraph.
+[HTML]
+<p>A paragraph. iframeWithoutCaption: true.</p>
+<figure class="f-iframe">
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">XXXXX <a href="https://t.co/XXXXX">https://t.co/XXXXX</a></p>&mdash; User (@twitter) <a href="https://twitter.com/UserID/status/XXXXX">August 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+
+Figure. Cats.
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg)![Two cat](cat2.jpg)![Three cat](cat3.jpg) {.style}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-horizontal style">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat"><img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) 
+     ![Two cat](cat2.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-vertical">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat">
+<img src="cat2.jpg" alt="Two cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+Figure. Cats.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg) {.style}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat">
+</figure>
+<p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)![Four cat](cat4.jpg) {.style #id}
+
+Figure. Cats.
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style" id="id">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat"><img src="cat4.jpg" alt="Four cat">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> Cats.</figcaption>
+</figure>
+<p>A paragraph.</p>
+
+
+
+[Markdown]
+A paragraph. multipleImages: true.
+
+![One cat](cat1.jpg) ![Two cat](cat2.jpg)
+![Three cat](cat3.jpg)![Four cat](cat4.jpg) {.style #id}
+
+A paragraph.
+[HTML]
+<p>A paragraph. multipleImages: true.</p>
+<figure class="f-img-multiple style" id="id">
+<img src="cat1.jpg" alt="One cat"><img src="cat2.jpg" alt="Two cat">
+<img src="cat3.jpg" alt="Three cat"><img src="cat4.jpg" alt="Four cat">
+</figure>
+<p>A paragraph.</p>

package/test/test.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const md = require('markdown-it')({ html: true });
 const mdOneImage = require('markdown-it')({ html: true });
 const mdWithoutCaption = require('markdown-it')({ html: true });
+const mdMultipleImages = require('markdown-it')({ html: true });
 
 const mdFigureWithPCaption = require('../index.js');
 
@@ -30,6 +31,15 @@ mdWithoutCaption.use(mdFigureWithPCaption, {
   hasNumClass: true,
 }).use(attrs);
 
+mdMultipleImages.use(attrs).use(mdFigureWithPCaption, {
+  dquoteFilename: true,
+  strongFilename: true,
+  oneImageWithoutCaption: true,
+  iframeWithoutCaption: true,
+  hasNumClass: true,
+  multipleImages: true,
+})
+
 const example = __dirname + '/examples.txt';
 const mdPath = __dirname + '/examples.md';
 const exampleCont = fs.readFileSync(example, 'utf-8').trim();
@@ -56,13 +66,15 @@ while(n < ms0.length) {
 
 n = 1;
 while(n < ms.length) {
-  //if (n !== 22) { n++; continue };
+  //if (n !== 37) { n++; continue };
   console.log('Test: ' + n + ' >>>');
   //console.log(ms[n].markdown);
 
   const m = ms[n].markdown;
   let h = ''
-  if (n > 37) {
+  if (n > 44) {
+    h = mdMultipleImages.render(m);
+  } else if (n > 37) {
     h = mdWithoutCaption.render(m);
   } else if (n > 20) {
     h = mdOneImage.render(m);