如何将自定义 CSS 样式添加到我的 GitHub README.md 文件？

在 GitHub 存储库中使用 CSS 自定义 Readme.md 文件

在 GitHub 存储库中，用户经常会遇到难以识别控制 CSS 文件的困难存储库根目录下的 readme.md 文件的样式。标准假设是 .github/github.css 文件用于此目的，但尝试修改此文件通常不会对 markdown 产生可见的更改。

实际上，GitHub 存储库不提供对自定义的直接支持控制 readme.md 文件的 CSS 文件。作为替代方案，可以利用涉及 HTML、CSS 和 SVG 的巧妙解决方法。

要实现自定义 CSS，请按照以下步骤操作：

1. 创建 SVG 文件： 创建一个空的 SVG 文件。
2. 包含 HTML 和 CSS： 在 SVG 文件内，将所需的 HTML 和 CSS 内容嵌入到 中。
3. 在 Readme.md 中嵌入 SVG： 在 GitHub README 中，使用 嵌入 SVG 文件。

例如，要使用 CSS 更改 h1 文本的颜色，请创建一个名为“custom.svg”的文件，其中包含以下内容：

<code class="svg"><svg width="0" height="0">
  <foreignObject width="100%" height="100%">
    <style>
      h1 {
        color: red;
        animation: myanimation 2s infinite;
      }

      @keyframes myanimation {
        from {
          color: red;
        }
        to {
          color: yellow;
        }
      }
    </style>
    <h1>Hello world!</h1>
  </foreignObject>
</svg></code>

在readme.md 文件，使用以下方式嵌入 SVG：

<code class="markdown"><img src="custom.svg"></code>

此解决方法有效地允许在 readme.md 文件中包含自定义 CSS 和动画，使用户能够个性化其 GitHub 存储库的外观和交互性.

以上是如何将自定义 CSS 样式添加到我的 GitHub README.md 文件？的详细内容。更多信息请关注PHP中文网其他相关文章！