将 Github markdown 语言与 CSS 混合使用答案

【问题标题】：Mix Github markdown language with CSS将 Github markdown 语言与 CSS 混合使用
【发布时间】：2016-10-26 11:46:52
【问题描述】：

如何将 CSS 添加到 github 的 markdown 语言中？

我已经能够通过在 html 标签中使用 style 属性来做到这一点，例如：

<p style="text-align: center;">This is some random text</p>

但如果我将 css 移到开头，例如：

<style>
  p {
    text-align: center;
  }
</style>

<p>This is some random text</p>

Github 无法识别，只是将 css 代码写入屏幕。

我正在使用 Atom，并且 Markdown Preview 包实际上可以正确识别这一点，即使在远程存储库上它显示错误。 Google Chrome 扩展 Markdown Preview Plus 也是如此。

有没有办法做到这一点？在 html 标签中写 css 感觉完全不对。

【问题讨论】：

标签： css github-flavored-markdown

【解决方案1】：

After GitHub converts Markdown to HTML,

对 HTML 进行清理，积极删除可能伤害您和您的家人的内容，例如 script 标签、内联样式和 class 或 id 属性。有关完整的白名单，请参阅 sanitization filter。

style 标签不包含在 GitHub 的白名单中，因此被删除。我真的很惊讶内联 style 属性有效；它们似乎也不包含在白名单中，并且在上一段中明确提及。

无论如何，GitHub 不允许在 Markdown 中包含任意 HTML。

【讨论】：

【解决方案2】：

您可以通过以下方式完成您正在寻找的内容。正如另一个答案所述，Github 不支持这种语法，但是如果您将此 Markdown 弹出到另一个预览工具中，您会看到项目符号已从此列表中删除。

|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|

Signal	Description
DOP	Horizontal Dilution of precision
FIX	GPS Fix Quality indicator: 0 - fix not available 1 - GPS fix

【讨论】：

【解决方案3】：

您可以通过向 CSS Github 提供您自己的 style.css 文件，嵌套为 ./assets/css/style.css（这是在 Github 根据您的 markdown 构建的 HTML 源代码中指向的样式表 URL）来简单地覆盖 CSS Github 使用的内容。

请注意，如果您只想“添加”任何 CSS，则需要先复制 Github 的 CSS，以便创建具有相同内容的文件之后放置自己的规则.您可以在任何 view-source:https://username.github.io/repo-name/assets/css/style.css 上找到此内容，其中用户名和 repo-name 明显替换。

例如

/* CSS as copied from github's own stylesheet here, which is all one line anyway */

...

/* And then your own CSS */

/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }

/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }

/* let's also give images a subtle border */
img { border: 1px solid #DDD; }

【讨论】：