Better styles for embedding GitHub Gists

better-gist-styles.css

/* 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}

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 ...

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

<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.

Thanks... It works...

Thanks man :)

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

Thank you Sir!

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,

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)

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

great man Thanks!

I did this

    /* Styling embedded gists */
    .blob-code, .blob-num {      
       font-size: 18px !important;
    }
    .gist-meta {      
       display: none;
    }
    /* End styling embedded gists */

thanks man

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