Comment puis-je ajouter un style CSS personnalisé à mon fichier GitHub README.md ?

Personnalisation du fichier Readme.md avec CSS dans les dépôts GitHub

Dans les référentiels GitHub, les utilisateurs rencontrent souvent des difficultés à identifier le fichier CSS qui régit le style du fichier readme.md à la racine du référentiel. L'hypothèse standard est que le fichier .github/github.css sert à cet effet, mais les tentatives de modification de ce fichier ne génèrent généralement aucune modification visible de la démarque.

En réalité, les dépôts GitHub ne fournissent pas de prise en charge directe des modifications personnalisées. Fichiers CSS qui contrôlent les fichiers readme.md. Comme alternative, vous pouvez exploiter une solution de contournement ingénieuse impliquant HTML, CSS et SVG.

Pour implémenter du CSS personnalisé, suivez ces étapes :

1. Créez un fichier SVG : Créez un fichier SVG vide.
2. Incluez HTML et CSS : À l'intérieur du fichier SVG, intégrez le contenu HTML et CSS souhaité dans un <foreignObject> tag.
3. Intégrer SVG dans Readme.md : Dans le README GitHub, intégrez le fichier SVG à l'aide d'un <img> balise.

Par exemple, pour modifier la couleur du texte h1 à l'aide de CSS, créez un fichier nommé "custom.svg" avec le contenu suivant :

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

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

Dans le readme.md, intégrez le SVG en utilisant :

<code class="markdown">&lt;img src=&quot;custom.svg&quot;&gt;</code>

Cette solution de contournement permet efficacement l'inclusion de CSS et d'animations personnalisés dans le fichier readme.md, permettant aux utilisateurs de personnaliser l'apparence et l'interactivité de leurs référentiels GitHub. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!