Say Goodbye to Syntax Highlighter Plugin, Use Github to Show Codes

Syntax Highlighter Plugin is essential to show codes in your website. If you have a tutorial based blog, you will need to show various codes in your post. Here comes the Syntax Highlighter Plugin. in my previous blog, I was struggling to find a compatible Syntax Highlighter Plugin. but apparently failed. I had tried most of the plugins. The thing I needed most is visual editor button to implement codes easily. Many bloggers use the popular plugins like syntax highlighter evolved, Crayon syntax highlighter etc. Crayon is good but all Syntax Highlighter Plugin have same drawbacks. They loads the Js and ultimately slows down the website. It loads java script every time your website is loaded even if the page doesn’t contains any code for highlighting. Also If you have compatibility issue with theme or other plugin, you can not leave Syntax Highlighter Plugin. It will destroy all your codes of previous posts. So i was searching something that would host the code other than my site in a safe place and also easy to add codes in post. Here comes the  Github Gist. Here I am going to show how to Use Github to Show Codes. I have seen many websites to use, but didn;t know how to use them until i found this. WordPress geeks like Brian Gardner of studiopress and Bil Erickson use this method.

What is Github Gist and Why use it?

It is like a repository for small code snippets. According to github “GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over four million people use GitHub to build amazing things together”. Originally founded by Tom Preston-Werner, Chris Wanstrath, and PJ Hyett to simplify sharing code, GitHub has grown into the largest code host in the world.

You can add any numbers of codes in github and implement the codes in your post. See here how does it look.

Syntax Highlighter Alternative, how To Use Github

This is the best Syntax Highlighter Plugin alternative. You will need to create n Github account. To implement codes easily, A plugin.

Step 1: Create a Github account.

Step 2: After confirming email, Go to Github Gist.

Step 3: Enter Your description in the Gist description part. Now paste or type your code, name of the file and extension etc.

How to create a github gist

How to create a github gist

Step 4: You can create a secrete Gist or Public gist. Make sure that you create a public gist. Otherwise you cant able to showcase the code to others.

Step 5: Now Copy the gist URL as shown in the image.

How to use a github gist

How to use a github gist

Step 6: You need to Download and Install the plugin called oEmbed Gist.

With this plugin you can simply paste URL of your Gist. Dont need any short code or other things. There are also other plugins but htis works for me fine. I have tried Embed GitHub Gist which is popular. But it does not work in my site.

Note: It will stil load a js and css. But it is different from Syntax Highlighter Plugin and worth to use it. huh :mrgreen:

Thanks for reading. Please consider to share it.

Leave a Reply

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