Github 存储库中 readme.md 的自定义 css 文件

Question

我无法验证 .css 文件的名称，该文件将修改 Github 存储库根目录下的 readme.md 文件。

我相信它是：

 .github/github.css

但这似乎对 Markdown 没有任何作用。有谁知道这是否不正确？

原文由 user5047085 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

出于安全原因，GitHub 不允许 CSS 通过 CSS 影响 README.md 文件（就像您可以将 CSS 注入自述文件中一样，您可以轻松发起网络钓鱼攻击）。这包括通过 <link rel> 引用的样式表和与 <style> 一起使用的内联样式。

自述文件采用 markdown 语法，因此可以进行 一些 样式设置，例如通过占位符图像添加颜色，就像 StackOverflow 上的这里一样。例如，您可以添加红色方块具有以下内容：

 - ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`

You can also make use of things like diff , json , html , js and css to affect text染色。

原文由 Obsidian Age 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在 svg 文件的 <foreignObject> 标记中添加一些 HTML（实际上是 XHTML）和 CSS，然后将其嵌入到 <img> 标记中的 GitHub README 中。

这是一个简单的 CSS 动画，可以改变 h1 文本的颜色：

 h1 {
  color: red;
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}

 <h1>Hello world!</h1>

您可以将样式和 HTML 嵌入到 svg 内的 <foreignObject> 标记中，如下所示：

例子.svg

 <svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            h1 {
                color: red;
                animation: mymove 2s infinite;
            }

            @keyframes mymove {
                from {
                    color: red;
                }
                to {
                    color: yellow;
                }
            }
            </style>
            <h1>HELLO WORLD!</h1>
        </div>
    </foreignObject>
</svg>

然后，最后您可以使用 <img> 标签将 svg 嵌入到您的 README 中，它应该使用应用的 CSS 样式呈现您的 HTML：

自述文件.md

 # My GitHub README

Welcome to my README!

<div align="center">
    <img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>

另一个例子和来源

原文由 hkennyv 发布，翻译遵循 CC BY-SA 4.0 许可协议