Github Used Languages 🎨 Destaque suas principais linguagens para o seu README totalmente customizável.

A ideia por trás deste projeto é criar uma imagem personalizável que mede o uso de linguagens de programação e/ou ferramentas a partir de perfis do GitHub.

Você tem bastante controle sobre o que incluir, desde escolher quais linguagens ou ferramentas exibir, até definir as extensões de arquivo relevantes, nomes, imagens, cores e muito mais.

Você pode usar através do link https://github-used-languages.vercel.app/seu-usuario-do-github (substituindo seu-usuario-do-github pelo seu nome de usuário), que retorna uma imagem SVG com a configuração padrão.

No seu README do GitHub, adicione o seguinte código:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-used-languages.vercel.app/your-github-username?theme=dark">
  <img alt="Most Used Languages'" src="https://github-used-languages.vercel.app/your-github-username">
</picture>

Customização

Agora que sua criatividade entra em cena, a customização acontece pelo parâmetro config com o caminho para seu JSON de configuração (orientações no README do repositório).

Você pode enviar uma imagem personalizada para aparecer no centro do gráfico de rosquinha, usando o campo custom_image. Além disso, é possível editar todas as palavras e cores utilizadas.

{
    "title": "🏆 Most Used Languages 🏆",
    "custom_image": "",
    "colors_light_theme" : {
        "title_color": "#828282",
        "text_color" : "#888888",
        "percentage_color": "#828282",
        "background_color": "#fefeff",
        "border_color": "#808080"
    },
    "colors_dark_theme": {
        "title_color": "#E0E0E0",
        "text_color": "#CCCCCC",
        "percentage_color": "#BBBBBB",
        "background_color": "#20202a",
        "border_color": "#101010"
    },
    "disable_languages": [
        "HTML"
    ],
    "languages": [
        {
            "name": "Python",
            "extensions": ["py", "pyw", "pyc", "pyo", "pyd", "ipynb"],
            "color": "#3572A5",
            "image": "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"
        },
...

Isso também inclui as linguagens de programação, permitindo desativar, adicionar e editar (inclusive as imagens).

OBS:

Código e documentação no repositório: https://github.com/CaioLr/github-used-languages

Aceito sugestões e outras features 🙌 por pull request também.