WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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.

Change Font Size

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

default font size

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

.gist {
    font-size: 12px;
}

And here’s an example at 75%

smaller font size

Change Selection Color

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

default highlight color

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 code selection color

Change Font Color

.gist-data {
     color: red;
}

And here’s the result.

change font color

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.

Not Using Gists?

Reader Interactions

Comments

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

Leave a Reply