yari icon indicating copy to clipboard operation
yari copied to clipboard

fix(markdown): Always render noteblock titles on its own line

Open queengooborg opened this issue 6 months ago • 2 comments

Summary

This PR updates the GFM noteblock rendering to always put the title ("Note:", "Warning:", etc.) on its own line, regardless of how the Markdown is formatted.

[!IMPORTANT] GitHub has named noteblocks as "Alerts".

Problem

One issue that is currently preventing us from performing mass GFM noteblock conversion is a Prettier bug, which causes lines starting with special characters (like [ or `) to get wrapped to the same line as the noteblock declaration (like > [!NOTE] > `code` cannot be used).

Solution

The simplest solution I could think of was to update the rendering to be more similar to how GitHub renders its noteblocks.

[!NOTE] This is how GitHub's noteblocks look.


Screenshots

Test Markdown

> [!NOTE]
> This is a note.

> [!WARNING]
> This is a warning.

> [!CALLOUT]
> This is a callout.

> [!NOTE]
>
> This is a multi-line note.

> [!WARNING]
>
> This is a multi-line warning.

> [!CALLOUT]
>
> This is a multi-line callout.

Before

before

After

after

queengooborg avatar Jul 26 '24 16:07 queengooborg