Thoughts and Notes on Software Development

How to Make Image Clickable Using Markdown?

For awhile now, I was wondering if it was possible to use Markdown, to make an image clickable. By that I mean, display an image in a blog post, and allow the reader to click that image to view the image in a tab. You can see an example at the end of this post.

So anyway, I know what the Markdown syntax is for a link and for an image, but I've never been able to put the two together until today.

Thanks to this post for the idea on how to do it. This saved me from having to write JavaScript that would find all the Snap.as images in a blog post, then wrap them in an <a></a> tag just to make the images clickable and open in a browser tab.

So just to recap, the Markdown syntax for a link is this:
[Link text](Link URL)

And the Markdown syntax for an image is this:
![Alt Text for image](Image URL)

So, given the Markdown listed below for an image, how do you display the image and make it clickable at the same time?
![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png)

The answer is that you put the Markdown for the image inside the Markdown for a link, like so:
[![Mazda FC RX-7 - A little drifting action](https://i.snap.as/2IxnDguK.png)](https://i.snap.as/2IxnDguK.png)

A couple of things to note here:

And finally, here it is in action:
Mazda FC RX-7 - A little drifting action

Tags: #HowTo #Markdown

Discuss... or leave a comment below.