• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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?

  • Style Your Code & Use The Pre Quicktag In WordPress To Highlight It

Reader Interactions

Comments

  1. konrad says

    November 3, 2014 at 3:01 pm

    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,

    Log in to Reply
    • Brad Dalton says

      November 3, 2014 at 3:09 pm

      Yes there is.

      Find the class and use transparent.

      Log in to Reply
  2. GaryJ says

    October 23, 2013 at 12:53 am

    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

    Log in to Reply
    • Brad Dalton says

      October 23, 2013 at 11:16 am

      Thanks for the plugin tip Gary.

      Log in to Reply
  3. Len says

    October 21, 2013 at 12:10 am

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

    Log in to Reply
    • Brad Dalton says

      October 21, 2013 at 3:19 am

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.