Display HTML badge on GitHub README

user_10351382 0
Viewed 548

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

github html
2 Answers

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.

user_87054320

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

user_26143640
Related