在 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

Answer 1

您在style屬性中使用 CSS，GitHub 不支持。

當 GitHub 呈現 HTML 時，無論是來自 Markdown、AsciiDoc、另一種文本格式還是 HTML 本身，它都會清理 HTML 以刪除 CSS 和 JavaScript。 這是因為這兩種格式可用於導致各種問題：

• 在各種背景和大小下，內容可能難以閱讀，這可能會導致可訪問性問題。 法律要求 GitHub 可以訪問。
• 內容可能會嘗試隱藏自己，以包含對計算機（例如搜索引擎）可見但對人類不可見的垃圾內容或濫用內容。 GitHub 不想在其平台上允許垃圾郵件和濫用。
• 內容可能會嘗試加載代碼或跟蹤惡意或跟蹤用戶的內容，而 GitHub 不想托管這些內容。

GitHub 有一個 Content-Security-Policy 標頭，即使清理失敗，它也會要求瀏覽器強制執行其中的許多策略。

如果您的徽章是純圖像，甚至是 SVG，那么它可以正確顯示，但只要您嘗試使用 CSS 或 JavaScript，它就行不通。

Answer 2

上面的答案是正確的， style和script標簽將在渲染之前被剝離。 但是有一個技巧：你可以使用一個支持<foreignObject>標簽的 svg 來渲染 html 並且它支持<style> 。

查看這個使用這個技巧來渲染 css 的 repo，這個 repo 還提供了額外的解釋

由於您的 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 看起來像這樣：

徽章.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>

然后在你的自述文件中，使用<img>標簽來呈現 svg，並將其包含在一個<a>標簽中：

自述文件

# test-repo

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

Description of the repo

我在這個 repo 中設置了這個例子： https : //github.com/bertrandmartel/css-readme