question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Link text inline content fails to parse image references

See original GitHub issue

The CommonMark spec says that link text may itself contain inline content. Example 525:

[![moon](moon.jpg)](/uri)

yields:

<p><a href="/uri"><img src="moon.jpg" alt="moon" /></a></p>

In FlexMark, however, inline content that consists of an image reference fails to parse and is passed straight through as the link text. Example test case:

[![][moon]](/uri)

[moon]: moon.jpg

yields:

<p><a href=\"/uri\">![][moon]</a></p>

The expected output is:

<p><a href="/uri"><img src="moon.jpg" alt="moon" /></a></p>

Verified with ParserEmulationProfile.COMMONMARK_0_28 and ParserEmulationProfile.MULTI_MARKDOWN.

Additional context: My application uses ParserEmulationProfile.MULTI_MARKDOWN. MultiMarkdown uses image references to encode width/height data, which I am reliant on. So this is a hard blocker for me that I will need to work around in one way or another.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
vschcommented, Apr 29, 2020

@jingibus, btw, the expected output in your case would be:

<p><a href="/uri"><img src="moon.jpg" alt="" /></a></p>

the alt is empty because you are using syntax [![alt text][moon]](/uri), which overrides the default alt with one which is empty. Use [![moon]](/uri) or [![moon][]](/uri) to use the reference id as alt text.

0reactions
jingibuscommented, Apr 29, 2020

Unbelievable. Thank you so much!

I’ve got a followup that’s specific to MultiMarkdown coming, but I’ve confirmed the issue reported here is fixed on my end.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Combining adjacent image and text links for the same resource
This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or...
Read more >
Links - Usability & Web Accessibility - Yale University
In general, content editors should avoid using images as links. If an image functions as a link, the image must have alt text...
Read more >
Links and Hypertext - Link Text and Appearance - WebAIM
Avoid uninformative link phrases; Link length; URLs as links ... If a linked image does not have alternative text, a screen reader may...
Read more >
<img>: The Image Embed element - HTML - MDN Web Docs
Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking,...
Read more >
Handbook Markdown Guide - GitLab
Read through our Markdown kramdown Style Guide! ... We'd rather use inline links, such as [Text to display](link) , as they are easier...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found