Github 存储库中 readme.md 的自定义 css 文件

Posted 2023-02-19

【中文标题】Github 存储库中 readme.md 的自定义 css 文件

【英文标题】：Custom css file for readme.md in a Github repo

【发布时间】：2019-01-28 02:17:29

【问题描述】：

我无法验证 .css 文件的名称，该文件将修改 Github 存储库根目录下的 readme.md 文件。

我相信是：

.github/github.css

但这似乎对 Markdown 没有任何影响。有谁知道这是否不正确？

【问题讨论】：

是什么让您认为这甚至是可能的？ GitHub 不提供任何机制来使用您自己的 CSS 文件。

我在项目中看到过github.css文件，相信是为了修改项目的markdown。 Github 本身负责在渲染 markdown 之前加载 CSS。当然可以。

"Github 本身负责在渲染 markdown 之前加载 CSS。当然可以。"你能举个例子吗？还是相关文件？我已经使用 GitHub 将近十年了，但我从未见过这种情况。我非常确信没有任何机制可以为 README 渲染提供您自己的 CSS 文件。

你能指出一个我没有接受的好答案吗？有一个关于删除 git 分支但我不接受答案 b/c 我没有亲自尝试任何一个答案。

【参考方案1】：

出于安全原因，GitHub 不允许 CSS 通过 CSS 影响 README.md 文件（就像您可以将 CSS 注入自述文件中一样，您可以轻松发起网络钓鱼攻击）。这包括通过<link rel> 引用的样式表和<style> 使用的内联样式。

自述文件采用 markdown 语法，因此可以进行 一些 样式设置，例如通过占位符图像添加颜色，就像 *** 上的这里一样。例如，您可以使用以下内容添加红色方块：

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

您还可以使用diff、json、html、js 和css 等内容来影响文本着色。

【讨论】：

有这方面的官方文档吗？特别是在 github 渲染的 README.md 文件中支持内联 css 的程度（如果有的话）。

@SamTuke 这记录在 github/Markup 项目中（特别是第 2 步）。他们曾经链接到代码，但他们现在显然使用了不同的东西，这是不公开的。根据#1246，允许的元素和属性列表是here。具体来说，样式标签根本不在白名单上。他们永远不会被允许，并且将永远被剥离。

我认为这个答案不正确。 I'm able to specify styles! 我只是不知道如何引用样式表而不是将其包含在内。这就是我需要帮助弄清楚的。我不是 CSS/HTML 专家。

我可能弄错了。现在试图弄清楚这一点。我的浏览器中的 Markdown 查看器允许我做 CSS 样式的东西，但是一旦我将更改推送到 GitHub，Github 似乎确实拒绝了它。 :(

是的，这很糟糕。 CSS 似乎被明确删除，而不是由 Github 呈现。请参阅：github.community/t/…。

【参考方案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> 标记中，如下所示：

example.svg

<svg fill="none" viewBox="0 0 400 400"   xmlns="http://www.w3.org/2000/svg">
    <foreignObject  >
        <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 嵌入到您的 README 中，它应该使用应用的 CSS 样式呈现您的 HTML：

README.md

# My GitHub README

Welcome to my README!

<div align="center">
    <img src="example.svg"   >
</div>

another example & source

【讨论】：

非常有趣。