@peaceroad/markdown-it-figure-with-p-caption 0.3.2 → 0.4.1

package/README.md

@@ -10,6 +10,8 @@ For a paragraph with only one image, a table or code block or a blockquote, and
 
 The figcaption behavior of this plugin depends on [p7d-markdown-it-p-captions](https://www.npmjs.com/package/p7d-markdown-it-p-captions).
 
+Note. If code block language setting is "samp", change it to use samp element instead of code element.
+
 Use it as follows.
 
 ```js
@@ -27,10 +29,10 @@ console.log(md.render('Figure. A Cat.\n\n![Figure](cat.jpg)');
 
 Also, It is recommended to set the width and height attributes of the images at the same time. See: [@peaceroad/markdown-it-renderer-image](https://www.npmjs.com/package/@peaceroad/markdown-it-renderer-image).
 
-It could be applied to table, codeblock(pre > code, pre > samp), video, audio as well.
+It could be applied to table, codeblock(pre > code, pre > samp), video as well.
 
-Example:
 
+## Example
 
 ~~~
 [Markdown]
@@ -157,6 +159,43 @@ A paragraph.
 </samp></pre>
 </figure>
 <p>A paragraph.</p>
+
+
+[Markdown]
+A paragraph.
+
+Video. A mp4.
+
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+
+A paragraph.
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-video">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A mp4.</figcaption>
+<video controls width="400" height="300">
+<source src="example.mp4" type="video/mp4">
+</video>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Video. A youtube.
+
+<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">
+<figcaption><span class="f-video-label">Video<span class="f-video-label-joint">.</span></span> A youtube.</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>
 ~~~
 
 
@@ -222,3 +261,27 @@ A paragraph.
 </figure>
 <p>A paragraph.</p>
 ~~~
+
+## Option: Convert one image paragraph without caption
+
+Convert one image paragraph without a caption paragraph to figure element.
+
+```js
+md.use(mdFigureWithPCaption, {oneImageWithoutCaption: true});
+```
+
+~~~
+[Markdown]
+A paragraph.
+
+![Figure](cat.jpg)
+
+A paragraph.
+
+[HTML]
+<p>A paragraph.</p>
+<figure class="f-img">
+<img src="cat.jpg" alt="Figure">
+</figure>
+<p>A paragraph.</p>
+~~~

package/index.js

@@ -1,16 +1,16 @@
 'use strict';
 
-const { has } = require('markdown-it/lib/common/utils');
-
 module.exports = function figure_with_caption_plugin(md, option) {
 
   const mdPCaption = require('p7d-markdown-it-p-captions');
 
   let opt = {
     classPrefix: 'f',
+    hasNumClass: false,
     scaleSuffix: false,
     dquoteFilename: false,
     strongFilename: false,
+    oneImageWithoutCaption: false,
   };
   if (option !== undefined) {
     for (let o in option) {
@@ -251,7 +251,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
         tagName = 'img';
         nextToken.children[0].type = 'image';
         caption = checkCaption(state, n, en, tagName, caption);
-        if (caption.hasPrev || caption.hasNext) {
+        if (opt.oneImageWithoutCaption || caption.hasPrev || caption.hasNext) {
           range = wrapWithFigure(state, range, tagName, true);
         }
       }
@@ -279,6 +279,7 @@ module.exports = function figure_with_caption_plugin(md, option) {
     classPrefix: opt.classPrefix,
     dquoteFilename: opt.dquoteFilename,
     strongFilename: opt.strongFilename,
+    hasNumClass: opt.hasNumClass,
   });
   md.core.ruler.before('linkify', 'figure_with_caption', figureWithCaption);
   md.renderer.rules['fence_samp'] = function (tokens, idx, options, env, slf) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peaceroad/markdown-it-figure-with-p-caption",
-  "version": "0.3.2",
+  "version": "0.4.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",
   "scripts": {
@@ -16,6 +16,6 @@
     "markdown-it": "^12.1.0"
   },
   "dependencies": {
-    "p7d-markdown-it-p-captions": "^0.6.2"
+    "p7d-markdown-it-p-captions": "^0.7.0"
   }
 }

package/test/examples.txt

@@ -266,7 +266,6 @@ A paragraph.
 <p><img src="cat.jpg" alt="Figure"></p>
 
 
-
 [Markdown]
 Figure. A cat.
 
@@ -286,7 +285,7 @@ Figure 12. A cat.
 
 [HTML]
 <figure class="f-img">
-<figcaption><span class="f-img-label">Figure 12<span class="f-img-label-joint">.</span></span> A cat.</figcaption>
+<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>
 
@@ -449,3 +448,84 @@ A paragraph.
 </code></pre>
 </figure>
 <p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Code. "filename.js"
+
+```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">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>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+A paragraph.
+
+Code. **filename.js**
+
+```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">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>
+</figure>
+<p>A paragraph.</p>
+
+[Markdown]
+![Figure](cat.jpg)
+
+A paragraph.
+
+![Figure](cat.jpg)
+
+A paragraph.
+
+[HTML]
+<figure class="f-img">
+<img src="cat.jpg" alt="Figure">
+</figure>
+<p>A paragraph.</p>
+<figure class="f-img">
+<img src="cat.jpg" alt="Figure">
+</figure>
+<p>A paragraph.</p>
+
+
+[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/test.js

@@ -5,11 +5,15 @@ const md = require('markdown-it')({
 });
 const mdFigureWithPCaption = require('../index.js');
 
+
 md.use(mdFigureWithPCaption, {
   dquoteFilename: true,
   strongFilename: true,
+  oneImageWithoutCaption: true,
+  hasNumClass: true,
 });
 
+
 const example = __dirname + '/examples.txt';
 const mdPath = __dirname + '/examples.md';
 const exampleCont = fs.readFileSync(example, 'utf-8').trim();