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.
Change Font Size
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%
Change Selection Color
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.
Change Font Color
.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;
}Default Gist CSS
Here’s all the defualt CSS rendered when you embed a gist in a web page.
is there a method to remove the inner frame that surrounds the code itself? I like the outside frame but having two of them annoys me.
Thank you,
Yes there is.
Find the class and use transparent.
Forgive me, but can’t not mention the GistPress plugin here for those looking to do more than just embed basic Gists into their tutorials – https://github.com/bradyvercher/gistpress
Thanks for the plugin tip Gary.
Great stuff Brad. In my child themes I provide styling for gists so that they match the code and pre tags.
In addition to .gist I also target,
.gist .line-data
.gist .gist-file .gist-data
.gist table
I never even thought of wrapping them in a custom class. 🙂
Hi Len
I did see all the different classes for Gists as well as pre tags so i will add more options to this post soon.
I’d like to work out a way to highlight them like what some of the Syntax highlighter plugins offer at some stage. That’s an idea!
Thanks for stopping over and good luck with the themes.