如何將自訂 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中文網其他相關文章！