Set An Anchor Link On An Image In Markdown

Learn how to create an anchor link on an image in Markdown.

thumbnail for Set An Anchor Link On An Image In Markdown

I use Markdown daily in writing blog posts, README's or answering questions on stackoverflow.com. 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:

<!-- Reference -->
[1]: https://www.bower.io
[My Bower Link][1]

<!-- Inline -->
[My Bower Link](https://www.bower.io)

As well as how to create Images using both inline and reference styles:

<!-- Reference -->
[2]: https://bower.io/img/bower-logo.png
![Bower.io: A Frontend Package Manager. logo][2]

<!-- Inline -->
![Bower.io: A Frontend Package Manager. logo](https://bower.io/img/bower-logo.png)

So I decided to wrap a referenced image within an referenced anchor, making the image the link content:

<!-- The link we want our bower bird to point to -->
[1]: https://www.bower.io
<!-- The image url we want to use for our img tag source -->
[2]: https://bower.io/img/bower-logo.png

<!--
This will compile to two html nodes:
  Anchor:   [linked item][1]: <a href="1">linked item</a>
  image: /i  ![alt text][2]: <img src="2" alt="alt text" />
The image node will be nested inside of the anchor node.
-->
[![Bower.io: A Frontend Package Manager. logo][2]][1]

and voila, here's the output:

Bower.io: A Frontend Package Manager. logo

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

Was this page helpful?

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.