How To Style Github Gist Code Embeds in WordPress

In this post, i’ll show you the before and after results for embedding code in WordPress using Githubs Gists.

All CSS code should be added near the end of your child themes style.css file before the start of the code for your themes Media Queries.

Here’s what the default size looks like for this theme.

And here’s the code to make the font size smaller or larger.

.gist {
    font-size: 12px;
}

And here’s an example at 75%

Here’s the default selection color the code is highlighted.

Here’s some sample code you can use to change the selection color.

::selection {
	background: #24890d;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #24890d;
	color: #fff;
	text-shadow: none;
}

And here’s an example.

.gist-data {
     color: red;
}

And here’s the result.

If your code seems bloated when you embed it in gist, one of these code snippets may provide the solution that fixes it.

If you find any of the code doesn’t work for some reason, you may need to add !important to the end of the value for each property like this:

.gist {
    font-size: 34px;
    color: red!important;
}

Here’s all the defualt CSS rendered when you embed a gist in a web page.

Main navigation