Mix Github markdown language with CSS

Question

How can I add CSS to github's markdown language?

I've been able to do so by using the style property inside html tags, like:

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

But if I move the css to the beginning, like:

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

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

Github doesn't recognize it, and just writes to the screen the css code.

I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.

Is there a way to do this? Writing css within html tags just feels plain wrong.

Supremacy

Answer 1

After GitHub converts Markdown to HTML,

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. See the sanitization filter for the full whitelist.

style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.

In any case, GitHub does not permit arbitrary HTML to be included in Markdown.

Index

Answer 2

Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.

|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

Antimatter

Answer 3

You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is 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 */

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

Mateo