• Home
  • About 404TS
  • Contact

404 Tech Support

Where IT Help is Found

  • Articles
    • Code
    • Entertainment
    • Going Green
    • Hardware, Gadgets, and Products
    • Management
    • Network
    • News
    • Operating Systems
    • Security and Privacy
    • Software
    • System Administration
    • Talking Points
    • Tech Solutions
    • Web
    • Webmaster
  • Reviews
  • Media
    • Infographics
    • Videos
  • Tech Events
  • Tools
    • How do I find my IP address?
    • Browser and plugin tests
  • Get a Technical Consultation
You are here: Home / Articles / Code / Use Github Gists to embed code on your WordPress site

Use Github Gists to embed code on your WordPress site

2016-01-29 by Jason

Occasionally, I like to share code snippets here on 404 Tech Support. I have tried various methods and have not really been satisfied with them. Formatting the code as pre-formatted does not let it stand out enough and still leaves it at the mercy of WordPress formatting. Various WordPress plugins offer Syntax Highlighting capabilities but it can mean an extra CSS and JavaScript file with every page load. Adding the code can also be cumbersome and if you want to change plugins, the old code is left surrounded by non-functional WordPress shortcodes.

Looking for a better approach, I am liking the options allowed by Github Gists. It allows you to create a page of your code (including multiple files), track revisions, and share the Gist multiple ways. You can embed the code by pasting in a script src but that can get lost in the WordPress visual editor. You can also share a URL to the Gist. With the help of a WordPress plugin called oEmbed Gist, WordPress can automatically turn that URL into embedded content, just like it does for YouTube videos.

One reason that this is a better solution than the Syntax Highlighter plugins is that if you deactivate the oEmbed Gist plugin, your content now has a URL pointing to the Gist on GitHub instead of mangled code. This also means that there are no extra requests on your other pages.

With the oEmbed Gist plugin activated, as soon as you paste a gist.github.com URL, it will render it as the embedded code so you can preview the final contents.

oembed_code_wpeditor

For an example, I created a new gist on GitHub using a snippet of PowerShell code. I named the file and saved it. Then, I copied the URL and pasted it below. You can embed specific revisions or single files of an multi-file Gist.

https://gist.github.com/jhamilton09/cbf3b5ef6279b31fc5d0

The code is clean and means that you can copy+paste it easily for your own use or clone it from GitHub. The quotes and spacing will not get messed up by WordPress or the browser’s rendering. I look forward to using this in future posts. It should be less tedious and frustrating than previous plugins that I have tried.

Filed Under: Code, Webmaster

Trending

  • Targeted advertising makes holiday magic
    In Infographics
  • Social engineering examples, methods, and stats [infographic]
    In Infographics
  • GetPlus is a Big Minus
    In Media, Software, Tech Solutions

Latest Media Posts

Find Out Where To Download SNES ROMs

Find Out Where To Download SNES ROMs

Multifunctional Video Conversion Tools – Wondershare Video Converter

Multifunctional Video Conversion Tools – Wondershare Video Converter

  • Popular
  • Latest
  • Today Week Month All
  • Access to the resource [servershare] has been disallowed Access to the resource [servershare] has been disallowed
  • Read the Event Logs on Windows Server Core Read the Event Logs on Windows Server Core
  • Increase IIS Private Memory Limit to improve WSUS availability Increase IIS Private Memory Limit to improve WSUS availability
  • How to ‘Unblock’ multiple files at a time with PowerShell How to 'Unblock' multiple files at a time with PowerShell
  • Setup your DFS namespace with DNS for compatibility in a mixed environment Setup your DFS namespace with DNS for compatibility in a mixed environment
  • How Virtual Reality Supports Mental Health Therapy How Virtual Reality Supports Mental Health Therapy
  • Key Strategies of Successful Coin Listing on Exchange Key Strategies of Successful Coin Listing on Exchange
  • Keeping Your Mac Healthy: A Comprehensive Guide to Maintenance and Troubleshooting Keeping Your Mac Healthy: A Comprehensive Guide to Maintenance and Troubleshooting
  • Making Distributed Software Development Work: Strategies and Best Practices for Managing Remote Teams Making Distributed Software Development Work: Strategies and Best Practices for Managing Remote Teams
  • customer contactless payment for drink with mobile phon at cafe counter bar,seller coffee shop accept payment by mobile.new normal lifestyle concept The Latest Innovations In Payment Technology
Ajax spinner

Elevator Pitch

404 Tech Support documents solutions to IT problems, shares worthwhile software and websites, and reviews hardware, consumer electronics, and technology-related books.

Subscribe to 404TS articles by email.

Recent Posts

  • How Virtual Reality Supports Mental Health Therapy
  • Key Strategies of Successful Coin Listing on Exchange
  • Keeping Your Mac Healthy: A Comprehensive Guide to Maintenance and Troubleshooting

Search

FTC Disclaimer

404TechSupport is an Amazon.com affiliate; when you click on an Amazon link from 404TS, the site gets a cut of the proceeds from whatever you buy. This site also uses Skimlinks for smart monetization of other affiliate links.
Use of this site requires displaying and viewing ads as they are presented.

Copyright © 2025 · Magazine Pro Theme on Genesis Framework · WordPress · Log in