markdown-it-implicit-figures-video

Render videos occurring by themselves in a paragraph as <figure><video ...></figure>, similar to pandoc's implicit figures for images.

Based on the excellent markdown-it-implicit-figures package by Arve Seljebu.

Example input:

1text before ![](video.mp4)
2
3![my video](my_video.mp4 "My Awesome Video")
4
5and it works with links:
6
7[![](fig.png)](page.html)

Output (adjusted for easier reading):

1<p>
2	text before
3	<video src="video.mp4" controls class="html5-video-player">
4		Your browser does not support playing HTML5 video. You can
5		<a href="video.mp4" download>download the file</a> instead.
6	</video>
7</p>
8
9<figure>
10	<video
11		src="my_video.mp4"
12		title="My Awesome Video"
13		controls
14		class="html5-video-player"
15	>
16		Your browser does not support playing HTML5 video. You can
17		<a href="my_video.mp4" download>download the file</a> instead. Here is a
18		description of the content: my video
19	</video>
20</figure>
21
22<p>and it works with links:</p>
23
24<figure>
25	<a href="page.html">
26		<video src="another_video.mp4" controls class="html5-video-player">
27			Your browser does not support playing HTML5 video. You can
28			<a href="another_video.mp4" download>download the file</a> instead.
29		</video>
30	</a>
31</figure>

...and the tests to prove it!

Requirements

• The markdown-it-html5-media plugin, which must be used before markdown-it-implicit-figures-video (see usage, below).

Install

1$ npm install markdown-it-implicit-figures-video

Usage

1import mdi from "markdown-it";
2import { html5Media } from "markdown-it-html5-media";
3import { implicitFiguresVideo } from "markdown-it-implicit-figures-video";
4
5...
6
7const md = mdi().use(html5Media);
8
9// default options below
10md.use(implicitFiguresVideo, {
11    copyAttrs: false, // <figure {...videoAttrs}>
12    dataType: false, // <figure data-type="video">
13    figcaption: false, // adds <figcaption>, possible values
14      // true || 'description' => <figcaption>description text</figcaption>
15      // 'title' => <figcaption>title text</figcaption>
16    tabindex: false, // <figure tabindex="1+n">...
17});
18
19const src = 'intro text ![](video.mp4)\n\n![my cool video](my_video.mp4 "This Video Rocks!")\n\nMore text';
20const res = md.render(src);
21
22console.log(res);

Options

• copyAttrs: Copy attributes matching (RegExp or string) copyAttrs to figure element.

• dataType: Set dataType to true to add the data-type attribute to <figure> tag (resulting in <figure data-type="video">). This can be useful for applying special styling for different kind of figures.

• figcaption: Can be set to either a boolean or string value.

  • Set figcaption to true or description to put the description text in a <figcaption>-block after the image. For example, ![text](img.png) renders to

  1<figure>
  2	<img src="img.png" alt="" />
  3	<figcaption>text</figcaption>
  4</figure>

  • Set figcaption to title to put the title text in a <figcaption> after the image. For example, ![text](img.png "title") renders to

  1<figure>
  2	<img src="img.png" alt="text" />
  3	<figcaption>title</figcaption>
  4</figure>

• tabindex: Set tabindex to true to add a tabindex property to each figure, beginning at tabindex="1" and incrementing for each figure encountered.

License

MIT © Eric Woodward