remark-oembed
v1.2.2
Converts URLs surrounded by newlines into embeds that are loaded asynchronously
0/weekUpdated 3 years agoUnpacked: 12.6 MB
Published by ramitos
npm install remark-oembedremark-oembed
Converts URLs surrounded by newlines into embeds that are loaded asynchronously.
_For the most part, this code is taken directly from agentofuser/remark-oembed 🙏_
installation
``bash`
yarn add remark-oembed
usage
Say we have the following markdown:
`markdown
This is a youtube video:
https://www.youtube.com/watch?v=aoLhACqJCUg
This is a photo:
https://www.flickr.com/photos/pedrocaetano/27432477888
This another photo:
http://www.23hq.com/mprove/photo/66422006
Check it out 👆
`
And our script looks as follows:
`javascript
const remark = require('remark');
remark()
.use(require('remark-oembed'))
.use(require('remark-html'))
.process(src, (err, file) => console.log(String(file)));
`
Now, running it yields:
` This is a youtube video: This is a photo: This another photo: Check it out 👆html`
class="remark-oembed-anchor"
data-oembed
rel="noopener noreferrer nofollow"
target="_blank"
>
data-src="http://www.23hq.com/9484736/66422006_0e82f5775b3b15207f50f5af5a625652_large.jpg"
title="Hamburg. Uhlenhorst. Das Fährhaus (33)"
width="756"
height="495"
class="remark-oembed-photo"
data-oembed
/>
> Take a look at how it would look before executing the script, and the unchanged HTML output.
$3
If you don't want to load the widget asynchronously and just default to how it would work in any other plugin, you can use syncWidget.
`javascript`
remark()
.use(require('remark-oembed'), { syncWidget: true })
.use(require('remark-html'))
.process(src, (err, file) => console.log(String(file)));
`html`
As you can see above, it doesn't generate a preview neither a to the source. Also, it doesn't try to replace the and the with the .
> Take a look at how it would look before executing the script, and the unchanged HTML output.
$3
Not only with thumbnails, but also with oembed's type === 'photo', you can make pictures also load asyncronously by setting asyncImg. This is accomplishing by generating an empty base64 src with the same size as the original image:
`javascript`
remark()
.use(require('remark-oembed'), { asyncImg: true })
.use(require('remark-html'))
.process(src, (err, file) => console.log(String(file)));
` This is a youtube video: This is a photo: This another photo: Check it out 👆html`
class="remark-oembed-anchor"
data-oembed
rel="noopener noreferrer nofollow"
target="_blank"
>
data-src="http://www.23hq.com/9484736/66422006_0e82f5775b3b15207f50f5af5a625652_large.jpg"
title="Hamburg. Uhlenhorst. Das Fährhaus (33)"
width="756"
height="495"
class="remark-oembed-photo"
data-oembed
/>
> Take a look at how it would look before executing the script, and the unchanged HTML output.
$3
To use with @mdx-js/mdx, set jsx as true.
`javascript
const mdx = require('@mdx-js/mdx');
await mdx(src, {
remarkPlugins: [[require('remark-oembed'), { jsx: true }],
});
``
license
BSD-3-Clause