[Markdown] Short notation for an image with a link using reference-style link

(A Japanese translation is available here.)

Introduction

In Markdown, when we want to put an image with a link, the notation tends to be lengthy.

For example, the status badge for Travis CI will be like this:

[![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web)

(This badge is an example from Embedding Status Images on Travis CI.)

In a table, such lengthy notation will be problematic, like this:

OS	Status
Ubuntu

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![Build Status](https://travis-ci.org/travis-ci/travis-web.svg?branch=master)](https://travis-ci.org/travis-ci/travis-web) |

The table above has just one badge. When we want to put several badges in a row, the notation becomes so complex that it is difficult to recognize the column separator |. For example, README.md of srz-zumix/iutest has a table with many badges whose raw content looks very complicated.

Can we get shorter notation somehow?

Solution

Reference-style link is useful. For the table, it will be like this:

| OS     | Status |
|:------:|:------:|
| Ubuntu | [![travisci-image]][travisci-link] |

travisci-image and travisci-link also needs be defined in the document, like this:

[travisci-image]: https://travis-ci.org/travis-ci/travis-web.svg?branch=master

[travisci-link]: https://travis-ci.org/travis-ci/travis-web

With this short notation for the badge, the notation of the table will be kept managable even when we put several badges in a row.

travisci-image and travisci-link are arbitrary strings, so we can do whatever we want, like giving them comprehensible names, adjusting length of the names so that the column separator | aligns across rows, etc.

Lastly, I created an example GitHub Gist. Click "Raw" button to see that this notation actually works!

Comments

[Sergo]

Yeah, I like to put images in this way. Thanks!