Skip to content

Explore custom Rehype plugin for block-level images #444

@rebeccaalpert

Description

@rebeccaalpert

Markdown puts images in a paragraph. There is a plugin available that removes the paragraph if it only contains an image: https://github.com/rehypejs/rehype-unwrap-images

We would want to extend this to look for paragraphs that contain images + other content and then bumps the images out into separate paragraphs. This would hopefully let us strip the paragraph. We want to make these two options consistent:

Image

This is the difference in Markdown:

I am a block level image: 
  
![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)
  
I am an inline image: ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)

See implementation for rehype-unwrap-images here; we could probably fork this and modify it to do what we want:
https://github.com/rehypejs/rehype-unwrap-images/blob/main/lib/index.js

Metadata

Metadata

Assignees

Labels

PF6Applies to only the PF6 version

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions