search

Ileriayo / markdown-badges

Badges for your personal developer branding, profile, and projects.
https://ileriayo.github.io/markdown-badges
MIT License
12.46k stars 1.54k forks source link

Badges not working on my README.md #557

Closed drippy-cat closed 1 year ago

drippy-cat commented 1 year ago

I tried adding the badges to my README.md but it ends up looking like this. image image

kohasummons commented 1 year ago

Heyy @drippy-cat. Sorry, you had issues using markdown badges today. After a quick look at the affected repo, I suspect the indents around the badges are the ones acting up.

You have this:

<!-- AI -->
    ![Amazon Alexa](https://img.shields.io/badge/amazon%20alexa-52b5f7?style=for-the-badge&logo=amazon%20alexa&logoColor=white)
    ![ChatGPT](https://img.shields.io/badge/chatGPT-74aa9c?style=for-the-badge&logo=openai&logoColor=white)
    ![Google Assistant](https://img.shields.io/badge/google%20assistant-4285F4?style=for-the-badge&logo=google%20assistant&logoColor=white)
<!-- Blog -->
    ![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white)

When you should have this(Fix):

Amazon Alexa ChatGPT Google Assistant

Dev.to blog

Code (for Fix above):

<!-- Beta markdown badges -->
<!-- AI -->
![Amazon Alexa](https://img.shields.io/badge/amazon%20alexa-52b5f7?style=for-the-badge&logo=amazon%20alexa&logoColor=white) ![ChatGPT](https://img.shields.io/badge/chatGPT-74aa9c?style=for-the-badge&logo=openai&logoColor=white) ![Google Assistant](https://img.shields.io/badge/google%20assistant-4285F4?style=for-the-badge&logo=google%20assistant&logoColor=white)

<!-- Blog -->
![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white)

Fix:

Do you notice how the markdown badge URL starts right at the edge of the screen in the Fix version? Whereas the version with the issue has indents to the left? Remove the Indents, and you will have a working markdown badge. Sorry for the inconvenience once again.

drippy-cat commented 1 year ago

Thanks! What if I wanted to do something like this: image image

kohasummons commented 1 year ago

You are welcome. Do you mean where each section has a header? Here's a demo:

Blog

Dev.to blog Dev.to blog

Code:

<h2 align="center">Blog</h2>

![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white) ![Dev.to blog](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white)

Like this ☝🏽. You need to add whitespace/line break after the <h2/> tag.

drippy-cat commented 1 year ago

Yes, it works now - thanks!

kohasummons commented 1 year ago

Thanks for choosing Markdown-badges, drippy cat. I will close the issue as completed now. : 😊