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

package/README.md

@@ -114,7 +114,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> A Caption.</figcaption>
 <pre><code class="language-js">console.log('Hello World!');
 </code></pre>
@@ -156,7 +156,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-samp" role="doc-example">
+<figure class="f-pre-samp">
 <figcaption><span class="f-pre-samp-label">Terminal<span class="f-pre-samp-label-joint">.</span></span> A Caption.</figcaption>
 <pre><samp>$ pwd
 /home/user
@@ -329,7 +329,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong> Call a cat.</figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -358,7 +358,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong> Call a cat.</figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -464,7 +464,7 @@ A paragraph.
 </figure>
 ~~~
 
-## Option: imgAltCaption
+### Option: imgAltCaption
 
 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.
@@ -486,7 +486,7 @@ const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgAltCa
 </figure>
 ```
 
-## Option: imgTitleCaption
+### Option: imgTitleCaption
 
 The title attribute of the Markdown img element is used as the caption.
 Note that you cannot use this plugin's standard syntax and this option's syntax at the same time.
@@ -506,4 +506,12 @@ const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgTitle
 <figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
 <img src="cat.jpg" alt="A alt text.">
 </figure>
-```
+```
+
+### Option: roleDocExample
+
+From version 0.8, role="doc-example" is not included as standard in figure.f-pre-code and figure.f-pre-samp. If necessary, set `roleDocExample: true.`
+
+```js
+const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {roleDocExample: true})
+```

package/index.js

@@ -4,6 +4,7 @@ const mditFigureWithPCaption = (md, option) => {
 
   let opt = {
     classPrefix: 'f',
+    figureClassThatWrapsIframeTypeBlockquote: 'f-img',
     styleProcess : true,
     hasNumClass: false,
     scaleSuffix: false,
@@ -21,6 +22,7 @@ const mditFigureWithPCaption = (md, option) => {
     multipleImages: true,
     imgAltCaption: false,
     imgTitleCaption: false,
+    roleDocExample: false,
   };
   if (option !== undefined) {
     for (let o in option) {
@@ -147,13 +149,19 @@ const mditFigureWithPCaption = (md, option) => {
       figureStartToken.attrSet('class', 'f-video');
     }
     if (sp.isIframeTypeBlockQuote) {
-      if (sp.hasImgCaption) {
-        figureStartToken.attrSet('class', 'f-img');
+      let figureClassThatWrapsIframeTypeBlockquote = 'i-frame'
+      if (caption.prev || caption.next) {
+        if (caption.name === 'img') {
+          figureClassThatWrapsIframeTypeBlockquote = 'f-img'
+        }
+        figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
       } else {
-        figureStartToken.attrSet('class', 'f-iframe');
+        console.log('else::')
+        figureClassThatWrapsIframeTypeBlockquote = opt.figureClassThatWrapsIframeTypeBlockquote
+        figureStartToken.attrSet('class', figureClassThatWrapsIframeTypeBlockquote)
       }
     }
-    if(/pre-(?:code|samp)/.test(tagName)) {
+    if(/pre-(?:code|samp)/.test(tagName) && opt.roleDocExample) {
       figureStartToken.attrSet('role', 'doc-example');
     }
     const figureEndToken = new state.Token('figure_close', 'figure', -1);
@@ -252,7 +260,7 @@ const mditFigureWithPCaption = (md, option) => {
           if (token.tag === 'code' && token.block) {
             checkToken = true;
             let isSampInfo = false
-            if (token.info === 'samp' || token.info === 'shell' || token.info === 'console') {
+            if (/^ *(?:samp|shell|console)(?:(?= )|$)/.test(token.info)) {
               token.tag = 'samp';
               isSampInfo = true
             }
@@ -276,12 +284,11 @@ 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] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)?(\\n|$)'));
+          const hasTag = token.content.match(new RegExp('^<'+ tags[ctj] + ' ?[^>]*?>[\\s\\S]*?<\\/' + tags[ctj] + '>(\\n| *?)(<script [^>]*?>(?:<\\/script>)?)? *(\\n|$)'));
           if (!hasTag) {
             ctj++;
             continue;
           }
-          //console.log(hasTag)
           if ((hasTag[2] && hasTag[3] !== '\n') ||
             (hasTag[1] !== '\n' && hasTag[2] === undefined)) {
             token.content += '\n'
@@ -307,23 +314,27 @@ const mditFigureWithPCaption = (md, option) => {
         }
         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. */
+            if (state.tokens[n-2].children) {
+              if (state.tokens[n-2].children.length > 1) {
+                if (state.tokens[n-2].children[1].attrs) {
+                  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. */
+                    }
                   }
                 }
               }
             }
           }
           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;
+            if (state.tokens[n+2].children) {
+              if (state.tokens[n+2].children.length > 1) {
+                if (state.tokens[n+2].children[1].attrs) {
+                  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;
+                  }
                 }
               }
             }

package/package.json

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

package/test/examples-console.txt

@@ -92,3 +92,34 @@ $ pwd
 /home/User
 </samp></pre>
 
+
+[Markdown]
+端末 現在のディレクトリ
+
+```samp {.style}
+$ pwd
+/home/User
+```
+[HTML]
+<figure class="f-pre-samp">
+<figcaption><span class="f-pre-samp-label">端末</span> 現在のディレクトリ</figcaption>
+<pre><samp class="style">$ pwd
+/home/User
+</samp></pre>
+</figure>
+
+
+[Markdown]
+端末 現在のディレクトリ
+
+```console {.style}
+$ pwd
+/home/User
+```
+[HTML]
+<figure class="f-pre-samp">
+<figcaption><span class="f-pre-samp-label">端末</span> 現在のディレクトリ</figcaption>
+<pre><samp class="language-console style"><span class="hljs-meta prompt_">$ </span><span class="language-bash"><span class="hljs-built_in">pwd</span></span>
+/home/User
+</samp></pre>
+</figure>

package/test/examples-has-num-class.txt

@@ -23,7 +23,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label label-has-num">リスト1</span> キャプション</figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>

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

@@ -6,7 +6,7 @@ A paragraph. iframeTypeBlockquoteWithoutCaption: true.
 A paragraph.
 [HTML]
 <p>A paragraph. iframeTypeBlockquoteWithoutCaption: true.</p>
-<figure class="f-iframe">
+<figure class="f-img">
 <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>
@@ -15,12 +15,40 @@ A paragraph.
 [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">
+<figure class="f-img">
+<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]
+<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; 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-img">
+<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>
+<figure class="f-img">
 <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]
+<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; 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-img">
+<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>
+<!-- -->
+<figure class="f-img">
+<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]
@@ -34,7 +62,7 @@ A paragraph.
 <script async src="https://www.threads.net/embed.js"></script>
 
 [HTML]
-<figure class="f-iframe">
+<figure class="f-img">
 <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>
@@ -46,7 +74,7 @@ A paragraph.
 
 
 [HTML]
-<figure class="f-iframe">
+<figure class="f-img">
 <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>
@@ -56,7 +84,7 @@ A paragraph.
 <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">
+<figure class="f-img">
 <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

@@ -62,4 +62,3 @@ Slide. A caption.
 <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>
-

package/test/examples-no-option.txt

@@ -186,7 +186,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> A Caption.</figcaption>
 <pre><code class="language-js">console.log('Hello World!');
 </code></pre>
@@ -207,7 +207,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <pre><code class="language-js">console.log('Hello World!');
 </code></pre>
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> A Caption.</figcaption>
@@ -228,7 +228,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-samp" role="doc-example">
+<figure class="f-pre-samp">
 <figcaption><span class="f-pre-samp-label">Terminal<span class="f-pre-samp-label-joint">.</span></span> A Caption.</figcaption>
 <pre><samp>$ pwd
 /home/user
@@ -250,7 +250,7 @@ Terminal. A Caption.
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-samp" role="doc-example">
+<figure class="f-pre-samp">
 <pre><samp>$ pwd
 /home/user
 </samp></pre>
@@ -452,7 +452,7 @@ Source. Twitter Post.
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-iframe">
+<figure class="f-img">
 <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>
@@ -500,7 +500,7 @@ Quote. Twitter Post.
 A paragraph.
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-iframe">
+<figure class="f-img">
 <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>
@@ -533,7 +533,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong> Call a cat.</figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -553,7 +553,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong> Call a cat.</figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -573,7 +573,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong></figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -593,7 +593,7 @@ A paragraph.
 
 [HTML]
 <p>A paragraph.</p>
-<figure class="f-pre-code" role="doc-example">
+<figure class="f-pre-code">
 <figcaption><span class="f-pre-code-label">Code<span class="f-pre-code-label-joint">.</span></span> <strong class="f-pre-code-filename">filename.js</strong></figcaption>
 <pre><code class="language-js">console.log('Nyaan!');
 </code></pre>
@@ -662,3 +662,13 @@ Slide. A caption.
 </video>
 
 
+[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-img">
+<figcaption><span class="f-img-label">図</span> キャプション</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>
+

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

@@ -9,3 +9,44 @@
 </video>
 </figure>
 
+[Markdown]
+Video. A caption.
+
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+[HTML]
+<figure class="f-video">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A caption.</figcaption>
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+</figure>
+
+
+[Markdown]
+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 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>
+<p>A paragraph.</p>
+
+
+[Markdown]
+Video. A YouTube caption.
+
+<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]
+<figure class="f-video">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A YouTube caption.</figcaption>
+<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>