Skip to content

Link around badges inside HTML does not work in Markdown rendering/parsing

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Summary

Surrounding a badge in a markdown (/readme) with a link does not work inside HTML, e.g., for centering the badges. Centering the badge without a link does work.

A badge should usually link to docs, pipelines, etc., so there is a link around them [![fallback text](badge-url)](url) If this is inside HTML, e.g., <div align="center">[![fallback text](badge-url)](url)</div> is breaks. Passing the badge without the link to the HTML works as expected.

Steps to reproduce

  • Gitlab version: GitLab Community Edition v17.10.0
  • Have a repo with a pipeline
  • Add badges to your readme: ![mybadge](https://gitlab.example.com/<namespace>/<project>/badges/<branch>/pipeline.svg)
  • Surround a badge with a markdown link (source)
  • center your badge and link with ´
    ` (source)
  • Click preview (online editor) or commit and see online.

    • Example Project

    Example Readme

    ```markdown
**Does work (without links)**
<div align="center">
![Docs](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Docs&key_width=35)
![Main Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Main+Pipeline&key_width=82)
![Main Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/coverage.svg?job=pytest&key_text=Main+Test+Coverage&key_width=114)
![Dev Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/pipeline.svg?key_text=Dev+Pipeline&key_width=80)
![Dev Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/coverage.svg?job=pytest&key_text=Dev+Test+Coverage&key_width=112)
</div>

**Does work (with links and without div align="center">)**

[![Docs](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Docs&key_width=35)](https://scs.pages.ub.uni-bielefeld.de/cocosy/cooperative-cuisine/cooperative_cuisine.html)
[![Main Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Main+Pipeline&key_width=82)](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/-/pipelines/latest/)
[![Main Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/coverage.svg?job=pytest&key_text=Main+Test+Coverage&key_width=114)](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/-/pipelines/latest/)
![Dev Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/pipeline.svg?key_text=Dev+Pipeline&key_width=80)
![Dev Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/coverage.svg?job=pytest&key_text=Dev+Test+Coverage&key_width=112)


**Does not work**

<div align="center">
[![Docs](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Docs&key_width=35)](https://scs.pages.ub.uni-bielefeld.de/cocosy/cooperative-cuisine/cooperative_cuisine.html)
[![Main Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/pipeline.svg?key_text=Main+Pipeline&key_width=82)](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/-/pipelines/latest/)
[![Main Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/main/coverage.svg?job=pytest&key_text=Main+Test+Coverage&key_width=114)](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/-/pipelines/latest/)
![Dev Pipeline Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/pipeline.svg?key_text=Dev+Pipeline&key_width=80)
![Dev Coverage Report](https://gitlab.ub.uni-bielefeld.de/scs/cocosy/cooperative-cuisine/badges/dev/coverage.svg?job=pytest&key_text=Dev+Test+Coverage&key_width=112)
</div>

    What is the current bug behavior?

    Instead of correctly parsing the markdown link inside the HTML, it is handled as normal text.

    What is the expected correct behavior?

    Visually: like in the image but with a link <a href="...">

    Relevant logs and/or screenshots

    image

    Output of checks

    Results of GitLab environment info

    Expand for output related to GitLab environment info 
    
(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

    Results of GitLab application Check

    Expand for output related to the GitLab application check 
    (For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)
    

    (For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)
    

    (we will only investigate if the tests are passing)

    Possible fixes

Edited by 🤖 GitLab Bot 🤖