@peaceroad/markdown-it-figure-with-p-caption 0.6.1 → 0.7.0

package/README.md

@@ -4,21 +4,23 @@ This is a markdown-it plugin.
 
 For a paragraph with one image/images only, a table or code block or a blockquote or a iframe, 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, iframe.
+1. Check that the element: one image only paragraph, table, code(samp) block, blockquote, and video, iframe.
 2. Check if this element has a caption paragraph immediately before or after it
 3. If there is the caption paragraph, convert them to figure and figcaption element.
 
 The figcaption behavior of this plugin depends on [p7d-markdown-it-p-captions](https://www.npmjs.com/package/p7d-markdown-it-p-captions).
 
-Notice. If code block language setting is "samp", change it to use samp element instead of code element.
+**Notice.** Starting with version 0.7, the process changing from code to samp tag has been migrated to [@peaceroad/markdown-it-renderer-fence](https://www.npmjs.com/package/@peaceroad/markdown-it-renderer-fence). If you want to continue processing as before, please use this plugin at the same time.
+(The tests for this plugin and this Readme output used the plugins together.)
 
-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]
+**Notice.** You can also use `markdown-it-attrs` at the same time. However, if there is `{.style}` at the end of a paragraph with only an image, and the next paragraph is a caption, `markdown-it-attrs` alone does not handle it well, so this plugin takes care of that. (This processing is optional `{styleProcess: true}` and can be turned off.) [0.5.0]
 
 Use it as follows.
 
 ```js
 import mdit from 'markdown-it'
 import mditFigureWithPCaption from '@peaceroad/markdown-it-figure-with-p-caption'
+import mditRendererFence from '@peaceroad/markdown-it-renderer-fence' /* to processing code -> smap tag etc. process.*/
 
 const md = mdit()
 md.use(mditFigureWithPCaption)
@@ -467,7 +469,7 @@ A paragraph.
 In Markdown documents, captions are often written in the alt attribute of images. If you follow the syntax of this plugin, the commit log will be cluttered. Therefore, as an option, the alt attribute is treated as a caption.
 Note that you cannot use this plugin's syntax and this option's syntax at the same time.
 
-Also (for now), this is translated into an actual HTML alt attribute with the caption label as its value.
+The img alt attribute have an empty value.
 
 ```js
 const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgAltCaption: 'Figure'})
@@ -480,16 +482,16 @@ const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgAltCa
 [HTML]
 <figure class="f-img">
 <figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
-<img src="cat.jpg" alt="Figure">
+<img src="cat.jpg" alt="">
 </figure>
 ```
 
 ## Option: imgTitleCaption
 
 The title attribute of the Markdown img element is used as the caption.
-Note that you cannot use this plugin's syntax and this option's syntax at the same time.
+Note that you cannot use this plugin's standard syntax and this option's syntax at the same time.
 
-Also(for now), the alt attribute is not specially modified during conversion; the Markdown alt attribute is used as is.
+The img alt attribute is not specially modified during conversion; the Markdown alt attribute is used as is.
 
 ```js
 const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgTitleCaption: 'Figure'})

package/index.js

@@ -4,6 +4,7 @@ const mditFigureWithPCaption = (md, option) => {
 
   let opt = {
     classPrefix: 'f',
+    styleProcess : true,
     hasNumClass: false,
     scaleSuffix: false,
     dquoteFilename: false,
@@ -14,10 +15,10 @@ const mditFigureWithPCaption = (md, option) => {
     oneImageWithoutCaption: false,
     iframeWithoutCaption: false,
     videoWithoutCaption: false,
+    iframeTypeBlockquoteWithoutCaption: false,
     removeUnnumberedLabel: false,
     removeUnnumberedLabelExceptMarks: [],
     multipleImages: true,
-    styleProcess: true,
     imgAltCaption: false,
     imgTitleCaption: false,
   };
@@ -137,21 +138,19 @@ const mditFigureWithPCaption = (md, option) => {
     return true;
   }
 
-  function wrapWithFigure(state, range, tagName, replaceInsteadOfWrap, sp) {
+  const wrapWithFigure = (state, range, tagName, caption, replaceInsteadOfWrap, sp) => {
     let n = range.start;
     let en = range.end;
     const figureStartToken = new state.Token('figure_open', 'figure', 1);
     figureStartToken.attrSet('class', 'f-' + tagName);
-    if (sp) {
-      if (sp.isYoutube) {
-        figureStartToken.attrSet('class', 'f-video');
-      }
-      if (sp.isTwitter) {
-        if (sp.hasImgCaption) {
-          figureStartToken.attrSet('class', 'f-img');
-        } else {
+    if (sp.isVideoIframe) {
+      figureStartToken.attrSet('class', 'f-video');
+    }
+    if (sp.isIframeTypeBlockQuote) {
+      if (sp.hasImgCaption) {
+        figureStartToken.attrSet('class', 'f-img');
+      } else {
         figureStartToken.attrSet('class', 'f-iframe');
-        }
       }
     }
     if(/pre-(?:code|samp)/.test(tagName)) {
@@ -160,14 +159,12 @@ const mditFigureWithPCaption = (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]);
-        }
+    if (opt.styleProcess && caption.hasNext && sp.attrs.length > 0) {
+      for (let attr of sp.attrs) {
+        figureStartToken.attrJoin(attr[0], attr[1]);
       }
     }
-    ///Add for vsce
+   // For vsce
     if(state.tokens[n].attrs) {
       for (let attr of state.tokens[n].attrs) {
         figureStartToken.attrJoin(attr[0], attr[1]);
@@ -217,7 +214,12 @@ const mditFigureWithPCaption = (md, option) => {
         hasPrev: false,
         hasNext: false,
       };
-      let sp = {attrs: []};
+      const sp = {
+        attrs: [],
+        isVideoIframe: false,
+        isIframeTypeBlockQuote: false,
+        hasImgCaption: false,
+      }
 
       const checkTags = ['table', 'pre', 'blockquote'];
       let cti = 0;
@@ -240,7 +242,7 @@ const mditFigureWithPCaption = (md, option) => {
           range.end = en;
           caption = checkCaption(state, n, en, tagName, caption);
           if (caption.hasPrev || caption.hasNext) {
-            range = wrapWithFigure(state, range, tagName, false);
+            range = wrapWithFigure(state, range, tagName, caption, false, sp);
             break;
           }
           break;
@@ -249,14 +251,19 @@ const mditFigureWithPCaption = (md, option) => {
         if(token.type === 'fence') {
           if (token.tag === 'code' && token.block) {
             checkToken = true;
-            if (token.info === 'samp') {
-              token.type = 'fence_samp';
+            let isSampInfo = false
+            if (token.info === 'samp' || token.info === 'shell' || token.info === 'console') {
               token.tag = 'samp';
+              isSampInfo = true
+            }
+            if (isSampInfo) {
+              tagName = 'pre-samp';
+            } else {
+              tagName = 'pre-code';
             }
-            tagName = 'pre-' + token.tag;
             caption = checkCaption(state, n, en, tagName, caption);
             if (caption.hasPrev || caption.hasNext) {
-              range = wrapWithFigure(state, range, tagName, false);
+              range = wrapWithFigure(state, range, tagName, caption, false, sp);
               break;
             }
           }
@@ -269,64 +276,68 @@ const mditFigureWithPCaption = (md, option) => {
         const tags = ['video', 'audio', 'iframe', 'blockquote'];
         let ctj = 0;
         while (ctj < tags.length) {
-          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '> *?(?:<script [^>]*?>(?:</script>)?)?(\\n|$)'));
+          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)?(\\n|$)'));
           if (!hasTag) {
             ctj++;
             continue;
           }
-          if (hasTag[hasTag.length - 1] !== '\n') {
+          //console.log(hasTag)
+          if ((hasTag[2] && hasTag[3] !== '\n') ||
+            (hasTag[1] !== '\n' && hasTag[2] === undefined)) {
             token.content += '\n'
           }
           tagName = tags[ctj];
-          if (tagName === 'iframe') {
-            if(/^<[^>]*? src="https:\/\/(?:www.youtube-nocookie.com|player.vimeo.com)\//i.test(token.content)) {
-              sp.isYoutube = true;
+          checkToken = true;
+          if (tagName === 'blockquote') {
+            //text-post-media: threads
+            if(/^<[^>]*? class="(?:twitter-tweet|instagram-media|text-post-media|bluesky-embed)"/.test(token.content)) {
+              sp.isIframeTypeBlockQuote = true
+            } else {
+              ctj++;
+              continue;
             }
           }
-          if (tagName === 'blockquote') {
-            if(/^<[^>]*? class="twitter-tweet"/.test(token.content)) {
-              sp.isTwitter = true;
-              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') {
-                      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'
-                        } */
-                      }
-                    }
-                  }
-                }
-              }
-              if (n + 2 < state.tokens.length) {
-                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;
-                    }
+          break;
+        }
+        if (!checkToken) {n++; continue;}
+        if (tagName === 'iframe') {
+          if(/^<[^>]*? src="https:\/\/(?:www.youtube-nocookie.com|player.vimeo.com)\//i.test(token.content)) {
+            sp.isVideoIframe = true
+          }
+        }
+        if(sp.isIframeTypeBlockQuote) {
+          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') {
+                  if (state.tokens[n-2].children[1].attrs[0][1] === 'f-img-label') {
+                    sp.hasImgCaption = true;
+                    /* For now, I think I should use figure instead of blockquoe for caption. */
                   }
                 }
               }
             }
           }
-          checkToken = true;
-          caption = checkCaption(state, n, en, tagName, caption);
-          if (caption.hasPrev || caption.hasNext ||
-            (opt.iframeWithoutCaption && (tagName === 'iframe' || sp.isTwitter)) ||
-            (opt.videoWithoutCaption && tagName === 'video')) {
-            range = wrapWithFigure(state, range, tagName, false, sp);
-            if ((opt.videoWithoutCaption || opt.iframeWithoutCaption) && (!caption.hasPrev || !caption.hasNext)) {
-              n = en + 2;
+          if (n + 2 < state.tokens.length) {
+            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;
+                }
+              }
             }
-            break;
           }
-          ctj++
+        }
+        caption = checkCaption(state, n, en, tagName, caption);
+        if (caption.hasPrev || caption.hasNext) {
+          range = wrapWithFigure(state, range, tagName, caption, false, sp);
+          n = en + 2;
+        } else if ((opt.iframeWithoutCaption && (tagName === 'iframe')) ||
+          (opt.videoWithoutCaption && (tagName === 'video')) ||
+          (opt.iframeTypeBlockquoteWithoutCaption && (tagName === 'blockquote'))) {
+          range = wrapWithFigure(state, range, tagName, caption, false, sp);
+          n = en + 2;
         }
       }
 
@@ -417,11 +428,7 @@ const mditFigureWithPCaption = (md, option) => {
         }
         if (checkToken && (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext)) {
           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);
-          }
+          range = wrapWithFigure(state, range, tagName, caption, true, sp)
         }
       }
 
@@ -563,18 +570,6 @@ const mditFigureWithPCaption = (md, option) => {
     removeUnnumberedLabelExceptMarks: opt.removeUnnumberedLabelExceptMarks,
   })
   md.core.ruler.before('linkify', 'figure_with_caption', figureWithCaption);
-  md.renderer.rules['fence_samp'] = function (tokens, idx, options, env, slf) {
-    const token = tokens[idx];
-    let sampStartTag = '<samp>';
-    if (token.attrs) {
-      sampStartTag = sampStartTag.replace('>', '');
-      for(let attr of token.attrs) {
-        sampStartTag += ' ' + attr[0] + '="' + attr[1] + '"';
-      }
-      sampStartTag += '>';
-    }
-    return '<pre>' + sampStartTag + md.utils.escapeHtml(token.content) + '</samp></pre>\n';
-  };
-};
+}
 
 export default mditFigureWithPCaption

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.6.1",
+  "version": "0.7.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",
   "type": "module",
@@ -14,6 +14,8 @@
     "url": "https://github.com/peaceroad/p7d-markdown-it-figure-with-p-caption/issues"
   },
   "devDependencies": {
+    "@peaceroad/markdown-it-renderer-fence": "^0.1.0",
+    "highlight.js": "^11.9.0",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.1.6"
   },

package/test/examples-console.txt

@@ -0,0 +1,94 @@
+[Markdown]
+```js
+import mdit from 'markdonw-it'
+```
+[HTML]
+<pre><code class="language-js"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
+</code></pre>
+
+
+[Markdown]
+```html
+<p>I draw <span class="style">cats</span>.</p>
+```
+[HTML]
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I draw <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;style&quot;</span>&gt;</span>cats<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+</code></pre>
+
+
+[Markdown]
+```js
+import mdit from 'markdonw-it'
+const md = mdit()
+md.render('Nyaan')
+```
+[HTML]
+<pre><code class="language-js"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
+<span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()
+md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)
+</code></pre>
+
+
+[Markdown]
+```js {.style}
+import mdit from 'markdonw-it'
+const md = mdit()
+md.render('Nyaan')
+```
+[HTML]
+<pre><code class="language-js style"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span>
+<span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()
+md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)
+</code></pre>
+
+
+[Markdown]
+```html {start="2"}
+<p>I draw <span class="style">cats</span>.</p>
+```
+[HTML]
+<pre><code class="language-html" data-pre-start="2" style="counter-set:pre-line-number 2;"><span class="pre-line"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>I draw <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;style&quot;</span>&gt;</span>cats<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
+</code></pre>
+
+[Markdown]
+```js {start="1"}
+import mdit from 'markdonw-it'
+```
+[HTML]
+<pre><code class="language-js" data-pre-start="1" style="counter-set:pre-line-number 1;"><span class="pre-line"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span></span>
+</code></pre>
+
+
+[Markdown]
+```js {.style start="1"}
+import mdit from 'markdonw-it'
+const md = mdit()
+md.render('Nyaan')
+```
+[HTML]
+<pre><code class="language-js style" data-pre-start="1" style="counter-set:pre-line-number 1;"><span class="pre-line"><span class="hljs-keyword">import</span> mdit <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;markdonw-it&#x27;</span></span>
+<span class="pre-line"><span class="hljs-keyword">const</span> md = <span class="hljs-title function_">mdit</span>()</span>
+<span class="pre-line">md.<span class="hljs-title function_">render</span>(<span class="hljs-string">&#x27;Nyaan&#x27;</span>)</span>
+</code></pre>
+
+[Markdown]
+```shell
+$ pwd
+/home/User
+```
+[HTML]
+<pre><samp class="language-shell"><span class="hljs-meta prompt_">$ </span><span class="language-bash"><span class="hljs-built_in">pwd</span></span>
+/home/User
+</samp></pre>
+
+
+[Markdown]
+```samp
+$ pwd
+/home/User
+```
+[HTML]
+<pre><samp>$ pwd
+/home/User
+</samp></pre>
+

package/test/examples-iframe-type-blockquote-without-caption.txt

@@ -0,0 +1,64 @@
+[Markdown]
+A paragraph. iframeTypeBlockquoteWithoutCaption: 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. iframeTypeBlockquoteWithoutCaption: 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]
+<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>
+[HTML]
+<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>
+
+
+
+[Markdown]
+<iframe src="https://mstdn.social/User/xxxxxxxx/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://mstdn.social/embed.js" async="async"></script>
+[HTML]
+<figure class="f-iframe">
+<iframe src="https://mstdn.social/User/xxxxxxxx/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://mstdn.social/embed.js" async="async"></script>
+</figure>
+
+
+[Markdown]
+<blockquote class="text-post-media" data-text-post-permalink="https://www.threads.net/User/post/xxxxxxxxxx" data-text-post-version="0" id="xxxxxx" style=" background:#FFF; border-width: 1px; border-style: solid; border-color: #00000026; border-radius: 16px; max-width:540px; margin: 1px; min-width:270px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> <a href="https://www.threads.net/User/post/xxxxxxxxxxxxx" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%; font-family: -apple-system, BlinkMacSystemFont, sans-serif;" target="_blank"> <div style=" padding: 40px; display: flex; flex-direction: column; align-items: center;"><div style=" display:block; height:32px; width:32px; padding-bottom:20px;"> <svg aria-label="Threads" height="32px" role="img" viewBox="0 0 192 192" width="32px" xmlns="http://www.w3.org/2000/svg"> <path /></svg></div> <div style=" font-size: 15px; line-height: 21px; color: #999999; font-weight: 400; padding-bottom: 4px; "> 投稿者: xxxxx</div> <div style=" font-size: 15px; line-height: 21px; color: #000000; font-weight: 600; "> Threadsで見る</div></div></a></blockquote>
+<script async src="https://www.threads.net/embed.js"></script>
+
+[HTML]
+<figure class="f-iframe">
+<blockquote class="text-post-media" data-text-post-permalink="https://www.threads.net/User/post/xxxxxxxxxx" data-text-post-version="0" id="xxxxxx" style=" background:#FFF; border-width: 1px; border-style: solid; border-color: #00000026; border-radius: 16px; max-width:540px; margin: 1px; min-width:270px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"> <a href="https://www.threads.net/User/post/xxxxxxxxxxxxx" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%; font-family: -apple-system, BlinkMacSystemFont, sans-serif;" target="_blank"> <div style=" padding: 40px; display: flex; flex-direction: column; align-items: center;"><div style=" display:block; height:32px; width:32px; padding-bottom:20px;"> <svg aria-label="Threads" height="32px" role="img" viewBox="0 0 192 192" width="32px" xmlns="http://www.w3.org/2000/svg"> <path /></svg></div> <div style=" font-size: 15px; line-height: 21px; color: #999999; font-weight: 400; padding-bottom: 4px; "> 投稿者: xxxxx</div> <div style=" font-size: 15px; line-height: 21px; color: #000000; font-weight: 600; "> Threadsで見る</div></div></a></blockquote>
+<script async src="https://www.threads.net/embed.js"></script>
+</figure>
+
+
+[Markdown]
+<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/xxxxxxxxxxxxxxxxxxx" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/xxxxxxxxxxxxxxxxxxxxxxx" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><g><path></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/xxxxxxxxxxxxxx" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Ueserがシェアした投稿</a></p></div></blockquote>
+<script async src="//www.instagram.com/embed.js"></script>
+
+
+[HTML]
+<figure class="f-iframe">
+<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/xxxxxxxxxxxxxxxxxxx" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/xxxxxxxxxxxxxxxxxxxxxxx" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g><g><path></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;">この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/xxxxxxxxxxxxxx" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Ueserがシェアした投稿</a></p></div></blockquote>
+<script async src="//www.instagram.com/embed.js"></script>
+</figure>
+
+
+[Markdown]
+<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:xxxxxxxxxz/app.bsky.feed.post/xxxxxxxxxxxxxxxxxx" data-bluesky-cid="xxxxxxxxxxxxxxxxxxxxxxxxxx"><p lang="ja">.....<br><br><a href="https://bsky.app/profile/did:plc:xxxxxxxxxxx/post/xxxxxxxxxxxxxx?ref_src=embed">[image or embed]</a></p>&mdash; user (<a href="https://bsky.app/profile/did:plc:xxxxxxxxxx?ref_src=embed">user</a>) <a href="https://bsky.app/profile/did:plc:xxxxxxxxxxxx/post/xxxxxxxxxxxx?ref_src=embed">Jun 7, 2024 at 9:49</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+
+[HTML]
+<figure class="f-iframe">
+<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:xxxxxxxxxz/app.bsky.feed.post/xxxxxxxxxxxxxxxxxx" data-bluesky-cid="xxxxxxxxxxxxxxxxxxxxxxxxxx"><p lang="ja">.....<br><br><a href="https://bsky.app/profile/did:plc:xxxxxxxxxxx/post/xxxxxxxxxxxxxx?ref_src=embed">[image or embed]</a></p>&mdash; user (<a href="https://bsky.app/profile/did:plc:xxxxxxxxxx?ref_src=embed">user</a>) <a href="https://bsky.app/profile/did:plc:xxxxxxxxxxxx/post/xxxxxxxxxxxx?ref_src=embed">Jun 7, 2024 at 9:49</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
+</figure>
+
+
+

package/test/examples-iframe-without-caption.txt

@@ -1,11 +1,11 @@
 [Markdown]
-A paragraph.
+A YouTube 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>
 
 A paragraph.
 [HTML]
-<p>A paragraph.</p>
+<p>A YouTube paragraph.</p>
 <figure class="f-video">
 <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>
@@ -53,7 +53,8 @@ Slide. A caption.
 [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>
+<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>
@@ -62,25 +63,3 @@ Slide. A caption.
 <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]
-<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>
-[HTML]
-<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>
-
-

package/test/examples-no-option.txt

@@ -611,6 +611,16 @@ Figure. A Caption.
 <img src="cat.jpg" alt="Figure">
 </figure>
 
+[Markdown]
+Figure. A Caption.
+
+![Figure](cat.jpg) {.style #id}
+[HTML]
+<figure class="f-img style" id="id">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Caption.</figcaption>
+<img src="cat.jpg" alt="Figure">
+</figure>
+
 
 [Markdown]
 ![Figure](cat.jpg) {.style}
@@ -631,7 +641,6 @@ Figure. A Caption.
 <p class="style"><img src="cat.jpg" alt="Figure"> Text</p>
 
 
-
 [Markdown]
 Slide. A caption.
 

package/test/test.js

@@ -2,9 +2,11 @@ import assert from 'assert'
 import fs from 'fs'
 import path from 'path'
 import mdit from 'markdown-it'
+import mditAttrs from 'markdown-it-attrs'
+import mditRndererFence from '@peaceroad/markdown-it-renderer-fence'
 
 import mdFigureWithPCaption from '../index.js'
-import attrs from 'markdown-it-attrs'
+import highlightjs from 'highlight.js'
 
 let opt = {
   dquoteFilename: true,
@@ -13,26 +15,44 @@ let opt = {
   iframeWithoutCaption: false,
   videoWithoutCaption: false,
   hasNumClass: false,
+  iframeTypeBlockquoteWithoutCaption: false,
 }
 
-const md = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs);
+const md = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 opt.hasNumClass = true
-const mdHasNumClass = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs);
+const mdHasNumClass = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 opt.hasNumClass = false
 opt.oneImageWithoutCaption = true
-const mdOneImage = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs);
+const mdOneImage = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 opt.iframeWithoutCaption = true
 opt.hasNumClass = false
-const mdIframeWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs);
+const mdIframeWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+
+opt.iframeTypeBlockquoteWithoutCaption = true
+const mdIframeTypeBlockquoteWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 opt.multipleImages =  true
-const mdMultipleImages = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs)
+const mdMultipleImages = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 opt.videoWithoutCaption = true
-const mdVideoWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(attrs)
+const mdVideoWithoutCaption = mdit({ html: true }).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
+
+const mdConsole = mdit({
+  html: true,
+  langPrefix: 'language-',
+  typographer: false,
+  highlight: (str, lang) => {
+    if (lang && highlightjs.getLanguage(lang)) {
+      try {
+        return highlightjs.highlight(str, { language: lang }).value
+      } catch (__) {}
+    }
+    return ''
+  }
+}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 
 
 let __dirname = path.dirname(new URL(import.meta.url).pathname)
@@ -47,11 +67,13 @@ const testData = {
   hasNumClass: __dirname + path.sep +  'examples-has-num-class.txt',
   oneImageWithoutCaption: __dirname + path.sep + 'examples-one-image-without-caption.txt',
   iframeWithoutCaption: __dirname + path.sep + 'examples-iframe-without-caption.txt',
+  iframeTypeBlockquoteWithoutCaption: __dirname + path.sep + 'examples-iframe-type-blockquote-without-caption.txt',
   multipleImages: __dirname + path.sep + 'examples-multiple-images.txt',
   videoWithoutCaption: __dirname + path.sep + 'examples-video-without-caption.txt',
   mdAllOption: __dirname + path.sep + 'examples-all-option.txt',
   imgAltCaption: __dirname + path.sep + 'examples-img-alt-caption.txt',
   imgTitleCaption: __dirname + path.sep + 'examples-img-title-caption.txt',
+  console: __dirname + path.sep + 'examples-console.txt',
 }
 
 const getTestData = (pat) => {
@@ -133,26 +155,28 @@ pass = runTest(md, testData.noOption, pass)
 pass = runTest(mdHasNumClass, testData.hasNumClass, pass)
 pass = runTest(mdOneImage, testData.oneImageWithoutCaption, pass)
 pass = runTest(mdIframeWithoutCaption, testData.iframeWithoutCaption, pass)
+pass = runTest(mdIframeTypeBlockquoteWithoutCaption, testData.iframeTypeBlockquoteWithoutCaption, pass)
 pass = runTest(mdMultipleImages, testData.multipleImages, pass)
 pass = runTest(mdVideoWithoutCaption, testData.videoWithoutCaption, pass)
+pass = runTest(mdConsole, testData.console, pass)
 
 
 opt.oneImageWithoutCaption = false
 
 opt.imgAltCaption = 'Figure'
-const mdImgAltCaption = mdit({html: true}).use(mdFigureWithPCaption, opt).use(attrs)
+const mdImgAltCaption = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 pass = runTest(mdImgAltCaption, testData.imgAltCaption, pass, [1, 5])
 opt.imgAltCaption = '図'
-const mdImgAltCaptionJa = mdit({html: true}).use(mdFigureWithPCaption, opt).use(attrs)
+const mdImgAltCaptionJa = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 pass = runTest(mdImgAltCaptionJa, testData.imgAltCaption, pass, [6 , 99])
 
 opt.imgAltCaption = false
 
 opt.imgTitleCaption = 'Figure'
-const mdImgTitleCaption = mdit({html: true}).use(mdFigureWithPCaption, opt).use(attrs)
+const mdImgTitleCaption = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 pass = runTest(mdImgTitleCaption, testData.imgTitleCaption, pass, [1, 6])
 opt.imgTitleCaption = '図'
-const mdImgTitleCaptionJa = mdit({html: true}).use(mdFigureWithPCaption, opt).use(attrs)
+const mdImgTitleCaptionJa = mdit({html: true}).use(mdFigureWithPCaption, opt).use(mditAttrs).use(mditRndererFence);
 pass = runTest(mdImgTitleCaptionJa, testData.imgTitleCaption, pass, [7, 99])
 
 if (pass) console.log('Passed all test.')