Maison >interface Web >tutoriel CSS >Comment puis-je ajouter un style CSS personnalisé à mon fichier GitHub README.md ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 13:37:30678parcourir

How can I add custom CSS styling to my GitHub README.md file?

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 tag.
  3. Intégrer SVG dans Readme.md : Dans le README GitHub, intégrez le fichier SVG à l'aide d'un 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"><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>

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

<code class="markdown"><img src="custom.svg"></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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn