GitHub README.md 파일에 사용자 정의 CSS 스타일을 어떻게 추가할 수 있나요?

Barbara Streisand
풀어 주다: 2024-11-03 13:37:30
원래의
535명이 탐색했습니다.

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

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에서

예를 들어 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 저장소의 모양과 상호 작용을 개인화할 수 있습니다. .

위 내용은 GitHub README.md 파일에 사용자 정의 CSS 스타일을 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿