在GitHub README上显示HTML徽章。

Question

我有一个超链接的Strava徽章，我想将其嵌入GitHub README中。然而，在GitHub上它不能像在线HTML编辑器（例如https://html-online.com/editor/）上一样显示。我不确定这个问题是否特定于GitHub Flavored Markdown (GFM)格式，因此我可能需要将我的HTML源代码转换为GFM版本。问题出在哪里？

以下是我直接从Strava配置文件中复制的Strava徽章的HTML源代码：

<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>

当前错误输出：
https://github.com/hmhuang0501/Strava-Tool/blob/master/README.md

该文本描述了当前错误输出的链接。请注意，这是一个HTML格式的文本，其中包含一个段落和一个超链接。

- livemyaerodream

Answer 1

上面的答案是正确的，style和script标签将在渲染之前被剥离。但有一个技巧：您可以使用支持<foreignObject>标签用于呈现HTML并支持<style>的SVG。

请查看此存储库，该存储库使用此技巧来呈现CSS，该存储库还提供了额外的说明。

由于您的HTML代码使用外部图像，因此您需要将这些图像转换为base64以直接嵌入到SVG中，例如CSS：

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

"并且对于 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='/>

然后你的svg会像这样：

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>

然后在你的readme中，使用<img>标签来呈现SVG，并将其包含在<a>标签中：

README.md

# test-repo

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

Description of the repo

我在这个仓库中设置了一个示例：https://github.com/bertrandmartel/css-readme

- Bertrand Martel

Answer 2

您正在使用 style 属性中的 CSS，但 GitHub 不支持此功能。

当 GitHub 渲染 HTML 时，无论是来自 Markdown、AsciiDoc、其他文本格式还是 HTML 本身，它都会对 HTML 进行清理以删除 CSS 和 JavaScript。这是因为这两种格式可能会引起各种问题：

- 内容可能在各种背景和大小上难以阅读，这可能会导致可访问性问题。GitHub 必须符合法律要求的可访问性标准。 - 内容可能试图隐藏自己，包括垃圾内容或滥用内容，这些内容对计算机（如搜索引擎）可见，但对人类不可见。GitHub 不希望在其平台上允许垃圾邮件和滥用行为。 - 内容可能尝试加载恶意代码或跟踪内容，这些内容 GitHub 不想托管。

GitHub 有一个 Content-Security-Policy 标头，即使清理失败，也要求浏览器执行许多这些策略。

如果您的徽章是纯图片，甚至是 SVG，那么它可以正确显示，但只要您试图使用 CSS 或 JavaScript，它就不起作用。

- bk2204

---

谢谢您的解释。那么在这种情况下，在GitHub README上实现所需的结果是不可能的吗？ - livemyaerodream

是的，如果您正在使用HTML和CSS进行渲染。如果Strava提供给您一个简单的图像和链接，那么您可以这样做。 - bk2204