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

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

Github Gists Custom Syntax Highlighting

Github Gists Custom Syntax Highlighting

December 9, 2017 by Pat Fortino

Many of my blog posts show codes examples. In the past, I’ve used a WordPress plugin to create syntax highlighting to make the code examples easier to read. The problem with the WordPress syntax highlighting plugins is that they load a lot of css and java scripts and wreck your site’s speed scores. As an alternative, I started using Github Gists to show code examples. But I didn’t like the default Gist syntax highlighting. I needed Github Gists custom syntax highlighting. It took me a while to figure out so I’ll save you some time if you want to do it.

What is a Gist?

A Gist is a block of code that is stored on github servers. Once you create a Gist, you can insert that Gist into a web page using an embed script. It’s a simple, lightweight solution to include syntax highlighted blocks of code on your web pages. Another advantage of using Gists is that if you need to change the code in the Gist, you update the Gist and it automatically updates wherever you use that Gist.

Create a Github Account

If you don’t already have one, create a free Github account. This will allow you to create your own Gists.

  1. Go to https://github.com/
  2. Click Sign Up.
  3. Enter a username, email, and password and select the free account.
  4. You will receive a verification email. Click the verification link.
  5. Once your account is verified, log into http://github.com.

Create and Embed a Gist

In order to test the custom syntax highlighting I provide below, you’ll need a post or page with a Gist embedded in it.

  1. Go to https://gist.github.com/ and login.
  2. Click New Gist.
    Github Gists Custom Syntax Highlighting
  3. Optional: Enter a Gist description
  4. Enter a file name including the extension. For example, my_new_gist.php. This is VERY important. The file name and extension determine how the Gist is highlighted.
    Also, if your file is a .php file, make sure you include the opening  php tag: <?php
    See the example below.
  5. Enter your code and then click Create public gist.
  6. Click the embed Gist link and then click Copy to clipboard icon.
    embed gist
  7. In a WordPress post or page, click the Text tab on the editor, and paste the Gist where you want it to appear.
  8. Click Update to save the change.
  9. Load the page and you should see the Gist on the page. The image below shows the standard syntax highlighting for Gists. We will change that formatting in the next section.
    Unformatted Gist

Create a Github Gists Custom Syntax Highlighting

At this point, you should have a page with an embedded gist with the standard Gist syntax highlighting.

The .css code below will change that to a dark background with syntax highlighting that make the code easier to read.

  1. Copy the css code below and paste it into your WordPress theme’s style.css file.
  2. Save and upload the style.css file.
  3. Reload the page with Gist embedded in it. It should now display the new syntax highlighting.
  4. You can modify any of the syntax highlighting colors in the css.

SASS Version of the Same Syntax Highlighting Theme

The following is a SCSS version of the same syntax highlighting theme.

Additional Gists Syntax Highlighting Themes

There are several other free Gist syntax highlighting themes in case you don’t like the colors of the one I used.

Gists Syntax Highlighting Themes

Filed Under: Website Design, WordPress 4 Comments

Previous Post: « Move Genesis Read More to Entry-Footer
Next Post: Align Flexbox Items Vertically Top to Bottom »

Reader Interactions

Comments

  1. Calvert says

    February 21, 2019 at 2:39 am

    This is great but how do you change your syntax look in GitHub? This seems to be about changing it for your Webpage but what about your Github look?

    Reply
    • taponitrof says

      February 22, 2019 at 8:31 am

      I don’t know how to do it on github

      Reply
  2. Android Rion says

    March 25, 2020 at 8:01 am

    how do you get rid of the file name in gist? it will be hosted with love by github

    Reply
    • Pat Fortino says

      March 25, 2020 at 8:12 am

      I don’t know how to do that.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top

 

Loading Comments...