DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Tomoyuki Aota
Tomoyuki Aota

Posted on • Updated on

[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

[![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 Build Status
| 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!

Top comments (0)

πŸ‘‹ Have You Posted on DEV Yet?

Head over to our Welcome Thread and tell us a bit about yourself!