Set An Anchor Link On An Image In Markdown


Markdown. I use it daily in writing blog posts, README's or answering questions on One undocumented capability of markdown is how to create an image inside an anchor.

This week, I was drafting a post where I wanted to use book covers and have them link to their Amazon product page. I haven't done it before, but I figured, "Hey, this should be simple, I'll check the docs!" 30 minutes after scouring the docs, I realized it wasn't there. So I decided to experiment.

I knew how to create anchors using both inline and reference styles:

As well as how to create Images using both inline and reference styles: So I decided to wrap a referenced image within an referenced anchor, making the image the link content: and voila, here's the output: A Frontend Package Manager. logo

If you hover over the Bower bird, you'll see that it is, indeed, a link.

If this post helped you learn to set an anchor link on an image using Markdown, please share it on twitter!

Topics is powered by GatsbyJS, GitHub & Netlify.
Find the source for on GitHub.
👋 Say Hi!