Take the 2-minute tour ×

My blog is hosted on Blogger and I frequently post code snippets in C / C# / Java / XML etc. but I find the snippet gets "mangled".

Are there any web sites that I could use to parse the snippet beforehand and sort out the formatting, convert XML "<" to "&lt;" etc.

There are a numbers of questions around this area on SO but I couldn't find any that address this question directly.

Edit: For @Rich answer, site states "To display the formatted code on your site, you need to get this CSS stylesheet, and add a reference to it in the <head> section of your page". That's the problem - you can't do this on Blogger AFAIK.

share|improve this question

closed as off topic by Andrew Barber Jun 11 '13 at 6:31


To display the formatted code: If you are using visual studio, then you can copy any type of code html/css/javascript/c# etc to blogger. You have to install visual studio productivity power tools: for more info read: coding-issues.blogspot.in/2013/10/… –  K.R.R Oct 17 '13 at 13:20
Try plug-in Paste As Visual Studio Code for Windows Live Writer for Blogger offline editor. WYSIWYG!. –  herohuyongtao Dec 28 '13 at 11:19

19 Answers 19

up vote 188 down vote accepted

I've created a blog post entry which explains how to add code syntax highlighting to blogger using the syntaxhighlighter 2.0

Here's my blog post:


I hope it helps you guys.. I'm quite impressed with what it can do.

share|improve this answer
+1 My blog looks sooooo pretty now :) –  slugster Mar 1 '10 at 1:27
No worries.. glad to be of service. –  CraftyFella Mar 3 '10 at 14:38
@CraftyFella try publishing this: static Dictionary<int, List<Delegate>> _delegate = new Dictionary<int, List<Delegate>>(); –  Lirik May 3 '10 at 1:20
If you have < or > you'll have to html encode the text using something like opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx I got the above working on my blog. –  CraftyFella May 3 '10 at 10:02
Should be 3 buttons at the top of the block for copying and pasting. –  CraftyFella Jun 8 '10 at 8:14

Easiest way to share code is with a public gist. Just write one up and paste in the embed code. Easy peasy.


share|improve this answer
this one is by far the easiest! Thanx –  Elijah Saounkine Apr 29 '11 at 7:47
dude, after using it for like 20 minutes, I can't thank you enough! The best formatting, no hussle, all the code is in one place, the posts look just beautiful, the editing of a post is incredibly easy as you don't mix up the code with the rest of the post and never worry that you do something stupid and lose/misformat any code. Thanx man! –  Elijah Saounkine Apr 29 '11 at 8:17
The embed is javascript, there's a good chance it's invisible to search. That pretty much kills it for blog posts. –  James Moore May 3 '11 at 18:51
I am currently using gists but I will probably use SyntaxHighlighter again. Not only gists use JavaScript (which makes them inaccessible in RSS readers as well) but also slow down page loading because every gist is downloaded sequentially blocking rendering. Not a good choice. –  Tomasz Nurkiewicz Oct 28 '11 at 20:36
This idea really works fine! the result is just want I need; nicely formatted code...but I wont be going with it. I would rather have my post to be complete in and off itself. Having the code, which is part of the post, hosted elsewhere and included via js, just defeats that! –  dade Jan 25 at 8:58

For my blog I use http://hilite.me/ to format source code. It supports lots of formats and outputs rather clean html. But if you have lots of code snippets then you have to do a lot of copy paste. For formatting Python code I've also used Pygments (blog post).

share|improve this answer
Great highlighter! +1 –  Gaʀʀʏ Jun 18 '12 at 14:45
Nice one, easy to make, no tough copying and syntax errors! +1 –  techastute Jan 11 '13 at 18:44
I like it. Thanks! –  orschiro Jul 5 '13 at 13:14
Awesome..Easy to use and very very simple. –  Md Mohsin Jul 26 at 7:26

This css script might be useful to all - It is not for syntax highlighting but works well for presenting the source code in original format :

                color: #000000; background-color: #eee;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>


How to use :

  1. Paste this snippet in text editor,
  2. paste your code in <<<<<<>>>>>> block.
  3. Copy all and
  4. paste to HTML view in blogger(or any other) post editor.

BENEFITS : Simple and easy to use, less configuration, easy to reconfigure, no extra software

share|improve this answer

This can be done fairly easily with SyntaxHighlighter. I have step-by-step instructions for setting up SyntaxHighlighter in Blogger on my blog. SyntaxHighlighter is very easy to use. It lets you post snippets in raw form and then wrap them in pre blocks like:

<pre name="code" class="brush: erlang"><![CDATA[

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->

Just change the brush name to "python" or "java" or "javascript" and paste in the code of your choice. The CDATA tagging let's you put pretty much any code in there without worrying about entity escaping or other typical annoyances of code blogging.

share|improve this answer
Your instructions worked better for me than the other leading answer. In case anyone finds themselves looking for them, here is the list of bundled brushes and their aliases. –  Scott Jun 20 '13 at 1:34

1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css given in this link before </b:skin> tag
3. Paste the followig code before </head> tag

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. Paste the following code before </body> tag.

<script language='javascript'>

5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.

<pre name="code">
...Your html-escaped code goes here...

    echo "I like PHP";

7. You can Escape your code here.
8. Here is list of supported language for <class> attribute.

share|improve this answer
A nice link. Would be better if it color-formatted it! +1 –  Gaʀʀʏ Jun 13 '12 at 19:57
@le_garry : thanks I had face some problem while formatting code snippet so it is not in color. –  Mahesh Meniya Jun 18 '12 at 6:01
See the answer by gissolved. The best highlighter I have seen so far, and it does color. –  Gaʀʀʏ Jun 18 '12 at 14:45
@le_garry Ohh you are taking about highlighting syntax in Blogger It work finely with color. I misunderstand that you are taking about my answer So, I had sad that I had face some problm.. –  Mahesh Meniya Jun 19 '12 at 6:01
where is objective c –  Ghost Rider Feb 27 '13 at 14:51

Here's one site that will format your code and spit out html, and it even includes inline styles for syntax coloring. Might not work for all of your needs, but is a good start. I believe he has made the source available if you want to extend it:

share|improve this answer

I have created a tool that gets the job done. You can find it on my blog:

Free Online C# Code Colorizer

Besides colorizing your C# code, the tool also takes care of all the '<' and '>' symbols convering them to '&lt;' and '&gt;'. Tabs are converted to spaces in order to look the same in different browsers. You can even make the colorizer inline the CSS styles, in case you cannot or you do not want to insert a CSS style sheet in you blog or website.

share|improve this answer

I use SyntaxHighlighter with my Blogger powered blog. The actual site is hosted on my own server rather than Blogger's though (Blogger has an option of ftping posts to your own site), but having your own domain and web hosting only costs a couple of dollars a month.

share|improve this answer
Agreed - there are a number of options if I host my own blog but there doesn't seem to be much support when the blog is actually hosted by Blogger. –  nzpcmad Mar 24 '09 at 21:19

It looks like there have been some changes with SyntaxHighlighter 2.0 that make it easier to use with Blogger.

There are hosted versions of the styles and Javascripts at: http://alexgorbatchev.com/pub/sh/

share|improve this answer

Actually I had used (what else ;-) ) Vim for this: it has a 2html "plugin". See the docs here.

So as I edit my code, I just convert it to HTML and paste the results to Blogger's HTML editor.

Note: it's not so beautiful HTML (embeded css would be better), but it just works.

Oh: and it has syntax files for several languages which makes it pretty useful.

share|improve this answer

I use a fairly low tech solution. I format the code using this online syntax highlighting tool then just paste it into the blog

share|improve this answer
Yup - tohtml is the solution as recomended by the TechNet Wiki to paste code! –  nzpcmad Oct 19 '11 at 23:32
@Phil Hale There is no indentation in that tool –  user2771655 Nov 4 at 11:02

Emacs specific answer : As far as blogger is concerned, it allows inline css. The problem with javascript based highlighters is that you have to live with their color scheme or implement your own. But, like me, if you are a fan of your own emacs color scheme, you have a much better option available. I have hacked up the "htmlize.el" package for emacs to add the following four functions...

  1. blog-htmlize-buffer
  2. blog-htmlize-region
  3. blog-htmlize-buffer-with-linum
  4. blog-htmlize-region-with-linum

These functions will output copy-paste ready html (inline styled) in a new buffer in emacs, which you can directly use in your blog post. The output looks exactly same as you would see the code in emacs (including the color scheme).

Here is a link to my blog, where you can find detailed information of how to use the "blog-htmlize.el" with emacs. This does away with html-encoding the "less than" and "greater than" signs also. And as emacs is doing all the highlighting and styling, you do not have to worry about whether the js library supports the language of your snippets, nor do you have to meddle with your template code in blogger.

You can find the elisp file here (save the file as blog-htmlize.el)

share|improve this answer
I love this! It could be my selected answer! Thanks @Sujeet –  swdev Dec 8 '11 at 22:52

http://formatmysourcecode.blogspot.co.uk/ works fine, you just copy , format, paste back.

share|improve this answer

Simple step to integrate SyntaxHighlighter Integrate SyntaxHighlighter with blogger with blogger

share|improve this answer

I rolled my own in F# (see this question), but it still isn't perfect (I just do regexps, so I don't recognise classes or method names etc.).

Basically, from what I can tell, the blogger editor will sometimes eat your angle brackets if you switch between Compose and HTML mode. So you have to paste into HTML mode then save directly. (I may be wrong on this, just tried now and it seems to work - browser dependent?)

It's horrible when you have generics!

share|improve this answer

I used this web site, that is simple enough for me : http://formatmysourcecode.blogspot.com/

It's just a copy / paste, and I have my code...

share|improve this answer
# htmlwank  Use to convert C code to html.
# syntax:   htmlwank source-file destination-file

if [ "$#" != 2 ]
    echo "Usage: $0 src_text dest_text   (C to HTML)" 1>&2
    exit 1

    echo "Error: Source and Destination files have the same name." 1>&2
    exit 2

sed '1i<pre>
     $a</pre>' <"$1" >"$2"
share|improve this answer
Code only answers are not appreciated at SO. Kindly explain the piece of code. –  Coding Mash Nov 12 '12 at 4:31

To post your html, javascript,c# and java you should convert special characters to HTML code. as '<' as &lt; and '>' to &gt; and e.t.c..

Add this link Code Converter to iGoogle. This will help you to convert the special characters.

Then add SyntaxHighlighter 3.0.83 new version to customize your code in blogger. But you should know How to configure the syntaxHighlighter in your blogger template.

share|improve this answer

protected by Bo Persson Jun 25 '12 at 17:13


Would you like to answer one of these unanswered questions instead?
