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!

@minimul

This comment has been minimized.

Copy link

minimul commented May 7, 2020

I did this

    /* Styling embedded gists */
    .blob-code, .blob-num {      
       font-size: 18px !important;
    }
    .gist-meta {      
       display: none;
    }
    /* End styling embedded gists */
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.