Github markdown - 无法通过 inline-css 和 class 更改任何样式

Question

我尝试更改字体大小和行高但失败了。我试过内联样式：

<div style="font-size: 12px; line-height: 12px;")>bla</div>

和class：

<style>
.footnote {font-size: 12px !important; line-height: 12px !important;}
</style>

<div class="footnote">bla</div>

和降价语法：

<font size=1>bla</font>

None 他们的工作。在 Concole 中，DOM 就像：

<div>bla</div>

并且样式始终由默认降价定义：

.markdown-body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 16px;
    line-height: 1.5;
}

好像我的设置没有生效，连class都没有添加

我还尝试了其他一些标签，例如 <p> <span> 但没有用。

P.S。在 VS Code Github Markdown 预览中它正确显示。

Answer 1

出于安全考虑，这是不可能的。

事实上，它与 Markdown 无关，而是 GitHub 的 post- 处理所有用户提供的标记，如 github/markup 中所述。 Markdown 到 HTML 的转换发生在第 1 步中，这使您的标签和属性保持不变。但是，值得注意的是第 2 步：

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

A previous version of that document linked to the code 用于他们当时使用的 HTML 消毒剂。目前尚不清楚他们是否仍在使用该消毒剂或其他消毒剂。但是，对该消毒剂的代码进行审查可以清楚地看出，他们正在去除所有用户定义的样式。如果他们已更新到新的消毒剂，则可能会变得更加严格。

总之，很明显 GitHub 不允许在其网站上使用任何用户定义的样式。

Answer 2

这可以通过向 Github 提供您自己的 style.css 文件来轻松完成，该文件嵌套为 ./assets/css/style.css（这是在 HTML Github 基于你的 markdown 构建的源代码）。

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

例如

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

...

/* And then your own CSS */


img {
  border: 1px solid #444;
}

@font-face {
  font-family: BetterHeader;
  src: url(...) format("WOFF2");
}

h1,h2,h3,h4,h5,h6 {
  font-family: BetterHeader, Helvetica, Arial, sans;
}

...

Github markdown - 无法通过 inline-css 和 class 更改任何样式

Github markdown - cannot change any style by inline-css and class

markdown

github-flavored-markdown