https://github.com/timlrx/remark-webembed
Remark plugin to embed web content using markdown directives
https://github.com/timlrx/remark-webembed
embed markdown mdx remark remark-plugin
Last synced: 3 months ago
JSON representation
Remark plugin to embed web content using markdown directives
- Host: GitHub
- URL: https://github.com/timlrx/remark-webembed
- Owner: timlrx
- License: mit
- Created: 2023-10-23T15:02:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-24T03:47:58.000Z (over 1 year ago)
- Last Synced: 2024-10-04T19:44:24.216Z (9 months ago)
- Topics: embed, markdown, mdx, remark, remark-plugin
- Language: JavaScript
- Homepage: https://remark-webembed.netlify.app
- Size: 151 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Remark Webembed
[remark](https://github.com/wooorm/remark) plugin to embed web content using [markdown directives](https://github.com/remarkjs/remark-directive).
Out of the box support for [oembed](https://oembed.com/) and custom providers. Automatically wraps the iframe into a responsive container.
Can be used on the server or in the browser (though certain oembed API providers block cross-origin requests).
## Installation
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
```js
npm install remark-webembed
```
## Usage
```js
import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import remarkDirective from 'remark-directive'
import rehypeStringify from 'rehype-stringify'
import remarkWebembed from 'remark-Webembed'
unified()
.use(remarkParse)
.use(remarkDirective)
.use(remarkWebembed, options)
.use(remarkRehype)
.use(rehypeStringify)
.process(markdown)
```
## Sample web embed
Input:
```md
::embed[https://www.youtube.com/watch?v=32I0Qso4sDg]
```
HTML Output:
```html
```
## API
`remark().use(remarkWebembed, [options])`
### options
#### options.queryParams
Type: `object`.
Query parameters passed to the oembed API. If `maxWidth` or `maxHeight` is specified, it will be applied to the iframe container as well.
Check the oembed provider's documentation for supported query parameters.