Markdown. I use it 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.
Find this article useful?