markdown-it-implicit-figures-video
v0.10.1TypeScript
Render videos occurring by themselves in a paragraph as `<figure><video ...></figure>`, similar to pandoc's implicit figures for images.
0/weekUpdated 2 years agoMITUnpacked: 50.3 KB
Published by Eric Woodward
npm install markdown-it-implicit-figures-videomarkdown-it-implicit-figures-video
    
Render videos occurring by themselves in a paragraph as
Based on the excellent markdown-it-implicit-figures package by Arve Seljebu.
Example input:
``md
text before 
and it works with links:
`
Output (adjusted for easier reading):
`html
text before
title="My Awesome Video"
controls
class="html5-video-player"
>
Your browser does not support playing HTML5 video. You can
download the file instead. Here is a
description of the content: my video
and it works with links:
...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
`console`
$ npm install markdown-it-implicit-figures-video
Usage
`js
import mdi from "markdown-it";
import { html5Media } from "markdown-it-html5-media";
import { implicitFiguresVideo } from "markdown-it-implicit-figures-video";
...
const md = mdi().use(html5Media);
// default options below
md.use(implicitFiguresVideo, {
copyAttrs: false, //
dataType: false, //
figcaption: false, // adds
// true || 'description' =>
// 'title' =>
tabindex: false, //
});
const src = 'intro text \n\n!my cool video\n\nMore text';
const res = md.render(src);
console.log(res);
`
$3
- copyAttrs: Copy attributes matching (RegExp or string) copyAttrs to figure element.
- dataType: Set dataType to true to add the data-type attribute to tag
(resulting in ). 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
-block after the image. For example, !text renders to
`html`
- Set figcaption to title to put the title text in a after the image. For example, !text renders to
`html`
- tabindex: Set tabindex to true to add a tabindex property to eachtabindex="1"` and incrementing for each figure
figure, beginning at
encountered.
License
MIT © Eric Woodward