内部 CSS 代码未在 GitHub 页面上呈现。有没有办法来解决这个问题？答案

【问题标题】：Internal CSS code not rendering on GitHub pages. Is there a way to fix this?内部 CSS 代码未在 GitHub 页面上呈现。有没有办法来解决这个问题？
【发布时间】：2019-09-02 14:04:53
【问题描述】：

处理 Markdown 文件并希望对其进行适当的设计，但是当我在内部实现 CSS 代码时（在内部执行它，因为这是我们目前正在学习的内容）它在 markdown 预览中正确设置样式，但在我推送时却没有它到 GitHub。我希望在实际的 GitHub readme.md 文件中呈现我的样式

它在降价预览中的样式： https://i.imgur.com/ttk8ZzB.jpg“降价预览”

它在 GitHub 上的呈现方式： https://i.imgur.com/mdRdYec.jpg“Github 渲染”

我尝试了许多不同的方式来编写 CSS 代码以查看它是否可以在 GitHub 上正确呈现，但无济于事。

这是我写在 markdown 文件中的 css 样式表。

<head>
    <style>
        ul.navList {background-color: rgb(245,222,179)}
        ul.navList {text-decoration-line: underline}
        section {background-color: rgb(245,222,179)}
        section {border: solid black}
        section {padding: 10px}
        nav {background-color: rgb(245,222,179)}
        h2:first-letter {color: blue}
    </style>
</head>

希望它能够正确呈现我在 GitHub 上的代码中给出的样式，就像在降价预览中一样。

【问题讨论】：

能否提供完整的html文件？
你是通过https://github.com/username/reponame还是https://username.github.io/reponame/打开页面？

标签： html css github

【解决方案1】：

GitHub 不允许在 Markdown 文件中使用 <style> 标签，因为它可能会修改 GitHub 本身的外观。在预览中，它只为您更改。所以 GitHub 不会转义或剥离 <style> 标签。但是一旦你推送它，访问该页面的每个人都会看到新样式。这就是为什么它是不允许的。

您可以自己检查。渲染引擎开源：
https://github.com/github/markup

或查看spec 了解更多信息。
它有一整节关于转义的 HTML 代码：
https://github.github.com/gfm/#disallowed-raw-html-extension-

我建议将实际的.html 文件与GitHub Pages 结合使用（并且没有markdown-to-html 静态站点生成器）而不是markdown。

这样您就可以完全控制您的 HTML 文件，并且可以根据自己的喜好应用样式。

【讨论】：