Markdown Reference Link with shields.io badges

Question

How to make sure that the shields.io badge points to the site, and do that using reference-style markdown links.

This works fine

[![](https://img.shields.io/badge/code%20style-black-black.svg?style=for-the-badge&labelColor=gray)][http://github.com/psf/black]

[][http://github.com/psf/black]

This doesn't works

![]([black-shield])[black]

[black]: http://github.com/psf/black
[black-shield]: https://img.shields.io/badge/code%20style-black-black.svg?style=for-the-badge&labelColor=gray

Answer 1

The correct syntax is

[![General badge](https://img.shields.io/badge/<SUBJECT>-<STATUS>-<COLOR>.svg)](https://shields.io/)

Example

[![Stack Overflow Badge](https://img.shields.io/badge/Stack%20Overflow-F58025?logo=stackoverflow&logoColor=fff&style=flat)](https://stackoverflow.com/users/12299287/cryptocode)

Produces

Answer 2

Works using square brackets!

[![][black-shield]][black]

[black]: http://github.com/psf/black
[black-shield]: https://img.shields.io/badge/code%20style-black-black.svg?style=for-the-badge&labelColor=gray