Green Cell Green Cell - 2 months ago 16
CSS Question

Customizing embedded Git Gist text size in html file

I have an embedded gist on my html page to display some code. I'm wondering if there's a way to edit its default font size? After searching the web some people suggested to override gist's css. I'm not well versed in html or css, so apologies for the noob question.

Here's a snippet of my html page:

<html>
<head>
<style type="text/css">

.gist .gist-file .gist-meta {
font:30px "Helvetica Neue", Helvetica, arial, freesans, clean, sans-serif;
text-shadow:1px 1px rgba(255,255,255,0.8);
overflow:hidden;
color:#999;
background-color:#e8e8e8;
background-image:linear-gradient(#fafafa,#e8e8e8);
background-repeat:repeat-x;
padding:10px;
}

</style>
</head>

<body>

<script src="https://gist.github.com/ghost/754a9a308214f2db688e634b64d31597.js"></script>

</body>

</html>


Is this the right idea?

Answer

In my testing, I updated .gist .blob-code-inner to override the gist's default font setting. However, it did require !important to do so. Depending on how specific you get, you may not need to add !important to your styles.

CSS code (in head)

.gist .blob-code-inner{ font-size:20px !important; }