Formatting code snippets for blogging on Blogger

Question

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 "<" 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.

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: http://coding-issues.blogspot.in/2013/10/copy-code-from-visual-studio-to-blogger.html — Ranadheer Reddy, Oct 17 '13 at 13:20
Try plug-in [Paste As Visual Studio Code](http://plugins.live.com/writer/detail/paste-as-visual-studio-code) for **Windows Live Writer** for Blogger offline editor. **WYSIWYG!**. — herohuyongtao, Dec 28 '13 at 11:19
Are you missing **social content locker** like WordPress? now you can add this in blogger too http://stackoverflow.com/questions/27619171/social-content-locker-for-blogger-com-blogs-is-it-possible — craig lerr, Jan 03 '15 at 09:10
You can use this web site for getting code spinet highlight code for various language. it gives you html you can post it in your blog http://hilite.me/ — Bhavikkumar, Apr 04 '16 at 07:29
You can copy the code in intellij and paste in your blog. It works like a charm for me in my blog - https://codetails.blogspot.com/2017/11/design-pattern-in-java.html — user3871494, Nov 20 '17 at 00:46
Just add some simple CSS to your blog template like described here: https://www.diegodrivendesign.com/2018/09/add-code-snippets-in-your-blog-easily.html — diegosasw, Sep 14 '18 at 14:14
different ways to add source code : https://www.sagapatra.in/2020/04/adding-code-snippet-in-blogger-post.html — Arrow, Apr 24 '20 at 14:40

score 254 · Accepted Answer · edited Dec 22 '22 at 09:54

254

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:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

I'm quite impressed with what it can do.

Above Links stopped working. Try using http://hilite.me/

edited Dec 22 '22 at 09:54

starball

20,030
7
43
238

answered Jan 01 '10 at 22:42

CraftyFella

7,520
7
47
61

@CraftyFella try publishing this: `static Dictionary> _delegate = new Dictionary>();` – Kiril May 03 '10 at 01:20
If you have < or > you'll have to html encode the text using something like http://www.opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx I got the above working on my blog. – CraftyFella May 03 '10 at 10:02
Should be 3 buttons at the top of the block for copying and pasting. – CraftyFella Jun 08 '10 at 08:14
I found I needed to add the following CSS rule to prevent a vertical scrollbar appearing on all of my code snippets: .syntaxhighlighter{padding-bottom:1px;} – jackocnr Oct 16 '11 at 16:14
3

Can anyone confirm if this still works? I tried pasting the script tag just before the `` section and added the pre tag around my code as well. No change though. – arviman Nov 02 '11 at 04:21
3

I spent a couple hours on it and I can't get this to work at all. – thepaulpage Mar 21 '13 at 15:43
@Thepaulpage A lot of other people have been able to make it work.. what exactly is the problem.. Also you might want to consider yodaisgreen's answer as an alternative? – CraftyFella Mar 22 '13 at 10:21
I find it has problems with generics... List foo; would add an extra tag to the end – tbischel Apr 10 '13 at 02:33
2

Its not working fine for DYNAMIC view blogger, can you provide any alternative ? heres my blog with dynamic view http://satindersinght.blogspot.in/ – Satinder singh May 03 '13 at 10:13
Does not your website become slow while loading ? Performance is effected. Any suggestions ? – Yogeesh Seralathan Sep 22 '14 at 04:15
I'm still can't get it to work – Sergius Nov 19 '15 at 11:39
2

It looks like the code you are supposed to copy and paste is missing something at the top, specifically a – John Little Feb 17 '16 at 16:54
Though this service looks very promising, but while trying to make it work, I notice that it requires the inclusion of http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf. This is flash file, which I would not want to use in today's age. sad. – Saurabh Kumar Sep 06 '16 at 17:47
This doesn't work; Blogger removes all `http:` from the links, forcing them to use whatever protocol blogger uses (https) and alexgorbachev.com doesn't serve the files via HTTPS. – Tom Lint Dec 13 '16 at 16:53
3

[Samuel's answer](http://stackoverflow.com/a/9009231/979772) is much better. I don't like adding so many javascripts on my blog just for a mere syntax highlighting. Especially the pages which don't have any syntax to be high-lighted is an overkill. – divinedragon Mar 17 '17 at 13:23
The `syntaxhighlighter` seems to be gone or just not working now. As @divinedragon said, Samuel's answer of http://hilite.me/ is better – derekantrican Sep 06 '17 at 04:23

score 134 · Answer 2 · edited Aug 05 '15 at 16:23

134

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

http://gist.github.com

To address the search engine issue, one can use hidden div on the page as simple as:

<div style="display:none"> content </div>

edited Aug 05 '15 at 16:23

ssapkota

3,262
19
30

answered Apr 10 '11 at 23:30

yodaisgreen

2,310
3
22
27

1

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! – Ilya Saunkin Apr 29 '11 at 08:17
23

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 03 '11 at 18:51
7

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
1

Thanks! You made my day. I'll just share this script for adding gist to blogger: https://github.com/moski/gist-Blogger – daniel.sedlacek Oct 07 '12 at 12:02
Very cool, but I've found that if I try and update my post, the editor has eaten the gist reference. – mbourgon Apr 08 '13 at 16:54
2

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 '14 at 08:58
The gist is not necessary to be public. For secret gist, any one who has a link to it still can see it. But since you put the code to a public blog, public gist makes more sense. – GoYun.Info Mar 19 '15 at 01:37
It is said that a post by javascript such as gist is invisible to search. But I did find one of my posts which contains only gist of github.com appears on the first page of Google search result. So I guess the situation may be different now. But I am not 100% confirmed either. – GoYun.Info Mar 19 '15 at 01:40
you can always put your code in a div and give the style display:none – Liam Aug 05 '15 at 16:19
The only annoying thing with gists is that they are not visible in apps like pocket (readlater) and you have to load the webpage to see what's missing. – Samuel Sep 24 '15 at 11:15
You can easily include the contents of gist in your blogger by copying the embedded script from gist and paste it in the html content of your blogspot blog. Cool – Enrico Giurin Dec 21 '16 at 23:31
When posting a comment: "Your HTML cannot be accepted: Tag is not allowed: SCRIPT" – Stevoisiak Jun 13 '18 at 18:34

score 64 · Answer 3 · answered Jan 25 '12 at 19:45

64

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).

answered Jan 25 '12 at 19:45

Samuel

1,374
10
16

1

I used to use http://hilite.me/, but now I prefer http://dillinger.io/ – GoYun.Info Mar 19 '15 at 01:48
I also prefer this to gist.github. No javascript and additional style / css required. Thank you, Sir. – Prabowo Murti May 17 '18 at 05:27

score 47 · Answer 4 · answered Jan 02 '12 at 04:33

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 :

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

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

       </code>
 </pre>

How to use :

Paste this snippet in text editor,
paste your code in <<<<<<>>>>>> block.
Copy all and
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

The most simple and neat reply in my opinion. Just create an internal CSS and you're good to go. — Rishik Mani, Oct 24 '18 at 11:22

Mahesh Meniya · Answer 5 · 2012-06-01T12:01:24.790

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'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

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...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

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

@le_garry : thanks I had face some problem while formatting code snippet so it is not in color. — Mahesh Meniya, Jun 18 '12 at 06: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 06:01
@MaheshMeniya i followed all the steps you wrote for syntax syntaxhighlighter but its not working, is there any extra think what I m missing? — AA.SC, Nov 02 '14 at 16:35
@MaheshMeniya Thanks, It is formatting. But there is no nested indents. What could be the reason? — user2771655, Nov 04 '14 at 10:39
@MaheshMeniya Thank you so much for the answer. But when I click on http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css It gives error — MayankGaur, Jul 01 '21 at 08:10

Alain O'Dea · Answer 6 · 2015-11-17T17:23:01.540

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[
-module(trim).

-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) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        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) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

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.

Your instructions worked better for me than the other leading answer. In case anyone finds themselves looking for them, [here](http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/) is the list of bundled brushes and their aliases. — Scott, Jun 20 '13 at 01:34

score 9 · Answer 7 · answered May 09 '12 at 17:58

9

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

answered May 09 '12 at 17:58

RoundPi

5,819
7
49
75

I use this for my blog. For people who love colors, this does not color code though! I love it plain and simple. – Aravind Feb 26 '16 at 08:30

Pavel Vladov · Answer 8 · 2022-03-14T09:22:42.213

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

Free Online C# Syntax Highlighter

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

score 5 · Answer 9 · answered Jul 02 '11 at 21:16

5

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

answered Jul 02 '11 at 21:16

Phil Hale

3,453
2
36
50

Yup - tohtml is the solution as recomended by the TechNet Wiki to paste code! – rbrayb Oct 19 '11 at 23:32
@Phil Hale There is no indentation in that tool – user2771655 Nov 04 '14 at 11:02
This is the best solution I found till now. Thank you – Kinjal Sep 07 '18 at 11:09

score 5 · Answer 10 · edited Jan 29 '13 at 23:34

5

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:

edited Jan 29 '13 at 23:34

Nathaniel Ford

20,545
20
91
102

answered Mar 24 '09 at 20:53

Rich

36,270
31
115
154

Doesn't work anymore. – Ε Г И І И О Jul 24 '19 at 06:03

score 3 · Answer 11 · answered Nov 10 '09 at 23:08

3

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/

answered Nov 10 '09 at 23:08

Daniel Ballinger

13,187
11
69
96

score 3 · Answer 12 · answered Mar 24 '09 at 21:11

3

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.

answered Mar 24 '09 at 21:11

Pete Kirkham

48,893
5
92
171

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. – rbrayb Mar 24 '09 at 21:19

score 2 · Answer 13 · answered Mar 24 '09 at 21:00

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.

Sujeet · Answer 14 · 2011-06-26T07:32:46.697

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...

blog-htmlize-buffer
blog-htmlize-region
blog-htmlize-buffer-with-linum
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)

score 0 · Answer 15 · answered Jun 26 '12 at 09:13

To post your html, javascript,c# and java you should convert special characters to HTML code. as '<' as < and '>' to > 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.

score 0 · Answer 16 · edited May 23 '17 at 12:18

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!

Formatting code snippets for blogging on Blogger

16 Answers16

Linked

Related