Aug 15, 2013

How to add code snippet in Google Blogger

This blog is interesting because it's a blog about Blogger itself. Google Blogger is powerful but it's not easy to use. As a developer, we often want to add some code snippet in our blog but it's not available in blogger. Fortunately there is a way to do it - The solution is to use:
SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/)



Step1: go to blogger dashboard -->Template--> Edit HTML

Step2: In the part, add the codes below to enable SyntaxHighlighter.





http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/



    
     
     
     
    
 
 
 -->-->





to add more language support, for example SQL, you can add the js below in the codes we added to head section:
  

3. In the blog you write, edit html, add the codes For example, below is what I put:
































And when publish or preview the post, it looks great!































Bingo! We can write more nice posts now.

If you think this article is useful, please click the ads on this page to help. Thank you very much.

15 comments:

Anonymous said...

http://th3prosadoun.blogspot.com/
love this blog

Unknown said...

Cool and very very useful blog. Thanks a lot this helped me to implement a code snippet highlighter in my own blog
akshaybobde.blogspot.in

Unknown said...

Thank you very much for the tutorial. This works 100% :)

Unknown said...

nice

www.crezybrain.tk

Anonymous said...

You fuckin idiot you could at least give a code for a copy paste in step 2.

Anonymous said...

Sorry for my previous comment. It is just such a simple, however important step and yet you missed it. I can't understand why you are writing about code spinets on the blog and yet you are putting screenshot. It some weird joke imho. Take care friend, and keep good work with publishing useful articles on the internet!

Sai said...

Hi Anonymous,
Thanks for pointing out the problem.
The reason I use a screenshot rather than real SyntaxHighlighter codes in step 2 is that adding the code snippet Google Blogger will pops up an error, "Your HTML cannot be accepted: Tag is not allowed: SCRIPT", you noticed the SCRIPT /SCRIPT> section in the codes? There is a technical problem to add it.

But I agree your point that the codes would be helpful, I take sometime to have the problem fixed.

Thanks,
Sai

Unknown said...

Hi, I followed your steps. just don't work for me...
My test is this: under HTML mode

<*pre class="brush: javascript">
int i=0;
int j=0;
<*/pre>

Inside the templates, I used the same code as your snapshot, any help ..

Sai said...

@Nick Liu,
I think if you used the same method it will be working.

I guess that after edit you were viewing it in "Compose" mode and didn't see the highlighted effect. In fact you need to submit the post and view it normally from browser, just like someone else visits your blog. Then you will find it is working. Please give it a try and let me know if there is anything else that I can help.

Regards,
Sai

Unknown said...

@Nick Liu
It did not work in my case as well.
The problem was that the inserted scripts could not be found. Blogger tried to get the sources via https but alexgorbatchev.com does not accept https connection.
The sources are fortunately also available on cdnjs (and thus https): http://cdnjs.com/libraries/SyntaxHighlighter

Adapting the paths did the job. Hope it helps.

replace "http://alexgorbatchev.com/pub/sh/current/" with "https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/"

Avik Sarkar said...

Is there Any way that I don't need post my code into the HTML? I will just write / post my Code [ Compose ] Section. And the snippet will be available into the Blog ?

Anonymous said...

Fuck those view hungry bloggers who posts tutorials that wastes other people's time because their fucking tutorials doesn't even work! Including this fucking post and others like it!

seo india said...

But what is so useful in it? & Why should you be so careful while blog commenting?

Unknown said...

Thank you for sharing Nice Post
Easy Digital Downloads Extensions

Anonymous said...

listed some of the ways to add code snippet in blog for reference do check it may help others :
https://www.sagapatra.in/2020/04/adding-code-snippet-in-blogger-post.html