Display HTML badge on GitHub README-CodePudding

I have a hyperlinked Strava badge that I want to embed into GitHub README. However, it doesn't display as it should be on GitHub whereas it works on online HTML editor (e.g., https://html-online.com/editor/). I am not sure this problem is specific to GitHub Flavored Markdown (GFM) format, for which I might need to translate my HTML source code to GFM version. What is wrong?

Here is the HTML source code for Strava badge I copy directly from my Strava profile settings:

<a style="display:inline-block;background-color:#FC5200;color:#fff;padding:5px 10px 5px 30px;font-size:11px;font-family:Helvetica, Arial, sans-serif;white-space:nowrap;text-decoration:none;background-repeat:no-repeat;background-position:10px center;border-radius:3px;background-image:url('http://badges.strava.com/logo-strava-echelon.png')" href='http://strava.com/athletes/8882041/badge' target="_clean">
  Follow me on
  <img src='http://badges.strava.com/logo-strava.png' alt='Strava' style='margin-left:2px;vertical-align:text-bottom' height=13 width=51 />
</a>

Current wrong output:
https://github.com/hmhuang0501/Strava-Tool/blob/master/README.md

CodePudding user response：

You're using CSS in the style attribute, and GitHub doesn't support that.

When GitHub renders HTML, whether that's from Markdown, AsciiDoc, another text format, or HTML itself, it sanitizes the HTML to remove CSS and JavaScript. This is because these two formats can be used to cause various problems:

The contents might be hard to read on a variety of backgrounds and sizes, which can cause accessibility issues. GitHub is required by law to be accessible.
The contents could try to hide themselves to include spammy content or abusive content that would be visible to computers, such as search engines, but not to humans. GitHub doesn't want to allow spam and abuse on its platform.
The contents might try to load code or tracking content that was malicious or tracked users, which GitHub doesn't want to host.

GitHub has a Content-Security-Policy header which asks the browser to enforce many of these policies even if the sanitization failed.

If your badge is a pure image, even an SVG, then it can be displayed correctly, but as long as you're trying to use CSS or JavaScript, it won't work.

CodePudding user response：

The answer above is correct, style and script tags will get stripped before the rendering. But there is a trick: you can use an svg which supports <foreignObject> tag for rendering html and it supports <style>.

Checkout this repo which uses this trick to render css, this repo also features extra explanations

Since your html code uses external images, you will need to convert those images to base64 to embed it directly into the svg like this for the css:

background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1 /AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAUdEVYdENyZWF0aW9uIFRpbWUANi80LzE0kRMgQQAAAN1JREFUOI2VkbENAjEMRb/p6GCDk1iAhhKJil2YgYYBGOJaVqDhJEpuBcQGiI7yUeCgEHwHuIkc/ cXKVJQwAYYdcwEhIOKZ23 BWsHb5E1BDMbXdYusC7AG1D1gsCUuOpvYJOFLwVchSCwKIPAIbKWYFOGgmXTNzCyZdtza1OCH7ae71kk2Mp/8sFE0srbnZmd/H4taSypHUSgmZ0ltd4uHZo5JEn7EExDP8cOLb1vJV07QTO7Jqs/9WWTpD7jKwRsk80X9oMeOnp7z57/1Zisd0nHZPu5gDkwzHo9ADWCdl4uXrJLAAAAAElFTkSuQmCC')

and for the img:

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAANCAYAAAAE0Vb3AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1 /AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAUdEVYdENyZWF0aW9uIFRpbWUANi80LzE0kRMgQQAAAoZJREFUSIndll9ojXEYx7 vkW1NlGgrWnYu/GcaIvlzYw2llJtJCIkbblwqEq7WtrRE/pyyCKHN8jdTwy7masO2ooULuXHjz9RwzsfF 7zOc17HMTe72FNvv/f3 X2f8zzP7/09v04AaFQaUAXsBrYBi0cg3nobi4apL7axBhhj77 fwECZpNOSVkuaIAlJg5L6JJ2SVCWpOk cl5K SlrmY0tKSXonqTUIgnOxxGZLui2pUlKFpGuSfkp6GgTBHqerl1QjaaykXZK6LK8tQRA8yzpZwDjgIRkbItsuAnfIb2 Ajn9ommPFXDXeaPNOp11pbKFjz40dsfm9 JcRsAT4ZIIUsBOYBewALpnDdqAJOAMMugCXgZPAQaDd8W6gzhL2mzPTfm RY0PAVGCBYx2mu XYKqAE BJjWcWUEu5sZGlgAGgGNuc4t  dttTxR44fd7zP8Spjd8m2pPFWxxqAH7HiGmJ nVnFmGgF0EtuawfGm64E ODW5vylmAHgOtBlmxOxAmB5jhgpYAaQcHpvlcAU/mwBgA3xYgqtoKXAAaAF O4c1v5nMXHrBBKme2JsCKh3mpu23hzzbTN wbFG4LO9d OO2XQy5/0GsA/YS6aPINOQwy3mLPDYzVtMU50jed/4c4EysjcyAZQTfj2AHvNLOs2mqJgT5LcHQIEr5qMP7orxydcCk4Fvjh2NJT7P/NY4FvVGk82jC6jNaTYaqyDTUz1ASZRIOXDInLqBF8B9YH9UiOmKCa/gPnsSbi3p FZjtYS92Au8BV7bel3sUjlv/BUwH5hE2GPTLOl W78S8ztsvB84ppEywuYvGIauyMZ1Nham0 kgj17V4TgxYBT9N/sF4HNz m6JZH4AAAAASUVORK5CYII='/>

Then your svg would look like this:

badge.svg

<svg fill="none" viewBox="0 0 160 23" width="160" height="23" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                a {
                    display:inline-block;
                    background-color:#FC5200;
                    color:#fff;
                    padding:5px 10px 5px 30px;
                    font-size:11px;
                    font-family:Helvetica, Arial, sans-serif;
                    white-space:nowrap;
                    text-decoration:none;
                    background-repeat:no-repeat;
                    background-position:10px center;
                    border-radius:3px;
                    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1 /AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAUdEVYdENyZWF0aW9uIFRpbWUANi80LzE0kRMgQQAAAN1JREFUOI2VkbENAjEMRb/p6GCDk1iAhhKJil2YgYYBGOJaVqDhJEpuBcQGiI7yUeCgEHwHuIkc/ cXKVJQwAYYdcwEhIOKZ23 BWsHb5E1BDMbXdYusC7AG1D1gsCUuOpvYJOFLwVchSCwKIPAIbKWYFOGgmXTNzCyZdtza1OCH7ae71kk2Mp/8sFE0srbnZmd/H4taSypHUSgmZ0ltd4uHZo5JEn7EExDP8cOLb1vJV07QTO7Jqs/9WWTpD7jKwRsk80X9oMeOnp7z57/1Zisd0nHZPu5gDkwzHo9ADWCdl4uXrJLAAAAAElFTkSuQmCC')
                }
                img {
                    margin-left:2px;
                    vertical-align:text-bottom
                }
            </style>
                <a> Follow me on
                <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAANCAYAAAAE0Vb3AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1 /AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAUdEVYdENyZWF0aW9uIFRpbWUANi80LzE0kRMgQQAAAoZJREFUSIndll9ojXEYx7 vkW1NlGgrWnYu/GcaIvlzYw2llJtJCIkbblwqEq7WtrRE/pyyCKHN8jdTwy7masO2ooULuXHjz9RwzsfF 7zOc17HMTe72FNvv/f3 X2f8zzP7/09v04AaFQaUAXsBrYBi0cg3nobi4apL7axBhhj77 fwECZpNOSVkuaIAlJg5L6JJ2SVCWpOk cl5K SlrmY0tKSXonqTUIgnOxxGZLui2pUlKFpGuSfkp6GgTBHqerl1QjaaykXZK6LK8tQRA8yzpZwDjgIRkbItsuAnfIb2 Ajn9ommPFXDXeaPNOp11pbKFjz40dsfm9 JcRsAT4ZIIUsBOYBewALpnDdqAJOAMMugCXgZPAQaDd8W6gzhL2mzPTfm RY0PAVGCBYx2mu XYKqAE BJjWcWUEu5sZGlgAGgGNuc4t  dttTxR44fd7zP8Spjd8m2pPFWxxqAH7HiGmJ nVnFmGgF0EtuawfGm64E ODW5vylmAHgOtBlmxOxAmB5jhgpYAaQcHpvlcAU/mwBgA3xYgqtoKXAAaAF O4c1v5nMXHrBBKme2JsCKh3mpu23hzzbTN wbFG4LO9d OO2XQy5/0GsA/YS6aPINOQwy3mLPDYzVtMU50jed/4c4EysjcyAZQTfj2AHvNLOs2mqJgT5LcHQIEr5qMP7orxydcCk4Fvjh2NJT7P/NY4FvVGk82jC6jNaTYaqyDTUz1ASZRIOXDInLqBF8B9YH9UiOmKCa/gPnsSbi3p FZjtYS92Au8BV7bel3sUjlv/BUwH5hE2GPTLOl W78S8ztsvB84ppEywuYvGIauyMZ1Nham0 kgj17V4TgxYBT9N/sF4HNz m6JZH4AAAAASUVORK5CYII='/>
                </a>
        </div>
    </foreignObject>
</svg>

Then in your readme, use an <img> tag to render the svg, and enclose it in a <a> tag:

README.md

# test-repo

<a href="https://www.strava.com/athletes/94166049"><img src="badge.svg"></a>

Description of the repo

I've set up this example in this repo: https://github.com/bertrandmartel/css-readme