Learn how to create 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 --> : https://www.bower.io [My Bower Link] <!-- Inline --> [My Bower Link](https://www.bower.io)
As well as how to create Images using both inline and reference styles:
<!-- Reference --> : https://bower.io/img/bower-logo.png ![Bower.io: A Frontend Package Manager. logo] <!-- 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 --> : https://www.bower.io <!-- The image url we want to use for our img tag source --> : https://bower.io/img/bower-logo.png <!-- This will compile to two html nodes: Anchor: [linked item]: <a href="1">linked item</a> image: /i ![alt text]: <img src="2" alt="alt text" /> The image node will be nested inside of the anchor node. --> [![Bower.io: A Frontend Package Manager. logo]]
and voila, here's the output:
If you hover over the Bower bird, you'll see that it is, indeed, a link.
Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.
A figma community project of vectorized hand-drawn arrows.Go To Figma
A figma community project of vectorized hand-drawn lines.Go To Figma
A figma community project of vectorized hand-drawn shapes.Go To Figma
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.
I'm on almost all social media as @curiouslychase.