GitHub README.md ファイルにカスタム CSS スタイルを追加するにはどうすればよいですか?

GitHub リポジトリの CSS を使用した Readme.md ファイルのカスタマイズ

GitHub リポジトリでは、ユーザーは、管理する CSS ファイルを特定するのが困難になることがよくあります。リポジトリのルートにある readme.md ファイルのスタイル。標準的な想定では、.github/github.css ファイルがこの目的を果たすものですが、このファイルを変更しようとしても、通常、マークダウンに目に見える変更は生じません。

実際には、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>

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

この回避策により、readme.md ファイル内にカスタム CSS とアニメーションを効果的に含めることができるようになり、ユーザーが GitHub リポジトリの外観と対話性をカスタマイズできるようになります。 .

以上がGitHub README.md ファイルにカスタム CSS スタイルを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。