How to use Github like syntax highlighting on your web site or blog without any plugin

Hello Friends,

Today I will be sharing a cool trick to highlight the code in your blog

As a developer or coder we always look for any code snippet on any website may be it is in java or PHP but it looks in awesome format just what it looks like in our IDE.

If you don’t know what is syntax highlighting then let me tell you in short story.

Whenever we search for any code as an e.g

just look at that formatting its awesome we have not done it manually.So that is called as syntax highlighting based on the type of the language(java/c/c++.).

We have heard about crayon-syntax–highlighter,developer formatter and many more are there which support this syntax highlighting but the sad part is they are plugins and they are not awesome like Github.

Today I am going to tell you the trick so that you can apply the same look and feel without plugin.

Step 1: Use Github Gist .

Github Gist is a small repository of programming languages which support many new programming languages .Don’t worry its a small process….just after a small sign up you are good to go.I am with you till you get there with screen shots.

Just go to https://github.com/ and fill  sign up form.

 

 

Step 2 : After creating account just move to Gist or Github Gist.

Your browser will show the following address : https://gist.github.com/

 

 

In the first box we have to write description regarding our file and in second box we have to write the file name with extension.e.g for Java file write filename.java.

Now just click on create public gist at bottom right side(important don’t click on private) otherwise your gist will not be visible for public.

Now your public gist is created and you need to embed this gist in your WordPress blog.

Step 3: Copy the link url from your browser like below:

 

Step 4 : Now go to WordPress blog and download one small plugin oEmbed Gist which will save your precious time to embed your gist url directly into your blog.Well there are many other techniques like short code..to insert gist into blog but this is the best way and it’s theme independent.

 

 

Step 5: Now after installing and activating the plugin just paste the url of your gist that you have copied in Step 3.Automatically your code will be highlighted in the git like structure.You can also see its live preview immediately after pasting the link.

You can see demo at the beginning of the post(sample.json)

Hope so friends …you got all the steps and succesfully integrate this syntax highlighting.

Benefit of this gist is you can access this code from anywhere and anyone can access it.

If you face any difficulty doing this then comment ….I will try to solve them.

Thank You.Happy Blogging….