I am trying to use sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style as a CSS for my markdown documents. I have read the manual, and the posts on how to install and use CSS, but I cannot seem to have the files render using the stylesheet.
Here is a screenshot of the settings showing that they are enabled.
Can someone help me figure out what I’m doing wrong?
That stylesheet is not for generic use with Markdown. It is using specific classes that are not present in the simple construction of Markdown.
Removing the .markdown- prefix from the elements lets it work better but whether it looks good or not is subjective.
This is after modifying the stylesheet and giving the body some breathing room…
And the modified stylesheet: sindre-markdown.css.zip (5.6 KB)
And we’ve been over a similar issue three years ago:
Just a reminder that hoping an arbitrary CSS will render MD is nothing but a hope. It’s really trivial to check what is going on:
And admittedly, my edit is down-and-dirty. Probably 90% of the stylesheet could be excised 
@ssheth From the ReadMe of the page you linked:
Usage
Import the
github-markdown.cssfile and add amarkdown-bodyclass to the container of your rendered Markdown and set a width for it. GitHub uses980pxwidth and45pxpadding, and15pxpadding for mobile.
(As BLUEFROG says, this is not a generic stylesheet. It assumes that everything is nested in some HTML container with the class markdown-body, i.e. <div class="markdown-body">)
@BLUEFROG I actually looked at this exact style sheet a while back. I think it makes more sense to remove the full .markdown-body instead of just .markdown- for almost all of the selectors..
Thank you for helping with this. My limited technical skills have resulted in my inability to troubleshoot this.
Good pointers for me to keep in mind for next time. Thank you.
Can you explain why you need to remove the prefix?
CSS follows the format:
selector {
attribute: value;
}
Every selector in the stylesheet targets children of some HTML element with the class markdown-body, like I said earlier. That’s what “the prefix” means, it is a class selector.
(If that doesn’t make any sense to you, I suggest you spend 15 minutes reading about the basics of HTML.)
Also, @chrillek wrote a great beginner’s guide to CSS here:
It’s not about a “prefix”. It is about a selector that does not make sense unless you stuff your whole markdown in an element with class markdown-body. Which hardly anyone does, except perhaps the GitHub infrastructure.
Then there are other reasons why you (or anyone) should use this kind of CSS in 2025:
font-size: 16px (or 11px for kbd): That has not made sense for a long, long time. First, a px is not a fixed unit but depends on device resolution and retina mode. Second, users have an interest and a right to set their preferred font size in their browser. If I am myopic and decide to have 24px as my default font size, who is the CSS creator to tell me that I have to buy new glasses just to be able to read their 16px stuff?.markdown-body h1:hover .anchor .octicon-link:before, Well, where do you see the class .oction-link? What sense does a :hover selector make if one doesn’t check if the current device even supports hovering?.markdown-body figure { display: block;} Apart from the useless class selector, what is the default display value of figure? Right, it is a block elementbox-sizing: content-box settings strewn about instead of setting it once and for all for *.Just some things that sprung into my face.
This thing is 7 years old, and it shows (but I don’t think that it was particularly well-written even at that time). Instead of blindly jumping onto an unknown CSS bandwagon just because it says “GitHub”, it makes a lot more sense to craft the CSS one wants and needs. What DT generates from MD, is a lot simpler than GitHub caters for.
I second that. CSS is a beast, and one should not expect it to “simply work”.
Thank you for this explanation.
Are there open source CSS examples that you recommend that would be useful to look at to understand what good should look like and how to replicate one for my specific use cases?
Check the post I linked. Chrillek even put all of it on Github so it’s easy to download as a complete package. Including a basic style sheet with extensive comments.
For a quick edit to get the basic functionality, removing the prefix is sufficient. It’s literally a 1 minute edit.
Yes, sorry, I wasn’t trying to nag 
No worries. As I noted to @chrillek…
And admittedly, my edit is down-and-dirty. Probably 90% of the stylesheet could be excised
