Gallery image in markdown and character escape with gatsby

Hello everyone,
I’ve created a “gallery image” widget inside the markdown widget. This widget is a list of image widget following the bellow pattern
/\{\% include gallery.html array="(\S+)" layout="(.*)" margin="(.*)" position="(.*)" size="(.*)" \%\}/;

the array attribute contains a list of image url. Other attributes are for the image formatting but useless for the understanding of this topic.

I’m actually in trouble because my image url contains special markdown characters like underscore. When these special markdown char are in the image url it’s “breaking” rendering (markdownRemark htmlAST rendering) in gatsby as the underscore char is interpreted and replace with some “<em>” elements. I’ve tried to escape ‘_’ with backslash in the image url but looks like it’s not working…? the “<em>” elements are still in the response… :confused:

I’m looking for a quick fix to bypass this trouble. Actually I’m replacing the char manually from the image name … :frowning:
I’m looking for any better fix, that doesn’t request humain action ^^.

here is the widget code I’ve created for some more context (https://github.com/nicodaniel/mariedet-blog/blob/1fe5967fb4db2e82f7c4606a3f7e1b8db4db5e3f/src/cms/image-widget.js)

Hi @nicodaniel and welcome to the community :wave:

I think you’re looking for something like https://github.com/borgfriend/gatsby-remark-embed-video or https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks/ to process the custom markdown content.