CODEWITHSUNDEEP
javascripthtmlmarkdown
whiterook6
whiterook6

Reputation: 3534

Can I allow inline images in markdown files when using remark-rehype?

We server markdown files as documentation for using our SDK and one of our websites uses remark and rehype to process and display them inline in the browser as html:

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype, {
    allowDangerousHtml: true,
  })
  .use(rehypeHighlight, {
    ignoreMissing: true,
    languages: {
      gradle,
      java,
      kotlin,
      xml,
    },
    subset: ["kotlin", "java", "gradle", "xml"],
  })
  .use(rehypeReact, {
    createElement: React.createElement,
  });

The markdown documentation contains some inlined images that need to be displayed in the html:

##Consent Notice

The below consent notice should be shown to:

* All new users of your app
* All existing and returning users who have not seen the consent request before

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAA2ADYAAD...==" width="300">

(We don't have a convenient place to put hostable images so this is our temporary solution.)

When I render the HTML from remarkRehype, it has stripped the image out of the rendered html. Is there a way to allow it to persist through the conversion?

Upvotes: 2

Views: 829

Answers (2)

whiterook6
whiterook6

Reputation: 3534

I solved it. It turns out you need to use rehype-raw to maintain HTML inside the markdown during transformation. Otherwise the HTML is removed, which was what happened to my missing images.

Upvotes: 1

Bart
Bart

Reputation: 1609

I think you can use rehype-sanitize with the following config:

{
  ...defaultSchema,
  protocols: {
    src: [...(defaultSchema.protocols?.src ?? []), 'data'],
  },
},

using { defaultSchema } from 'hast-util-sanitize'

Upvotes: 1

Related Questions