40

I am having trouble verifying the name of the .css file that will modifying the readme.md file at the root of Github repo.

I believe it is:

.github/github.css

but that doesn't seem to do anything to the Markdown. Does anyone know if this is incorrect?

Paulo Mattos
  • 18,845
  • 10
  • 77
  • 85
  • 1
    What makes you think this is even possible? GitHub doesn't provide any mechanism to use your own CSS file. – ChrisGPT was on strike Aug 21 '18 at 20:39
  • 1
    I have seen github.css files in projects, which I believe are designed to modify the markdown of the project. Github itself is responsible for loading the CSS before rendering the markdown. Certainly possible. –  Aug 21 '18 at 20:39
  • "Github itself is responsible for loading the CSS before rendering the markdown. Certainly possible." Can you provide an example? Or relevant documentation? I've been using GitHub for almost a decade and I've never seen this. I'm pretty confident that there is no mechanism for providing your own CSS file for README rendering. – ChrisGPT was on strike Aug 21 '18 at 20:41
  • Can you point me to a good answer that I have not accepted? there was one regarding deleting git branches but I didn't accept an answer b/c I didn't personally try either of the answers. –  Aug 21 '18 at 22:27

3 Answers3

52

You can add some HTML (actually XHTML) and CSS inside a <foreignObject> tag inside of an svg file and then embed that inside of an <img> tag in your GitHub README.

This is a simple animation in CSS that changes the color of the h1 text:

h1 {
  color: red;
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}
<h1>Hello world!</h1>

You can embed the style and HTML into a <foreignObject> tag inside of an svg like so:

example.svg

<svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            h1 {
                color: red;
                animation: mymove 2s infinite;
            }

            @keyframes mymove {
                from {
                    color: red;
                }
                to {
                    color: yellow;
                }
            }
            </style>
            <h1>HELLO WORLD!</h1>
        </div>
    </foreignObject>
</svg>

Then, lastly you can embed the svg in your README, using an <img> tag and it should render your HTML with the applied CSS styles:

README.md

# My GitHub README

Welcome to my README!

<div align="center">
    <img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>

another example & source

kennyvh
  • 2,526
  • 1
  • 17
  • 26
43

GitHub does not allow for CSS to affect README.md files through CSS for security reasons (as if you could inject CSS into a ReadMe, you could easily launch a phishing attack). This includes both stylesheets referenced through <link rel> and inline styles used with <style>.

The readmes are in markdown syntax, so some styling can be done, such as adding colours through placeholder images, just like here on StackOverflow. For example, you can add red squares #f03c15 with the following:

- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`

You can also make use of things like diff, json, html, js and css to affect text colouring.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • 9
    Is there official documentation on this? Particularly to what degree, if any, inline css is supported in github-rendered README.md files. – Sam Tuke Apr 12 '19 at 09:43
  • awesome, exactly what I was looking for – Artem Medvedev Apr 30 '19 at 09:35
  • 3
    @SamTuke this is documented in the [github/Markup](https://github.com/github/markup) project (specifically step 2). They used to link to the code, but they are apparently using something different now, which is not public. As per [#1246](https://github.com/github/markup/issues/1246) the list of allowed elements and attributes is [here](https://gist.github.com/kivikakk/622b5dcf395e26c49e2334f0eb19e6f9). Specifically, style tags are not on the whitelist at all. They are never allowed and will always be stripped out. – Waylan Jun 13 '20 at 21:49
  • 1
    I don't think this answer is correct. [I'm able to specify styles!](https://stackoverflow.com/a/62383408/4561887) I just don't know how to reference a style sheet instead of including it inline is all.... That's what I need help to figure out. I'm no CSS/HTML expert. – Gabriel Staples Sep 07 '20 at 03:48
  • 3
    I may be mistaken. Trying to figure this out now. My Markdown viewer in my browser allows me to do CSS style stuff, but Github does indeed seem to be rejecting it once I push a change to GitHub. :( – Gabriel Staples Sep 07 '20 at 04:07
  • 1
    Yeah this sucks. CSS seems to be explicitly removed and not rendered by Github. See: https://github.community/t/github-flavored-markdown-doesnt-render-css-styles-inside-a-html-block/126258/2?u=electricrcaircraftguy. – Gabriel Staples Sep 07 '20 at 04:16
  • If you see my answer below, there's a kind of "hacky" way to get CSS to be rendered by embedding HTML in a [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) element – kennyvh Apr 29 '21 at 16:10
-1

Wrap the images in a tag as shown below

<div>
<img  src="/images/count.png" width="250" >  &nbsp; 
<img  src="/images/home.png" width="250">  &nbsp;
<img  src="/images/profile.png" width="250">  &nbsp;
</div>

Note: the images folder and the readme are in the root directory of the project

jomobrain1
  • 9
  • 3