bent10 / marked-extensions

Marked extensions workspace
https://www.npmjs.com/search?q=keywords:stilearning-marked-extensions
MIT License
33 stars 6 forks source link

Reference-style links don't work in alerts #120

Closed benhatsor closed 1 week ago

benhatsor commented 1 month ago

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

Actual Behavior

Output:

Screenshot 2024-09-25 at 4 19 07 PM

Codepen

Additional Information

bent10 commented 1 month ago

Hi @benhatsor,

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

benhatsor commented 1 month ago

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:

Screenshot 2024-10-07 at 3 06 35 PM

While GitHub renders this:

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

Codepen

benhatsor commented 2 weeks ago

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:

Screenshot 2024-10-30 at 10 48 20 PM

While GitHub renders this:

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

CodePen

bent10 commented 2 weeks ago

~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 commented 1 week ago

@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!