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

[queengooborg]

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

After

[fiji-flo]

I see that this is blocking moving to the new syntax. I feel very strongly about letting a tool like prettier decide how MDN looks like. I looked at prettier and opened a PR to fix this almost 4 year old issue. I actually affects our note cards and code blocks as a whole.

[fiji-flo]

As for now we could also just use:

> [!NOTE] something

for the same line note cards. GitHub does not support this but yari/rari does.