remark-generic-extensions
remark-generic-extensions copied to clipboard
Compatibility with Gatsby MDX
I've been unsuccessful so far to integrate this plugin with Gatsby's MDX plugin. Anyone have any advice or working example?
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.tld",
},
plugins: [
{
resolve: "gatsby-source-filesystem",
options: {
name: "pages",
path: "./src/pages/",
},
__key: "pages",
},
{
resolve: "gatsby-plugin-mdx",
options: {
extensions: [ `.md`, `.mdx` ],
gatsbyRemarkPlugins: [
{
resolve: 'remark-generic-extensions',
options: {
elements: {
alert: {
html: {
tagName: "span",
children: [
{
type: "element",
tagName: "i",
properties: {
className: "fa fa-exclamation",
ariaHidden: true
}
},
{
type: "element",
tagName: "span",
children: [
{
type: "text",
value: "::content::"
}
]
},
{
type: "element",
tagName: "span",
properties: {
className: "subtext"
},
children: [
{
type: "text",
value: "::argument::"
}
]
}
]
}
}
},
youtube: {
html: {
tagName: "div",
children: [
{
type: "element",
tagName: "iframe",
properties: {
width: 420,
height: 315,
src: "https://www.youtube.com/embed/::argument::"
}
},
{
tagName: "span",
properties: {
className: "::prop::spanClassName::"
},
children: [
{
type: "text",
value: "::content::"
}
]
}
]
}
}
}
}
],
},
},
],
}
Error I'm getting is
Invalid options provided: <...dump of my options config...>