Github标记语言 - 无法通过内联CSS和类更改任何样式

Question

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

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

以及类：

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

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

以及Markdown语法：

<font size=1>bla</font>

它们都不起作用。在控制台中，DOM 就像这样：

<div>bla</div>

默认情况下，样式总是由Markdown定义的：

.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>，但都没用。

附：在 VS Code 的 Github Markdown 预览里是正常显示的。

- legenddaniel

Answer 1

由于安全问题，这是不可能的。

实际上，这与Markdown没有关系，而是GitHub对所有用户提供的标记进行后处理的结果，如github/markup中所述。将Markdown转换为HTML发生在第一步，这会保留您的标签和属性。但需要注意的是第二步：

2. HTML经过消毒，积极删除可能对您及其亲人造成伤害的内容，例如

- Waylan

---

这实际上并不准确：你不能在Markdown中添加CSS，但是你可以轻松地将一个style.css文件放入你的代码库中，因为转换过程只会在代码库中不存在该文件时才创建该样式表。 - Mike 'Pomax' Kamermans

是的，你可以创建一个CSS文件，但是你不能链接到它。因此，它对你渲染的Markdown没有任何影响。 - Waylan

Answer 2

这可以通过提供自己的style.css文件来轻松完成，嵌套在./assets/css/style.css中（这是Github在构建Markdown时指向的样式表URL）。

请注意，如果您想要“添加”任何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 */


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;
}

...

- Mike 'Pomax' Kamermans

---

./assets/css/style.css 这个在哪里有记录？我以前从来没见过相关的内容。这个选项存在多久了？ - Waylan

从一开始就基本上是这样，因为 GitHub 在其 github.io 页面渲染中使用 Jekyll，而这是一个标准的 Jekyll 功能。但请注意，这仅适用于 gh-pages，_不适用_于您在 GitHub 存储库中查看 .md 文件时：那里只是普通的 markdown，而不是构建自 .md 源文件的网页。 - Mike 'Pomax' Kamermans

啊，但我的理解是这个问题是关于托管在github.com上的Markdown文档（例如README.md），而不是GitHub Pages。 - Waylan

在那种情况下，我误解了问题 - Github会自动托管用户名.github.io域上的.md文件，这就是当人们谈论样式化Markdown时我所考虑的内容（因为纯Markdown技术上根本不支持CSS，只有通过md转换器来去除markdown中的HTML后它才能正常工作）。 - Mike 'Pomax' Kamermans