mirror of
https://github.com/inttter/md-badges.git
synced 2026-05-06 10:26:57 +02:00
+ 🔥 Removed markdown documentation in favor of GitBook (#121)
This commit is contained in:
Inter
parent
34c2fecead
commit
b6bbd9ae99
3 changed files with 0 additions and 226 deletions
|
|
@ -1,64 +0,0 @@
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
<img src="assets/customising.svg" alt="customising" width="500">
|
|
||||||
|
|
||||||
|
|
||||||
⚠️ Please note that all of these badges use `flat` style badges for their examples.
|
|
||||||
|
|
||||||
Want to change the style of the button? Please see [Styles](STYLES.md) for documentation.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
When using Shield.io badges in Markdown, you can modify various aspects such as badge color, text, logos, and styles.
|
|
||||||
|
|
||||||
### 1. Changing Badge Color
|
|
||||||
|
|
||||||
You can change the badge color by replacing `<color>` with your desired hexadecimal color code in the badge URL.
|
|
||||||
|
|
||||||
For Example: ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
Replace `blue` with your desired color.
|
|
||||||
|
|
||||||
### 1a. Using hexadecimal colors
|
|
||||||
|
|
||||||
Alternatively, you can use hexadecimal colors to get a specific shade of a color that shield.io may not have built in.
|
|
||||||
|
|
||||||
For Example: ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### 2. Modifying Text
|
|
||||||
|
|
||||||
Change the text displayed on the badge by altering the text after the badge name in the URL (in this case, its **Some%20Placeholder%20Text**).
|
|
||||||
|
|
||||||
For Example: ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
### 2a. Splitting text
|
|
||||||
|
|
||||||
Want to split the text to have 2 different sections? You can do this by adding a `-` between the words.
|
|
||||||
|
|
||||||
For Example: ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
---
|
|
||||||
### 3. Adding Logos
|
|
||||||
Include logos on badges by specifying the logo name after the logo= parameter in the badge URL.
|
|
||||||
|
|
||||||
For Example (using the Docker logo): ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
Another Example (using the Sass logo): ``
|
|
||||||
|
|
||||||
Result: 
|
|
||||||
|
|
||||||
### 3a. Supported icons/logos
|
|
||||||
|
|
||||||
Shield.io uses [Simple Icons](https://github.com/simple-icons/simple-icons) and a small sub-set of it's own icons/logos. If you can find your icon/logo on https://simpleicons.org, it will work with your badge. Shield.io also has its own few custom badges that you can find [here](https://github.com/badges/shields/tree/6e803367e0f3c8e0cc4196a700af37fac1629f4d/logo).
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
<img src="assets/getting-started.svg" width="450">
|
|
||||||
|
|
||||||
There are no extra prerequisites to start using these badges. Simply copy the 'Markdown Code' of the badge that you'd like an paste it into your Markdown file.
|
|
||||||
|
|
||||||
Here's an example:
|
|
||||||
|
|
||||||
<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQ2PNjxiOlGknJG0UQAJ%2Fuploads%2FSvoE6iNy0teOrlPaWejX%2Fimage.png?alt=media&token=f3fea543-8699-44e2-8730-efcaf2808cc0" alt="Copying" width="550">
|
|
||||||
|
|
||||||
Step 1: Copying the Markdown Code
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQ2PNjxiOlGknJG0UQAJ%2Fuploads%2FQe23lT4SZLeaSJwFx05E%2Fimage.png?alt=media&token=8610925e-c56f-48ff-bee6-64d6ae90075e" alt="Pasting" width="550">
|
|
||||||
|
|
||||||
Step 2: Pasting the Markdow into your file.
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
#### 💡 Use 'Ctrl + F' or the Table Of Contents to search quickly for your badge. 💡
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
# 🤔 FAQ
|
|
||||||
|
|
||||||
|
|
||||||
### Q: Why won't my badge lead anywhere?
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><strong>View Answer:</strong></summary>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
By default, (mostly) all badges have (#) at the end of their code to define a link.
|
|
||||||
|
|
||||||
**You need to replace the (#) with a link that you'd like the badge to go to when clicked on.**
|
|
||||||
|
|
||||||
For example, if the code is:
|
|
||||||
|
|
||||||
`[](#)`
|
|
||||||
|
|
||||||
|
|
||||||
...you'll need to replace the (#) with a link (eg. https://github.com/inttter).
|
|
||||||
|
|
||||||
If the code is a dynamically updating badge such as this one:
|
|
||||||
|
|
||||||
`[](https://github.com/badges/shields/releases)`
|
|
||||||
|
|
||||||
<!-- daisyUI is used as an example - https://github.com/saadeghi/daisyui !-->
|
|
||||||
|
|
||||||
|
|
||||||
You must replace 'saadeghi' with your GitHub username/organization, and 'daisyUI' with your repository name. This includes the redirect URL aswell.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Q: Can I customize these badges?
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><strong>View Answer:</strong></summary>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
Yes, please refer to the [Styles](STYLES.md) and [Customization](CUSTOMISING.md) documentations for how to style and customize your badges.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Q: Can I use badges on any repository hosting platform?
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><strong>View Answer:</strong></summary>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
As long as they support Markdown rendering, you can.
|
|
||||||
|
|
||||||
If you need more info, consult the help page for your platform.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
### Q: Do these only work in Markdown?
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary><strong>View Answer:</strong></summary>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
**No**, you can also use them in HTML, by using `<a>` tags to link to a website, and `<img src>` tags to display the badge.
|
|
||||||
|
|
||||||
Here's how you may format it if you were to link the badge to a website inside of a HTML file:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a href="https://kotlinlang.org">
|
|
||||||
<img src="https://img.shields.io/badge/Kotlin-%237F52FF.svg?logo=kotlin&logoColor=white" alt="Kotlin">
|
|
||||||
</a>
|
|
||||||
```
|
|
||||||
|
|
||||||
Result: <a href="https://kotlinlang.org">
|
|
||||||
<img src="https://img.shields.io/badge/Kotlin-%237F52FF.svg?logo=kotlin&logoColor=white" alt="Kotlin">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
62
STYLES.md
62
STYLES.md
|
|
@ -1,62 +0,0 @@
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
<img src="assets/styles.svg" alt="Styles" width="500" height="200">
|
|
||||||
|
|
||||||
# ⛩️ Types of Badges ⛩️
|
|
||||||
|
|
||||||
[shield.io](https://github.com/badges/shields) has 5 different styles of buttons, including:
|
|
||||||
|
|
||||||
|| Types | Styles |
|
|
||||||
| :-: | :------------ | :-------------------------------------------------------------------------------------------------------- |
|
|
||||||
| 1 | Plastic |  |
|
|
||||||
| 2 | Flat-Square |  |
|
|
||||||
| 3 | Flat |  |
|
|
||||||
| 4 | Social |  |
|
|
||||||
| 5 | For The Badge | -03650f?logo=github&style=for-the-badge) |
|
|
||||||
|
|
||||||
This project uses **Flat** badges for the sake of simplicity, similar to how [markdown-badges](https://github.com/Ileriayo/markdown-badges) uses **For The Badge** badges for theirs.
|
|
||||||
|
|
||||||
If you want to change the style of your badge, add the following code into your badge link:
|
|
||||||
|
|
||||||
## **Plastic:**
|
|
||||||
|
|
||||||
`style=plastic`
|
|
||||||
|
|
||||||
**Example:** ``
|
|
||||||
|
|
||||||
**Result:** 
|
|
||||||
|
|
||||||
## **Flat Square:**
|
|
||||||
|
|
||||||
`style=flat-square`
|
|
||||||
|
|
||||||
**Example:** ``
|
|
||||||
|
|
||||||
**Result:** 
|
|
||||||
|
|
||||||
## **Flat:**
|
|
||||||
|
|
||||||
`style=flat`
|
|
||||||
|
|
||||||
**Example:** ``
|
|
||||||
|
|
||||||
**Result:** 
|
|
||||||
|
|
||||||
|
|
||||||
## Social
|
|
||||||
|
|
||||||
`style=social`
|
|
||||||
|
|
||||||
**Example:** ``
|
|
||||||
|
|
||||||
**Result:** 
|
|
||||||
|
|
||||||
## For The Badge
|
|
||||||
|
|
||||||
`style=for-the-badge`
|
|
||||||
|
|
||||||
**Example:** ``
|
|
||||||
|
|
||||||
**Result:** 
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue