CODEWITHSUNDEEP
cssgithub-flavored-markdown
Tirafesi
Tirafesi

Reputation: 1479

Mix Github markdown language with CSS

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.

Upvotes: 1

Views: 5610

Answers (3)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

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

Upvotes: 1

Nate Anderson
Nate Anderson

Reputation: 867

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
    		•

    Upvotes: 0

    Chris
    Chris

    Reputation: 136968

    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.

    Upvotes: 3

    Related Questions