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

Question

I try to change font size and line height but failed. I've tried inline style:

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

and class:

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

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

and markdown syntax:

<font size=1>bla</font>

None of them work. In Concole the DOM is just like:

<div>bla</div>

and styles are always defined by default 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;
}

Seems my setting takes no effect and even class is not added.

I also tried some other tags like <p> <span> but not working.

P.S. In VS Code Github Markdown preview it shows properly.

Answer 1

This is not possible due to security concerns.

In fact, it is not related to Markdown, but rather GitHub's post-processing of all user provided markup, as documented in github/markup. The conversion of Markdown to HTML happens in step 1, which leaves your tags and attributes intact. However, of note is step 2:

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 for the HTML sanitizer they were using at the time. Whether they are still using that sanitizer or a different one is currently unknown. However, a review of the code for that sanitizer makes it clear that they are striping out all user defined styles. If they have updated to a new sanitizer, it is likely that it has been made more strict.

In conclusion, it is clear that GitHub does not allow any user-defined styles to be used on their site.

Answer 2

This can be trivially done by providing Github with your own style.css file, nested as ./assets/css/style.css (which is the stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).

Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.

E.g.

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

...