@peaceroad/markdown-it-figure-with-p-caption 0.5.3 → 0.6.0

package/README.md

@@ -17,12 +17,13 @@ Notice. It assumes simultaneous use of `markdown-it-attrs`. However, if there is
 Use it as follows.
 
 ```js
-const md = require('markdown-it')();
-const mdFigureWithPCaption = require('@peaceroad/markdown-it-figure-with-p-caption');
+import mdit from 'markdown-it'
+import mditFigureWithPCaption from '@peaceroad/markdown-it-figure-with-p-caption'
 
-md.use(mdFigureWithPCaption);
+const md = mdit()
+md.use(mditFigureWithPCaption)
 
-console.log(md.render('Figure. A Cat.\n\n![Figure](cat.jpg)');
+console.log(md.render('Figure. A Cat.\n\n![Figure](cat.jpg)'))
 // <figure class="f-img">
 // <figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A Cat.</figcaption>
 // <img src="cat.jpg" alt="Figure">
@@ -309,7 +310,7 @@ Note that a space is required between the file name and caption.
 
 ```js
 
-md.use(mdFigureWithPCaption, {dquoteFilename: true});
+md.use(mditFigureWithPCaption, {dquoteFilename: true});
 ```
 
 ~~~
@@ -337,7 +338,7 @@ A paragraph.
 ### Use strong mark
 
 ```js
-md.use(mdFigureWithPCaption, {strongFilename: true});
+md.use(mditFigureWithPCaption, {strongFilename: true});
 ```
 
 ~~~
@@ -370,7 +371,7 @@ A paragraph.
 Convert one image paragraph without a caption paragraph to figure element.
 
 ```js
-md.use(mdFigureWithPCaption, {oneImageWithoutCaption: true});
+md.use(mditFigureWithPCaption, {oneImageWithoutCaption: true});
 ```
 
 ~~~
@@ -394,7 +395,7 @@ A paragraph.
 Convert one video element without a caption paragraph to figure element.
 
 ```js
-md.use(mdFigureWithPCaption, {videoWithoutCaption: true});
+md.use(mditFigureWithPCaption, {videoWithoutCaption: true});
 ```
 
 #### Convert one iframe without caption
@@ -402,7 +403,7 @@ md.use(mdFigureWithPCaption, {videoWithoutCaption: true});
 Convert one iframe without a caption paragraph to iframe element. (adn twitter blockquote embed eelment.)
 
 ```js
-md.use(mdFigureWithPCaption, {iframeWithoutCaption: true});
+md.use(mditFigureWithPCaption, {iframeWithoutCaption: true});
 ```
 
 ~~~
@@ -460,3 +461,47 @@ A paragraph.
 <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>
 ~~~
+
+## 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.
+
+Also (for now), this is translated into an actual HTML alt attribute with the caption label as its value.
+
+```js
+const mdImgAltCaption = mdit({html: true}).use(mditFigureWithPCaption, {imgAltCaption: 'Figure'})
+```
+
+```
+[Markdown]
+![Figure. A caption.](cat.jpg)
+
+[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">
+</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.
+
+Also(for now), the 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'})
+```
+
+```
+[Markdown]
+![A alt text.](cat.jpg "Figure. A caption.")
+
+[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="A alt text.">
+</figure>
+```

package/index.js

@@ -1,8 +1,6 @@
-'use strict';
+import mditPCaption from 'p7d-markdown-it-p-captions'
 
-module.exports = function figure_with_caption_plugin(md, option) {
-
-  const mdPCaption = require('p7d-markdown-it-p-captions');
+const mditFigureWithPCaption = (md, option) => {
 
   let opt = {
     classPrefix: 'f',
@@ -20,6 +18,8 @@ module.exports = function figure_with_caption_plugin(md, option) {
     removeUnnumberedLabelExceptMarks: [],
     multipleImages: true,
     styleProcess: true,
+    imgAltCaption: false,
+    imgTitleCaption: false,
   };
   if (option !== undefined) {
     for (let o in option) {
@@ -70,7 +70,6 @@ module.exports = function figure_with_caption_plugin(md, option) {
 
     captionEndToken.type = 'figcaption_close';
     captionEndToken.tag = 'figcaption';
-
     state.tokens.splice(n + 2, 0, captionStartToken, captionInlineToken, captionEndToken);
     state.tokens.splice(n-3, 3);
     return true;
@@ -179,6 +178,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
   }
 
   function checkCaption(state, n, en, tagName, caption) {
+
     caption = checkPrevCaption(state, n, en, tagName, caption);
     if (caption.hasPrev) return caption;
     caption = checkNextCaption(state, n, en, tagName, caption);
@@ -393,7 +393,12 @@ module.exports = function figure_with_caption_plugin(md, option) {
         range.end = en;
         tagName = 'img';
         nextToken.children[0].type = 'image';
-        caption = checkCaption(state, n, en, tagName, caption);
+
+        if (opt.imgAltCaption) setAltToLabel(state, n, en, tagName, caption, opt)
+        if (opt.imgTitleCaption) setTitleToLabel(state, n, en, tagName, caption, opt)
+
+        caption = checkCaption(state, n, en, tagName, caption, opt);
+
         if (opt.oneImageWithoutCaption && state.tokens[n-1]) {
           if (state.tokens[n-1].type === 'list_item_open') {checkToken = false;}
         }
@@ -426,7 +431,103 @@ module.exports = function figure_with_caption_plugin(md, option) {
     return;
   }
 
-  md.use(mdPCaption, {
+  const setAltToLabel = (state, n, en, tagName, caption, opt) => {
+    if (n < 2) return false
+    if (state.tokens[n+1].children[0].type === 'image') {
+      if (state.tokens[n-2].children[2]) {
+        state.tokens[n+1].content = state.tokens[n+1].content.replace(/^!\[.*?\]/, '![' + state.tokens[n-2].children[2].content + ']')
+        if (!state.tokens[n+1].children[0].children[0]) {
+          const textToken  = new state.Token('text', '', 0)
+          state.tokens[n+1].children[0].children.push(textToken)
+        }
+        state.tokens[n+1].children[0].content = state.tokens[n-2].children[2].content
+        state.tokens[n+1].children[0].children[0].content = state.tokens[n-2].children[2].content
+      }
+    }
+    //console.log(state.tokens[n+1].children[0])
+    return true
+  }
+
+  const setTitleToLabel = (state, n, en, tagName, caption, opt) => {
+    if (n < 2) return false
+    if (state.tokens[n+1].children[0].type === 'image') {
+      if (state.tokens[n-2].children[0]) {
+        state.tokens[n+1].children[0].attrSet('alt', state.tokens[n+1].children[0].content)
+        if (!state.tokens[n+1].children[0].children[0]) {
+          const textToken  = new state.Token('text', '', 0)
+          state.tokens[n+1].children[0].children.push(textToken)
+        }
+        let i = 0
+        while (0 < state.tokens[n+1].children[0].attrs.length) {
+          if (state.tokens[n+1].children[0].attrs[i][0] === 'title') {
+            state.tokens[n+1].children[0].attrs.splice(i, i + 1)
+            break
+          } else {
+            state.tokens[n+1].children[0].attrJoin('title', '')
+          }
+          i++
+        }
+      }
+    }
+    //console.log(state.tokens[n+1].children[0])
+    return true
+  }
+
+  const imgAttrToPCaption = (state, startLine) => {
+    let pos = state.bMarks[startLine] + state.tShift[startLine]
+    let max = state.eMarks[startLine]
+    let inline = state.src.slice(pos, max)
+    let label = ''
+    if (opt.imgAltCaption && typeof opt.imgAltCaption === 'string') label = opt.imgAltCaption
+    if (opt.imgTitleCaption && typeof opt.imgTitleCaption === 'string') label = opt.imgTitleCaption
+    let caption = ''
+
+    const img = inline.match(/^( *!\[)(.*?)\]\( *?((.*?)(?: +?\"(.*?)\")?) *?\)( *?\{.*?\})? *$/)
+    if (!img) return
+
+    let hasLabel
+    if (opt.imgAltCaption) {
+      caption = img[2]
+      hasLabel = img[2].match(new RegExp('^' + opt.imgAltCaption))
+    }
+    if (opt.imgTitleCaption) {
+      if (!img[5]) img[5] = ''
+      caption = img[5]
+      hasLabel = img[5].match(new RegExp('^' + opt.imgTitleCaption))
+    }
+    let token
+    token = state.push('paragraph_open', 'p', 1)
+    token.map = [startLine, startLine + 1]
+    token = state.push('inline', '', 0)
+
+    if (hasLabel) {
+      token.content = caption
+    } else {
+      if (label) {
+        token.content = label
+        if (/[a-zA-Z]/.test(label)) {
+          token.content += '.'
+          if (caption) token.content += ' '
+        } else {
+          token.content += '　'
+        }
+        token.content += caption
+      } else {
+        token.content = caption
+      }
+    }
+    //console.log('token.content: ' + token.content)
+    token.map = [startLine, startLine + 1]
+    token.children = []
+    token = state.push('paragraph_close', 'p', -1)
+    return
+  }
+
+
+  if (opt.imgAltCaption || opt.imgTitleCaption) {
+    md.block.ruler.before('paragraph', 'img_attr_caption', imgAttrToPCaption)
+  }
+  md.use(mditPCaption, {
     classPrefix: opt.classPrefix,
     dquoteFilename: opt.dquoteFilename,
     strongFilename: opt.strongFilename,
@@ -436,7 +537,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
     jointSpaceUseHalfWidth: opt.jointSpaceUseHalfWidth,
     removeUnnumberedLabel: opt.removeUnnumberedLabel,
     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];
@@ -451,3 +552,5 @@ module.exports = function figure_with_caption_plugin(md, option) {
     return '<pre>' + sampStartTag + md.utils.escapeHtml(token.content) + '</samp></pre>\n';
   };
 };
+
+export default mditFigureWithPCaption

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.5.3",
+  "version": "0.6.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",
   "scripts": {
     "test": "node test/test.js"
   },
@@ -17,6 +18,6 @@
     "markdown-it-attrs": "^4.1.6"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.12.0"
+    "p7d-markdown-it-p-captions": "^0.13.0"
   }
 }

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

@@ -0,0 +1,31 @@
+[Markdown]
+Figure 12. A cat.
+
+![Figure](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label label-has-num">Figure 12<span class="f-img-label-joint">.</span></span> A cat.</figcaption>
+<img src="cat.jpg" alt="Figure">
+</figure>
+
+
+[Markdown]
+A paragraph.
+
+リスト1 キャプション
+
+```js
+console.log('Nyaan!');
+```
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-pre-code" role="doc-example">
+<figcaption><span class="f-pre-code-label label-has-num">リスト1</span> キャプション</figcaption>
+<pre><code class="language-js">console.log('Nyaan!');
+</code></pre>
+</figure>
+<p>A paragraph.</p>

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

@@ -0,0 +1,86 @@
+[Markdown]
+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>
+
+A paragraph.
+[HTML]
+<p>A 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]
+<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>
+[HTML]
+<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>
+
+[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>
+
+
+
+[Markdown]
+Slide. A caption.
+
+<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">
+<figcaption><span class="f-slide-label">Slide<span class="f-slide-label-joint">.</span></span> A caption.</figcaption>
+<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]
+<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-img-alt-caption.txt

@@ -0,0 +1,76 @@
+[Markdown]
+![A caption.](cat.jpg)
+
+[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">
+</figure>
+
+
+[Markdown]
+![Figure. A caption.](cat.jpg)
+
+[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">
+</figure>
+
+
+[Markdown]
+![](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="Figure">
+</figure>
+
+
+[Markdown]
+Figure. A caption.
+
+![](cat.jpg)
+
+[HTML]
+<p class="f-img"><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A caption.</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="Figure">
+</figure>
+
+
+[Markdown]
+![Figure 12. A caption.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 12<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="Figure 12">
+</figure>
+
+
+[Markdown]
+![図1　キャプション](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">図1<span class="f-img-label-joint">　</span></span>キャプション</figcaption>
+<img src="cat.jpg" alt="図1">
+</figure>
+
+
+[Markdown]
+図 キャプション
+
+![図1　キャプション](cat.jpg)
+
+[HTML]
+<p class="f-img"><span class="f-img-label">図</span> キャプション</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">図1<span class="f-img-label-joint">　</span></span>キャプション</figcaption>
+<img src="cat.jpg" alt="図1">
+</figure>
+
+

package/test/examples-img-title-caption.txt

@@ -0,0 +1,92 @@
+[Markdown]
+![](cat.jpg "A caption.")
+
+[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>
+
+
+[Markdown]
+![](cat.jpg "Figure. A caption.")
+
+[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>
+
+
+[Markdown]
+![A alt text.](cat.jpg)
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="A alt text.">
+</figure>
+
+[Markdown]
+![A alt text.](cat.jpg "Figure.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="A alt text.">
+</figure>
+
+
+[Markdown]
+Figure. A caption.
+
+![](cat.jpg)
+
+[HTML]
+<p class="f-img"><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span> A caption.</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure<span class="f-img-label-joint">.</span></span></figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![](cat.jpg "Figure 12. A caption.")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">Figure 12<span class="f-img-label-joint">.</span></span> A caption.</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+![猫](cat.jpg "図1　キャプション")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">図1<span class="f-img-label-joint">　</span></span>キャプション</figcaption>
+<img src="cat.jpg" alt="猫">
+</figure>
+
+[Markdown]
+![](cat.jpg "図 キャプション")
+
+[HTML]
+<figure class="f-img">
+<figcaption><span class="f-img-label">図</span> キャプション</figcaption>
+<img src="cat.jpg" alt="">
+</figure>
+
+
+[Markdown]
+図 キャプション
+
+![猫](cat.jpg "図23 Caption")
+
+[HTML]
+<p class="f-img"><span class="f-img-label">図</span> キャプション</p>
+<figure class="f-img">
+<figcaption><span class="f-img-label">図23</span> Caption</figcaption>
+<img src="cat.jpg" alt="猫">
+</figure>