GitHub:

This project:

.markdown-body .octicon {
  font: normal normal normal 16px/1 octicons-anchor;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Difference is octicons vs octicons-anchor.

Including both I get something like this

Sorry, I forgot to verify this before you you released the latest tag. The other guy said it was working, so I overlooked this verification. Mismatch is marked below. Either can be used, but ideally, since this is not the full octicons set, some variant of the name would be more appropriate. Not sure if that makes it harder for the auto-generation or not.

@font-face {
  font-family: octicons-anchor;  // <-- Mismatch
  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
}

.markdown-body .octicon {
  font: normal normal 16px octicons;  // <-- Mismatch
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

I am seeing some differences between github rendering and rendering using your CSS.

The only thing I can think is that I am converting markdown to HTML and then styling with your CSS outside of any github containers. Have you tested this scenario?

I think there are some styles cascading from elsewhere that you are missing?

GITHUB:

USING YOUR CSS:

and

GITHUB:

USING YOUR CSS:

The differences are most obvious when you compare the computed CSS of standard github rendered markdown with your css used outside of the github page structure.

I guess you've assumed, quite reasonably, that github's markdown is self sufficient. But it looks like it is not and it relies on css from another stylesheet, at least for tables and perhaps for more.

Here's the CSS for TABLE

STANDARD GITHUB

-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(128, 128, 128);
border-collapse: collapse;
border-left-color: rgb(128, 128, 128);
border-right-color: rgb(128, 128, 128);
border-top-color: rgb(128, 128, 128);
box-sizing: border-box;
color: rgb(51, 51, 51);
display: block;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
height: 149px;
line-height: 24px;
margin-bottom: 16px;
margin-top: 0px;
overflow-x: auto;
overflow-y: auto;
width: 888px;
word-wrap: break-word;

YOUR CSS OUTSIDE OF GITHUB

-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(128, 128, 128);
border-collapse: collapse;
border-left-color: rgb(128, 128, 128);
border-right-color: rgb(128, 128, 128);
border-top-color: rgb(128, 128, 128);
box-sizing: border-box;
color: rgb(51, 51, 51);
display: table;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
font-style: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: normal;
height: 85px;
line-height: 18px;
margin-bottom: 16px;
margin-top: 0px;
overflow-x: visible;
overflow-y: visible;
text-align: start;
white-space: normal;
width: 978px;
word-wrap: break-word;

and for TD

STANDARD GITHUB

-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(221, 221, 221);
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: table-cell;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
height: 37px;
line-height: 24px;
padding-bottom: 6px;
padding-left: 13px;
padding-right: 13px;
padding-top: 6px;
vertical-align: middle;
width: 77.75px;
word-wrap: break-word;

YOUR CSS OUTSIDE OF GITHUB

-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(221, 221, 221);
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(51, 51, 51);
display: table-cell;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
font-style: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 21px;
line-height: 18px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
text-align: start;
vertical-align: middle;
white-space: normal;
width: 430.171875px;
word-wrap: break-word;

The new generated 'github-markdown.css' missed @font-face . Therefore it cannot compiled by sass or other css generator.

0d25bb4#diff-f97b37ced0d72ea4faa45855d1aeb078

.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}

你这第826 行有点过分，让highlight 的主题背景色失效

Currently, the CSS includes some default rules from GitHub’s CSS, which might interfere with other styles set by the user? Is it possible to remove those styles and only include styles containing .markdown-body?

Like this:

-oldCode()
+newCode()

```diff

Shouldn't this technically be considered, at least in part, the property of GitHub? Am I really free to use this under your license terms? I don't think you own it, unless I misunderstand how this created.

I fixed a bug with in a different project called "Gitalk".
gitalk/gitalk#224

Turns out that there are infrequently used Github classes for email comments.
Would you accept a pull request?

Using markdown.css and hightlight.js in dark background some style will be covered.
For example,the img below is using github-markdown-css and highlight.js/styles/Darcula.css

Actually,it should be

The markdown.css set the background-color and cover the style of highlight

Add in css do can identify the code type and set the color in markdown

Hi,I have been using your theme for blog,too.I prefer writing with markdown.
And how can I replace default markdown-css with github-markdown-css.

Do guys have a idea?

Ref: jsdelivr/jsdelivr#7484

Because of the issue, the latest version on CDN is v0.2.0: http://www.jsdelivr.com/?query=github-markdown-css

I noticed when attempting to utilize this that there are quite a few duplicated selectors in here. The one that initially jumped out at me, before I started seeing more, was the hr selector. There seems to be three or more different declarations for hr styles.

Is it possible this could be deduped?

I used this css on another extension and I notice the text in dark mode didn't quite match github's. So I made another rule to fix that
.markdown-preview * { color: var(--color-fg-default); }

Not sure if it was just me.

I realize that it doesn't belong in this repo - this repo is perfect for what it does - however...

Does anyone have a recommendation for a simple css file, similar to this, that has very simple site "chrome".

I'm not looking for something bloated like bootstrap or DIY / complex like bulma or tailwind, just a small file that complements this one with the bare minimum components for a blog.

It would be great to have the language css as well for markup:

HTML

<html>...

JS

$('#id').show()

...

The github-markdown.css file includes syntax highlighting style rules, e.g.:
https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/github-markdown.css#L523

However, it's not clear how to set these classes when generating HTML from Markdown. It would be helpful to provide an explanation of how to do so. (In particular, is there a way to configure marked to set these classes?)

PS: Thanks for writing this great module! I'm using it here: https://github.com/asadovsky/mdviewer

Nice work, do you plan to include github emoji?

https://gist.github.com/rxaviers/7360908

Github page:

Latest github-markdown.css:

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Page font is smaller than Github page.

OS: Windows 10 Chinese
page font: "Segoe UI"
Github page font: "Microsoft YaHei UI"

Great work, thanks! Just curious if there are any aims to support mobile responsiveness to mirror Github's style? As it is, the font is unreadably small.

Thanks again!

I think GitHub just changed the color for strings in code blocks from pink #dd1144 to orange #df5000, so probably a new build is needed.

Normally the default text size in github markdown is 16px. Recent changes define text as 16px, but then override the default text with this to 13px:

.markdown-body,
.markdown-body input {
  font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.4;
}

As .markdown-body has already had its font and font size defined early on, I feel this should be:

.markdown-body input {
  font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.4;
}

This one https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/github-markdown.css#L215 should be removed. h3 should have margin-bottom:16px

Probably a last day change from GitHub?

Ex, I want to use the highlight style to render the <pre><code>xxx</code></pre> area, is there any solution?

Github has support for emojis, if this was added to the package that'd be sweet wouldn't it?

hi, shouldn't be only one?

.markdown-body {
  line-height: 1.5;
...
  line-height: 1.5;
}

Ignore me

Apologies for having to ask here, but this is un-googleable so I had to ask. What does !> mean in this script below?

  "scripts": {
    "make": "github-markdown-css !> github-markdown.css"
  },

https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/package.json#L17

I'm pretty sure yesterday GitHub have shuffled around some of the pygment class names for the code blocks, although I don't think this will be the last change.

No idea if the styles were changed, but my custom theme lost some of its styling, so I'm just reporting it back.

Github markdown allows the use of <br> and backslash \ to break a line.
Normal use of
tag in the .md file does not result in a line break, but simply renders the literal
as part of the text. Same with the backslash .

So far the only option I've found to produce a linebreak is the double space " ".
It might not be the best option for writing/structuring your .md files clearly, since it's not as visible as the other options.

https://gist.github.com/shaunlebron/746476e6e7a4d698b373

Github now officially released its dark theme.
Could you consider to add dark theme as well?

I'm using "Markdown" plugin by JetBrains that supports custom CSS. The MD renders alright, but completely disrespects dark theme.

WebStorm 2019.3

Hi!

Apologies if this is not the right forum to ask such a beginner question. I have an OS project on GitHub and host the Doxygen generated documentation on my own site. I want my Doxygen generated HTML output to look the same as GitHub Markdown style and found your project. I am able to override the Doxygen CSS by provided a new CSS file.

At the moment I am inspecting each element of github-markdown-css to see how it is formatted and then copy&paste the settings to each of the Doxygen elements (which does not have a one-to-one name mapping).

I was wondering if there was an easier, automated way?

Thanks in advance,
Pieter

See example: https://github.com/primer/primer-markdown

Please include the source markdown file that you use for the demo.
I know that I can "View Source" and get the resulting html,
and you quote part of the source in the demo itself,
but I'd like a raw markdown file that when parsed makes your demo, as that in and of itself would be valuable to me.

Thanks!

See https://twitter.com/jonsuh/status/752587446265663488

For some reason the following doesn't work any more:

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  visibility: visible;
}

It is reproducable in the demo page.

If you want the actual CSS we use, it's here https://github.com/primer/markdown

👋

I just used the GitHub's API to render some markdown and it puts

<h1>
    <a name="anchor-name" class="anchor" href="#anchor-name" aria-hidden="true">
    <span class="octicon octicon-link"></span></a>
    Header
</h1>

So just for the record I needed to copy these additional styles from GitHub to get the same feel as on the GitHub's readme files

@font-face {
    font-family: 'octicons';
    src: url('../octicons/octicons.eot?#iefix') format('embedded-opentype'),
        url('../octicons/octicons.woff') format('woff'),
        url('../octicons/octicons.ttf') format('truetype'),
        url('../octicons/octicons.svg#octicons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.octicon {
    font: normal normal 16px octicons;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.octicon-link:before { content: '\f05c'; }

.markdown-body .octicon-link {
    display: none;
    color: #000;
    vertical-align: middle;
}
.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
    height: 1em;
    padding-left: 8px;
    margin-left: -30px;
    line-height: 1;
    text-decoration: none;
}
.markdown-body h1:hover .octicon-link,
.markdown-body h2:hover .octicon-link,
.markdown-body h3:hover .octicon-link,
.markdown-body h4:hover .octicon-link,
.markdown-body h5:hover .octicon-link,
.markdown-body h6:hover .octicon-link {
    display: inline-block;
}

I'm trying to use the css file in Markdown PDF in vscode but got the following error

Error: [UriError]: Scheme contains illegal characters.

Am I missing something? Is there any way you can help? Thanks.

Hi,
I use your css happily with the plugin MarkdownPreview.
It lacks a little bit of colors. print gets no specific color for exemple

a = input("Entrez un premier nombre : ")
b = input("Entrez un deuxième nombre : ")
resultat = f"Le résultat de l'addition de {a} avec {b} est égal à {a + b}"
print(resultat)

It would be great get it more colorfull like you see it above
Thanx

Seeing last update was 9 months ago, but I believe GitHub changed their font.

Feature request

First of all thanks for your work at github-markdown-css, @sindresorhus.

Related Problem

When using github-markdown-css with Next.js AMP the AMP validator throws an error: "Disallowed !important attribute in CSS".

Solution

github-markdown-css is AMP compatible.

Alternatives

If github-markdown-css cannot be AMP compatible then offering a github-markdown-css-amp could be an alternative.

Didn't notice this at first because I was using a straight up tasklist for testing, but after awhile I noticed it was indented too far. This is much more noticeable when you mix list types.

- item 1
    - [X] item A
    - [X] item B
        1. item a

The reason is because the Github Markdown API is not consistent with what actually get used on a github repo or in the comment section.

The CSS is looking for the input item to have a class of task-list-item-checkbox:

.markdown-body .task-list-item-checkbox {
  margin: 0 4px 0.25em -20px;
  vertical-align: middle;
}

But the the API returns all the tasklist items without this class (I don't understand why they don't use the exact same API internally and externally via the API, but they seem to not).

Something like this should be good enough.

.markdown-body .task-list-item input {
  margin: 0 4px 0.25em -20px;
  vertical-align: middle;
}

I will take a look at these within the next week if no one else does. But I wanted to document the issue.

in case we @import it via postcss for example

GitHub recently changed their syntax highlighter. The newly generated HTML is not supported by github-markdown.css and thus the syntax highlighting is broken.