Github repo 中 readme.md 的自定義 css 文件

Question

我無法驗證.css文件的名稱，該文件將修改readme.md存儲庫根目錄下的 readme.md 文件。

我相信它是：

.github/github.css

但這似乎對 Markdown 沒有任何作用。 有誰知道這是否不正確？

Answer 1

出於安全原因，GitHub 不允許 CSS 通過 CSS 影響README.md文件（就像您可以將 CSS 注入自述文件，您很容易發起網絡釣魚攻擊）。 這包括通過<link rel>引用的樣式表和與<style>一起使用的內聯樣式。

自述文件采用 Markdown 語法，因此可以進行一些樣式設置，例如通過占位符圖像添加顏色，就像在 StackOverflow 上一樣。 例如，您可以添加紅色方塊具有以下內容：

- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`

您還可以使用diff 、 json 、 html 、 js和css來影響文本着色。

Answer 2

您可以在 svg 文件內的<foreignObject>標簽內添加一些 HTML（實際上是 XHTML）和 CSS，然后將其嵌入 GitHub README 中的<img>標簽內。

這是一個簡單的 CSS 動畫，用於更改 h1 文本的顏色：

 h1 { color: red; animation: myanimation 2s infinite; } @keyframes myanimation { from { color: red; } to { color: yellow; } }

 <h1>Hello world!</h1>

您可以將樣式和 HTML 嵌入到 svg 內的<foreignObject>標記中，如下所示：

例子.svg

<svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            h1 {
                color: red;
                animation: mymove 2s infinite;
            }

            @keyframes mymove {
                from {
                    color: red;
                }
                to {
                    color: yellow;
                }
            }
            </style>
            <h1>HELLO WORLD!</h1>
        </div>
    </foreignObject>
</svg>

然后，最后您可以使用<img>標簽將 svg 嵌入您的自述文件中，它應該使用應用的 CSS 樣式呈現您的 HTML：

自述文件

# My GitHub README

Welcome to my README!

<div align="center">
    <img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>

另一個例子和來源

Answer 3

將圖像包裝在標簽中，如下所示

<div>
<img  src="/images/count.png" width="250" >  &nbsp; 
<img  src="/images/home.png" width="250">  &nbsp;
<img  src="/images/profile.png" width="250">  &nbsp;
</div>

注意： images文件夾和readme在項目的根目錄下