使用remark-rehype时，如何保留Markdown文件中的内联图片？

我们将Markdown文件作为SDK使用文档，旗下网站通过unified生态的remark与rehype工具链处理，最终转换为React组件在浏览器展示。当前使用的配置代码如下：

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,
  });

Markdown文档中包含用于临时展示的base64内联图片（暂无合适托管位置），示例内容如下：

## 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">

但经过上述工具链转换后，内联图片被移除，请问如何调整配置才能保留这些图片？

要保留Markdown中的base64内联图片，需要修改两处配置：

1. 添加remark-raw插件
   remarkParse默认会忽略Markdown中的原生HTML内容，需要通过remark-raw插件让解析器保留这些原始HTML节点，确保后续的remarkRehype能处理它们。

2. 为rehypeReact开启allowDangerousHtml
   即使前面允许了HTML传递，rehypeReact默认也会过滤危险HTML，需要显式开启该配置以允许渲染内联图片标签。

修改后的完整配置 #

首先安装remark-raw依赖：

npm install remark-raw
# 或
yarn add remark-raw

然后更新processor配置：

import remarkRaw from 'remark-raw';

const processor = unified()
  .use(remarkParse)
  .use(remarkRaw) // 新增：保留原始HTML内容
  .use(remarkRehype, {
    allowDangerousHtml: true,
  })
  .use(rehypeHighlight, {
    ignoreMissing: true,
    languages: {
      gradle,
      java,
      kotlin,
      xml,
    },
    subset: ["kotlin", "java", "gradle", "xml"],
  })
  .use(rehypeReact, {
    createElement: React.createElement,
    allowDangerousHtml: true, // 新增：允许渲染原生HTML
  });

配置说明 #

• remarkRaw：让remark解析器将Markdown中的原生HTML视为原始内容保留，不进行额外处理，直接传递给后续的rehype转换流程。
• rehypeReact的allowDangerousHtml：授权rehypeReact将HTML节点转换为React元素时，保留原始的HTML属性和结构，确保base64图片标签能被正确渲染。

内容的提问来源于stack exchange，提问作者whiterook6