sindresorhus / github-markdown-css

The minimal amount of CSS to replicate the GitHub Markdown style
https://sindresorhus.com/github-markdown-css
MIT License
7.98k stars 2.1k forks source link

Fix anchor link style missing #29

Closed tylerlong closed 4 years ago

tylerlong commented 8 years ago

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.

sindresorhus commented 8 years ago

GitHub probably changed it somehow. Look through the regenerate github css commits and see how it changed: https://github.com/sindresorhus/github-markdown-css/commits/gh-pages

ezzatron commented 8 years ago

I did a quick bit of investigation. Looks like GitHub has switched to using SVGs for the Octicon links. The bigger problem is that the HTML they're returning from the API doesn't have the same SVGs, it's still producing HTML designed for use with older CSS that uses pseudo-element content instead.

So basically, this stylesheet is now out of sync with what the GitHub markdown API is producing. You can see that this commit removed the pseudo-element content.

If you revert to a version before this commit, the Octicon links magically start working again.

sindresorhus commented 8 years ago

Happy to accept a pull request that adds a workaround for now until GitHub updates their Markdown API endpoint (Please do contact GitHub support about that).

tajmone commented 7 years ago

I'm facing the same problem. If I come up with a workaround I'll contribute.

In the meantime (for the sake of researching the issue) I just wanted to add a reference link to the post where GH announces switching from font-icons to SVG images: