Still using plugin for Syntax Highlighting ? Its time to replace the sucker.

If you are reading this article then it means you know what syntax highlighting is..isn’t it ?

Okay..if you dont know,no problem this article is not for you.

If you are a coder-cum-blogger then I am sure you might be using some plugin for highlighting syntax.such as syntaxhighlighter,crayon-syntax–highlighter and many others.

Did you know these plugins slow down your website ? Yes these plugins loads javascript every time your website is loaded even if the page doesn’t contains any code for highlighting.

It also have some other shortcomings like support for limited number of programming languages .For example you cant find syntax highlighter for highlighting Arduino codes.Even though it is derived from C it does have some own functions.so these syntax highlighters doesn’t highlight those lines.

So what is the solution ?

Yes I have a solution.Using Github Gist is the smart way to overcome the problems of existing syntax highlighters.

Why Github Gist ?

It is like a repository for small code snippets,You can add any number of snippets and you can easily embed the code to your blog post.It also have a support for highlighting many programming languages.You can even get support for highlighting some of the newest and less popular programming languages.

Though it may seem you are spending much time..but once you know how to do it you will be more productive and I bet its worth spending time on it.

I have given a step by step guide with screenshots.

1. Create a Github account here.

2. Once you successfully created it ,head on to Github Gist

3. Now you will get some fields to create your first gist.

• Enter code Your description in the Gist description field
• Enter the name of the code with the file extension at the end so that it automatically assigns the programming language.for example my-code.c or mycode.php etc.
• Now paste or type your code.Note that at this point your code won’t be highlighted.
• at the bottom of the page you can see two option.To create secrete Gist and Public gist.Make sure that you create a public gist.otherwise you cant able to showcase the code to others.

Creating a Github Gist

• Now you might got your gist created with lighted code.Copy the gist URL.

Even though you get an option to embed the Gist you cant embed it into your Wordpress,since the embed code itself a javascript code.

4. You need to Download and Install the plugin called : Embed GitHub Gist.

Now you can ask me a question..We are still using a Plugin ?

Yep but there is a lot of difference in that.This plugin doesn’t load any javascript.The code will be loaded explicitly from Github and it will only load in the page you embedded the code.

If I am still unable to convince you,go and look at the blogs of WordPress geeks like Brian Gardner of studiopress and Bil Erickson.

5.Now you can embed the code in your Wordpress post by using any of the following shortcodes

Github Gist Embed shortcodes

I normally use the last one,Since I can easily remember that short code.

Here you can see the output

I hope this article will let you uninstall your current syntax highlighting plugin.

Do you feel this article is worth sharing ??…then Share it to your social circles and subscribe our newsletter below.

Lets continue to discuss about this topic through the comment form below.