Reference-style links don't work in alerts

[benhatsor]

• Extension Name: marked-alert
• Extension Version: 2.0.2
• Project Version: N/A
• Device: [e.g Desktop] N/A
• OS@version (or Browser): N/A
• Node And NPM Version: N/A

Description

Reference-style links (documentation) don't work in the marked-alert GFM alerts, while they do work on GitHub (see below). See here for examples of reference-style links.

To Reproduce (⚠️ read below)

Expected Behavior

Input Markdown:

> [!NOTE]
> [Reference-style link][1]

> [!NOTE]
> [Another reference-style link]

[1]: https://google.com
[Another reference-style link]: https://github.com

Output:

[!NOTE] Reference-style link

[!NOTE] Another reference-style link

Actual Behavior

Output: Codepen

Additional Information

[bent10]

Hi @benhatsor,

I’ve just resolved the issue in the latest release. Please update and check if it's working now.

[benhatsor]

The reference-style links in alerts work now, but it seems to have broken the alert rendering:

For this Markdown (from GitHub's example):

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

The library renders this:

While GitHub renders this:

[!NOTE]
Highlights information that users should take into account, even when skimming.

Codepen

[benhatsor]

Hey, thanks! The previous issue's been fixed, but it seems to have created another issue:

For this Markdown:

> [!NOTE]
> Line 1 (note the two extra spaces at the end)  
> Line 2  
> Line 3

The library renders this:

While GitHub renders this:

[!NOTE] Line 1 (note the two extra spaces at the end)
Line 2
Line 3

CodePen

[bent10]

~It looks like the issue arises from how marked handles line breaks within blockquote sections. Since marked-alert only transforms blockquote tokens to alert tokens, the line breaks are processed differently, which results in the discrepancy you're seeing between the library’s output and GitHub’s rendering.~

~One workaround is to use the following method, which replaces line breaks within the alert with <br> tags. Here’s how it looks:~

new marked.Marked()
  .use(
    // Define this extension before 'marked-alert'
    {
      walkTokens({ type, tokens }) {
        if (type === "alert") {
          tokens.forEach(token => {
            if (token.type === "paragraph") {
              marked.walkTokens(token.tokens, tok => {
                if (tok.type === "text") {
                  tok.text = tok.text.replace(/\n+/g, "<br>")
                }
              })
            }
          })
        }
      }
    },
    markedAlert()
  )
  .parse(md)

[!CAUTION] ~This approach might have side effects if other extensions rely on similar transformations, so it’s best to test thoroughly.~

~Since this behavior may affect other users handling line breaks in blockquotes with custom extensions, you might want to consider submitting a proposal in the marked repository to support this functionality natively.~

[bent10]

@benhatsor, You can ignore my previous response! I missed the hard line breaks in your example due to an auto-trim setting in my editor.

This will be resolved in the next release!

[benhatsor]

It still doesn't render properly :( This is how the library renders it (as seen in the CodePen):

And this is how GitHub renders it:

[!NOTE] Line 1 (note the two extra spaces at the end)
Line 2
Line 3

Markdown (same as before):

> [!NOTE]
> Line 1 (note the two extra spaces at the end)  
> Line 2  
> Line 3