Skip to content

Instantly share code, notes, and snippets.

@jnrbsn
Created September 14, 2010 01:24
Show Gist options
  • Save jnrbsn/578379 to your computer and use it in GitHub Desktop.
Save jnrbsn/578379 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

mklemme commented Aug 29, 2013

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

@jrichardsz
Copy link

<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
Copy link

Thanks... It works...

@Magdi
Copy link

Magdi commented May 2, 2014

Thanks man :)

@foxx
Copy link

foxx commented May 10, 2014

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

@rabinshr
Copy link

Thank you Sir!

@ksobon
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
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
Copy link

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

@M2skills
Copy link

great man Thanks!

@minimul
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 */

@vishalsingha
Copy link

thanks man

@carlaizumibamford
Copy link

I removed the 53em from .gist as it was breaking my design but thanks for sharing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment