Skip to content

Instantly share code, notes, and snippets.

@dustinrouillard
Last active July 21, 2019 21:31
Show Gist options
  • Save dustinrouillard/22fa984af22396a9599d3248b65fe6b1 to your computer and use it in GitHub Desktop.
Save dustinrouillard/22fa984af22396a9599d3248b65fe6b1 to your computer and use it in GitHub Desktop.
Github Markdown with Badges n' such (Example badge usage for various sites)

Badges for things

Below you will find the markdown and html examples, I've included the html examples because if you want to center them in the readme you'll need to use the html tag variant with a p tag set to align center.

Center tags are used here and you can see how they're all layed out by opening the raw of this file.

<p align="center">
  <!-- Tags here -->
</p>

All the badges from below

Donate on patreon Follow on twitter Join Discord NPM Package Version NPM Monthly Downloads NPM Weekly Downloads NPM Total Downloads NPM Bundle MIN Size GitHub License GitHub Code Size GitHub Repo Size

Patreon

Donate on patreon

Markdown code for Patreon badge

[![Donate on patreon](https://img.shields.io/badge/donate-patreon-F96854.svg)](https://patreon.com/Tetrabyte)

HTML Code for Patreon badge

<a href="https://patreon.com/Tetrabyte"><img src="https://img.shields.io/badge/donate-patreon-F96854.svg" alt="Donate on patreon"></a>

Twitter

Follow on twitter

Markdown code for Twitter badge

[![Follow on twitter](https://img.shields.io/twitter/follow/TheTetrabyte.svg?label=Follow)](https://twitter.com/TheTetrabyte)

HTML Code for Twitter badge

<a href="https://twitter.com/TheTetrabyte"><img src="https://img.shields.io/twitter/follow/TheTetrabyte.svg?label=Follow" alt="Follow on twitter"></a>

Discord

Join Discord

Markdown code for Discord badge

[![Join Discord](https://discordapp.com/api/guilds/115570032188194822/embed.png)](https://discord.gg/JbHy7c2)

HTML Code for Discord badge

<a href="https://discord.gg/JbHy7c2"><img src="https://discordapp.com/api/guilds/115570032188194822/embed.png" alt="Join Discord"></a>

NPM Package

NPM Package Version

Markdown code for NPM Package badge

[![NPM Package Version](https://img.shields.io/npm/v/snowflake-id.svg)](https://npmjs.com/snowflake-id)

HTML Code for NPM Package badge

<a href="https://npmjs.com/snowflake-id"><img src="https://img.shields.io/npm/v/snowflake-id.svg" alt="NPM Package Version"></a>

NPM Monthly Downloads

NPM Monthly Downloads

Markdown code for NPM Monthly Downloads badge

[![NPM Monthly Downloads](https://img.shields.io/npm/dm/snowflake-id.svg)](https://npmjs.com/snowflake-id)

HTML Code for NPM Monthly Downloads badge

<a href="https://npmjs.com/snowflake-id"><img src="https://img.shields.io/npm/dm/snowflake-id.svg" alt="NPM Monthly Downloads"></a>

NPM Weekly Downloads

NPM Weekly Downloads

Markdown code for NPM Weekly Downloads badge

[![NPM Weekly Downloads](https://img.shields.io/npm/dw/snowflake-id.svg)](https://npmjs.com/snowflake-id)

HTML Code for NPM Weekly Downloads badge

<a href="https://npmjs.com/snowflake-id"><img src="https://img.shields.io/npm/dw/snowflake-id.svg" alt="NPM Weekly Downloads"></a>

NPM Total Downloads

NPM Total Downloads

Markdown code for NPM Total Downloads badge

[![NPM Total Downloads](https://img.shields.io/npm/dt/snowflake-id.svg)](https://npmjs.com/snowflake-id)

HTML Code for NPM Total Downloads badge

<a href="https://npmjs.com/snowflake-id"><img src="https://img.shields.io/npm/dt/snowflake-id.svg" alt="NPM Total Downloads"></a>

NPM Bundle MIN Size

NPM Bundle MIN Size

Markdown code for NPM Bundle MIN Size badge

[![NPM Bundle MIN Size](https://img.shields.io/bundlephobia/min/snowflake-id.svg)](https://npmjs.com/snowflake-id)

HTML Code for NPM Bundle MIN Size badge

<a href="https://npmjs.com/snowflake-id"><img src="https://img.shields.io/bundlephobia/min/snowflake-id.svg" alt="NPM Bundle MIN Size"></a>

GitHub License

GitHub License

Markdown code for GitHub License badge

[![GitHub License](https://img.shields.io/github/license/TheTetrabyte/snowflake-id.svg)](https://github.com/TheTetrabyte/snowflake-id)

HTML Code for GitHub License badge

<a href="https://github.com/TheTetrabyte/snowflake-id"><img src="https://img.shields.io/github/license/TheTetrabyte/snowflake-id.svg" alt="GitHub License"></a>

GitHub Code Size

GitHub Code Size

Markdown code for GitHub Code Size badge

[![GitHub Code Size](https://img.shields.io/github/languages/code-size/TheTetrabyte/snowflake-id.svg)](https://github.com/TheTetrabyte/snowflake-id)

HTML Code for GitHub Code Size badge

<a href="https://github.com/TheTetrabyte/snowflake-id"><img src="https://img.shields.io/github/languages/code-size/TheTetrabyte/snowflake-id.svg" alt="GitHub Code Size"></a>

GitHub Repo Size

GitHub Repo Size

Markdown code for GitHub Repo Size badge

[![GitHub Repo Size](https://img.shields.io/github/repo-size/TheTetrabyte/snowflake-id.svg)](https://github.com/TheTetrabyte/snowflake-id)

HTML Code for GitHub Repo Size badge

<a href="https://github.com/TheTetrabyte/snowflake-id"><img src="https://img.shields.io/github/repo-size/TheTetrabyte/snowflake-id.svg" alt="GitHub Repo Size"></a>

For more badges you can use the examples from here with the badges you need from shields.io

@jamiepine
Copy link

you are insane

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment