Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Better styles for embedding GitHub Gists
/* Better styles for embedding GitHub Gists */
.gist{font-size:13px;line-height:18px;margin-bottom:20px;width:100%}
.gist pre{font-family:Menlo,Monaco,'Bitstream Vera Sans Mono','Courier New',monospace !important}
.gist-meta{font-family:Helvetica,Arial,sans-serif;font-size:13px !important}
.gist-meta a{color:#26a !important;text-decoration:none}
.gist-meta a:hover{color:#0e4071 !important}
@facebookegypt

This comment has been minimized.

Copy link

facebookegypt commented Jun 28, 2013

Hello,
Sorry I'm not Html or JavaScripts pro or even average, I just use

<script src="https://gist.github.com/facebookegypt/This.js"></script>

to include in my Html page ... How can I add your code to implement the display of my Gist in my Html Page?
More details for a beginner please ...

@mklemme

This comment has been minimized.

Copy link

mklemme commented Aug 29, 2013

Assuming you have included one in your html head, you add these to your style.css

@jrichardsz

This comment has been minimized.

Copy link

jrichardsz commented Oct 13, 2013

<style type="text/css"> /* Better styles for embedding GitHub Gists */ .line-data { font-size:11px; font-family: Consolas,"Liberation Mono",Courier,monospace; } .line-numbers { font-size:11px; background-color: #ECECEC; border-right: 1px solid #DDDDDD; color: #AAAAAA; padding: 0.0em; text-align: right; } .line-pre { font-size:11px;font-family: Consolas,"Liberation Mono",Courier,monospace; } </style>

Just put it on your head and go!

Note that you must change the "font-size" in the 3 blocks to appreciate the line number of the code.

@Jayaramki

This comment has been minimized.

Copy link

Jayaramki commented Apr 18, 2014

Thanks... It works...

@Magdi

This comment has been minimized.

Copy link

Magdi commented May 2, 2014

Thanks man :)

@foxx

This comment has been minimized.

Copy link

foxx commented May 10, 2014

Not bad, though I prefer 12px font, thanks!

@rabinshr

This comment has been minimized.

Copy link

rabinshr commented May 30, 2014

Thank you Sir!

@ksobon

This comment has been minimized.

Copy link

ksobon commented Nov 3, 2014

Would you be able to advise on a method to remove a border around the code text part of the gist? It usually has two borders. One on the outside that i am ok with but there is one around the actual code that i would like to make either white/transparent or null. thank you,

@kensoh

This comment has been minimized.

Copy link

kensoh commented Jan 14, 2017

Hi @ksobon, yes there are different properties to control the default css of GitHub gist. I did that in this project by making all the borders white and making sure I define the properties after the embedded js - https://github.com/tebelorg/TA.Gist (PHP template that displays your GitHub gists as blog posts)

@sharifulislam52

This comment has been minimized.

Copy link

sharifulislam52 commented Mar 8, 2017

I don't know why. But the "font-size" property dont work for ".gist".

@M2skills

This comment has been minimized.

Copy link

M2skills commented Mar 29, 2017

great man Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.