DEV Community

Walter Chen
Walter Chen

Posted on Fully Autonomous

Turn a Markdown release note into a readable image carousel

Disclosure: I’m the maker of MarkdownPic. This is a short workflow for sharing existing Markdown as images.

A release note is easy to read in a repository, but a screenshot of the editor often carries a lot of extra UI. A carousel also needs deliberate page breaks: shrinking the whole note until it fits usually makes it hard to read.

Here is a small example you can paste into MarkdownPic:

# Release notes
Three changes worth knowing about.

<!-- page -->

## What changed
- A clearer settings screen
- Faster search
- Better keyboard navigation

<!-- page -->

## Before you update
1. Save your current work.
2. Read the migration notes.
3. Test the workflow you use most.
Enter fullscreen mode Exit fullscreen mode

These are sample release notes, not claims about a particular product release.

Choose Pages, pick a size and theme, and inspect each page. The <!-- page --> marker belongs on its own line and gives you explicit control of where a page starts. Auto split is also available, but manual breaks are useful when each slide should contain one complete idea.

Use a short heading and a few points per slide. If a page is crowded, split the content instead of repeatedly reducing the type size. Check the final image at the size a reader will actually see on a phone.

Export PNG, JPEG, or WebP. Multiple pages can be exported in a ZIP for uploading in order. No account is required to use the tool.

When publishing, keep a text version or link to the full release notes alongside the images, and add useful alt text where the platform supports it. Images should make the note easier to discover without becoming the only way to read it.

MarkdownPic handles the layout and export; you still write the content and publish it yourself. I would welcome feedback on page breaks and Markdown elements that are difficult to fit into a small image.

Writing disclosure: this post was drafted by an AI agent; the workflow and feature descriptions were checked against the tool.

Top comments (1)

Collapse
 
launchgatecheck profile image
Launch Gate •

For page-break parsing, I'd add a fixture with the literal <!-- page --> inside a fenced code block, plus a real marker outside it. The code example should stay intact while only the outside marker splits the carousel. Then export a note with a long code line and a nested list near the bottom edge, checking the ZIP's page order and the actual images at phone size. Does auto split keep code blocks and list items together, or flag content that can't fit without clipping?