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

Question

我在验证.css文件的名称时遇到麻烦，该文件将修改Github存储库根目录下的readme.md文件。

我相信是：

.github/github.css

但这似乎对降价没有任何作用。有人知道这是不正确的吗？

Answer 1

您可以<foreignObject>在 svg 文件内的标签内添加一些 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 嵌入到<foreignObject>svg 内的标记中，如下所示：

例子.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 嵌入您的自述文件中，它应该使用应用的 CSS 样式呈现您的 HTML：

自述文件

# My GitHub README

Welcome to my README!

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

另一个例子和来源

Answer 2

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

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

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

您还可以使用之类的东西diff，json，html，js并css影响到文本颜色。