There are many ways by which you can publish a blog posts/articles which contains image/text/audio/video in it, but what will you do if you want to show code snippet in your blog posts/articles (To publish it). So in this article i will show you how to that. Now lets get started :

Also Read : How to show/hide Blogger gadgets in mobile view

How to show code snippet in blog posts

In this article will take help of Syntax Highlighter to separate codes from regular text and to show it in different way. ie. This tutorial is all about syntax highlighter.

You can see more info about syntax highlighter here : http://alexgorbatchev.com/SyntaxHighlighter/ (Official site of syntax highlighter)

If you are using Blogger blog as a platform then follow these steps :

Steps to setup Syntax Highlighter for code snippet:

1) Copy this code :

2) Go to blogger Dashboard > Template > Edit HTML
3)  Search for “</head>” (Use Ctrl + F)
4) Now paste the code above “</head>” (Before “</head>“)
5) Save your template
6) Done!

How to use syntax highlighter (For Blogger) :

Just use :

to show code snippet in your blog posts.

Note :
1) Do not forget to parse the code before replacing the code with “ENTER_YOUR_CSS_CODE_HERE“. You can parse the code from here : http://bit.ly/1u865fU
2) For blogger platform there are different brushes for different code snippet (Languages). For this you have to read this guide : http://bit.ly/1FX8Thy

Use this “default” code:- If you don’t want to install syntax highlighter in your blogger posts then you can use this code “<code>ENTER_YOUR_CODE_HERE</code>” to show code snippet. (This is built-in feature in blogger blogs)

If you are using wordpress blog as a platform then follow these steps :

Steps :
1) Go to this site : http://bit.ly/1Bj29vz (You can also use this link to see installation guide)
2) Now download and install the plugin in your wordpress system
3) Done!

Also Read : How to add Adsense ads inside blog post in Blogger (Boost Your Earning)

How to use syntax highlighter (For WordPress) :

Just use “[php]ENTER_YOUR_PHP_CODE_HERE[/php]” OR “[css]ENTER_YOUR_CSS_CODE_HERE[/css]” to show the code snippet in your blog posts

Note :
1) For wordpress platform there are different brushes for different code snippet (Languages). For this you have to read this guide : http://bit.ly/1FX8Thy

For installing syntax highlighter in any other platform, Use this link : http://bit.ly/1zkZbks (Here you will find all the platforms with there installation guide)

Conclusion :
There are many other methods that can be used to show codes snippet in your blog posts. But we recommend you to use this method because it uses a large javascript library which supports many programming languages. It also uses css to highlight the code and it is easy to integrate. If you have any problem/queries then you can contact us OR you can also comment us below

If you like this post then do not forget to subscribe us OR you can also like us on Facebook