Community Plugin
View plugin on GitHubgatsby-remark-github-snack
Compatible with Gatsby v5.x.x
. It’s not tested with previous versions
$ npm install gatsby-remark-github-snack
Features
Converts remote videos hosted on GitHub (or elsewhere)
It automatically converts remote videos hosted on GitHub from your markdown files, or other type of remote URLs pointing to videos ending on mp4
or mov
, into HTML videos
For instance:
https://user-images.githubusercontent.com/example_video.mov
// Gets transformed into ↓
<video width="400" controls style="margin-bottom: 16px">
<source src="https://user-images.githubusercontent.com/example_video.mov" type="video/mp4">
</video>
Replaces remote snack URLs with an embedded playground in your websites.
https://snack.expo.dev/@rgommezz/layoutanimation => Any apperance of a link like this in your markdown gets replaced with the playground shown in the screenshot below
Usage with Mdx
In your gatsby-config
file:
const config = {
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
"gatsby-remark-github-snack",
// Other remark plugins here
],
},
},
// Other Gatsby plugins here
],
};
Usage without Mdx
const config = {
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
"gatsby-remark-github-snack",
// Other remark plugins here
],
},
},
// Other Gatsby plugins here
],
};