Skip to content

Document how to reference a label in GitHub-flavored Markdown #18537

Description

@TonyGravagno

Code of Conduct

What article on docs.github.com is affected?

https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

What part(s) of the article would you like to see updated?

#referencing-issues-and-pull-requests

I propose adding a new section here, "Referencing Labels". This feature is not directly supported by Github, but it is possible in a standard manner with a feature provided by shields.io. For example: label: github/docs/labels/content is created with image link:
![label: Content](https://img.shields.io/github/labels/github/docs/content)

Documentation: https://shields.io/category/issue-tracking - See and click topic 'GitHub labels'.

Because this is dynamically generated, the color of the image is always accurate at the time of rendering/viewing, not just at the time of text entry. The alt text covers for missing images or communications issues.

As this is a useful and requested feature, I think it would be helpful to add the suggestion to the doc, even if the feature is not built-in to Github itself. If the shields.io service goes away, Github will have much greater issues than this one feature, and the doc can be modified as required.

TY

Additional information

On approval, I'll submit a PR for the new content.

Someone may suggest adding notes about shields for milestones and other features supported by shields.io. I suggest we process this one request first and consider other such requests on their own merits.

Activity

  1. added
    contentThis issue or pull request belongs to the Docs Content team
    on Jun 10, 2022
  2. welcome commented on Jun 10, 2022

    @welcome

    Thanks for opening this issue. A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.

  3. added
    triageDo not begin working on this issue until triaged by the team
    on Jun 10, 2022
  4. PythonCoderAS commented on Jun 11, 2022

    @PythonCoderAS
    Contributor

    I don't think this is allowed because shields.io is a third-party service.

  5. TonyGravagno commented on Jun 12, 2022

    @TonyGravagno
    Author

    I don't think this is allowed because shields.io is a third-party service.

    Thanks for the challenge...

    • There's no reason not to reference another site. Other sites are mentioned in these docs for similar purposes.
    • In particular, shields.io site is not competitive with Github or Microsoft.
    • There is no endorsement or implication of affiliation with a reference to that site.
    • That site is non-commercial, publicly supported, and entirely based on the badges/shields FOSS hosted here at Github.
    • It's not a volatile link. There are 5.7 million instances in Github public repo code where shields.io is already used for dynamic and static badges. The suggestion here is simply to document the established standard for what people already do, and change it later in the almost certain never to happen scenario where the site changes.
    • Microsoft could choose to fork and implement the shields project, and suggest to all that they can get shields from there. A decision had been made not to do that. Given that decision it seems reasonable to support documenting how to use the feature at it exists.
    • This doc page documents how to add a dynamic badge for workflow, using data from this site as the source. Because this site doesn't document how to use other dynamic data that is readily available, people in the FOSS community filled the gap. That saved Github/Microsoft some effort and should be rewarded with a reciprocal gesture of recognition. Let's document how to get the data from github.com directly, if it's possible, or, let's document where we know people can use this existing functionality. It's just data.

    Ref functionality supported by the Github API, implemented in the badge/shields project FOSS (source for shields.io).

    See also the badges/shields PR for this.

    Ping @pfaion @calebcartwright

  6. PythonCoderAS commented on Jun 12, 2022

    @PythonCoderAS
    Contributor

    @TonyGravagno let me be clear, the issue is describing it enough that it seems to be official. I was thinking something that would be acceptable could be a sentence that just reads "Third-party services like shields.io allow dynamically creating images of repository labels."

  7. TonyGravagno commented on Jun 12, 2022

    @TonyGravagno
    Author

    I agree that would be ideal and I will ensure it's presented like this if the enhancement is approved. Thanks.

  8. janiceilene commented on Jun 15, 2022

    @janiceilene
    Contributor

    👋 Thanks so much for opening an issue and clearly explaining your reasoning @TonyGravagno! Since this isn't a GitHub feature and is a totally optional thing that users can choose to add if they're interested, we're not going to add it to the docs 💛

    Thank you for your interest and passion in improving the GitHub docs! ✨

  9. styfle commented on Jun 17, 2022

    @styfle

    It seems like GitHub must have a native way to do this because I'm seeing it in this PR: nodejs/node#43310

    image

    I'm not seeing this feature documented however so perhaps its beta? 🤔

  10. PythonCoderAS commented on Jun 17, 2022

    @PythonCoderAS
    Contributor

    It seems like GitHub must have a native way to do this because I'm seeing it in this PR: nodejs/node#43310

    image

    I'm not seeing this feature documented however so perhaps its beta? 🤔

    Oh it's simple, just put in a normal link to the label. For example:

    https://github.com/github/docs/labels/content

    -> content This issue or pull request belongs to the Docs Content team

  11. styfle commented on Jun 17, 2022

    @styfle

    Cool! I don't see that documented though.

    Perhaps it should be added to Autolinked References and URLs

  12. PythonCoderAS commented on Jun 17, 2022

    @PythonCoderAS
    Contributor

    Maybe open a different issue for that?

  13. Sakhilemasina commented on Jun 17, 2022

    @Sakhilemasina
  14. styfle commented on Jun 18, 2022

    @styfle

    I created #18704

  15. xamidi commented on Feb 8, 2025

    @xamidi

    Oh it's simple, just put in a normal link to the label. For example:

    content This issue or pull request belongs to the Docs Content team

    -> content This issue or pull request belongs to the Docs Content team

    That's really cool!

    I'd like to mention that in case someone wishes to show labels outside of the repo that defines them, and (like me) dislikes that https://img.shields.io/ distorts color and shape of labels, it still can be done.

    For example, https://img.shields.io/github/labels/xamidi/pmGenerator/challenge is
    challenge,
    but (as in xamidi/pmGenerator#2) it should be
    challenge.

    I simply uploaded and linked an SVG

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="63" height="20" role="img" aria-label="challenge">
      <title>challenge</title>
      <g>
        <rect width="63" height="20" fill="#ffcb00" rx="10"/>
      </g>
      <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
        <text x="315" y="140" transform="scale(.1)" fill="#333" textLength="530">challenge</text>
      </g>
    </svg>
    

    to and from this comment.

    I took color and dimensions from img.shields.io's code (where color distortion is only due to some linearGradient overlay).

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentThis issue or pull request belongs to the Docs Content teamtriageDo not begin working on this issue until triaged by the team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions