Question

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

我相信是：

.github/github.css

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

Answer 1

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

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

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

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

Answer 2

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

这是一个简单的 CSS 动画，用于更改 h1 文本的颜色：

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

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

<h1>Hello world!</h1>

您可以像这样将样式和 HTML 嵌入到 svg 内的 <foreignObject> 标记中：

example.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：

README.md

# My GitHub README

Welcome to my README!

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

another example & source

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

2 个答案: