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   lt   to   amp 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  lt head gt  section of your page   That s the problem - you can t do this on Blogger AFAIK

User · 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

User · Answer

1   First  take backup of your blogger template 2   After that open your blogger template  In Edit HTML mode   amp  copy the all css   given in this link before  lt  b skin gt  tag 3   Paste the followig code before  lt  head gt  tag   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shCore js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushCpp js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushCSharp js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushCss js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushDelphi js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushJava js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushJScript js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushPhp js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushPython js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushRuby js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushSql js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushVb js  type  text javascript  gt  lt  script gt   lt script src  http   syntaxhighlighter googlecode com svn trunk Scripts shBrushXml js  type  text javascript  gt  lt  script gt    4   Paste the following code before  lt  body gt  tag    lt script language  javascript  gt  dp SyntaxHighlighter BloggerMode    dp SyntaxHighlighter HighlightAll  code     lt  script gt    5   Save Blogger Template  6   Now syntax highlighting is ready to use you can use it with  lt pre gt  lt  pre gt  tag    lt pre name  code  gt     Your html-escaped code goes here     lt  pre gt    lt pre name  code  class  php  gt      echo  I like PHP    lt  pre gt    7   You can Escape your code here  8   Here is list of supported language for  lt class gt  attribute

User · 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    lt pre name  code  class  brush  erlang  gt  lt   CDATA  -module trim    -export  string strip right 1  reverse tl reverse 1  bench 0     bench   - gt   nbench N     N  lt -  1 1000 1000000     nbench N  - gt   N  bench   a        lt - lists seq 1 N       bench String  - gt        string strip right      lists sum           element 1  timer tc trim  string strip right   String                  lt - lists seq 1 1000           reverse tl reverse      lists sum           element 1  timer tc trim  reverse tl reverse   String                  lt - lists seq 1 1000        string strip right String  - gt  string strip String  right    n    reverse tl reverse String  - gt      lists reverse tl lists reverse String        gt  lt  pre gt    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

User · 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   lt   and     symbols convering them to   amp lt   and   ampgt    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

User · Answer

http   formatmysourcecode blogspot co uk  works fine  you just copy   format  paste back

User · Answer

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    lt div style  display none  gt  content  lt  div gt

User · Answer

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 hope it helps you guys   I m quite impressed with what it can do  Above Links stopped working  Try using http   hilite me

User · Answer

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

User · Answer

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      lt 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   gt          lt code style  color  000000 word-wrap normal   gt                lt  lt  lt  lt  lt  lt  lt YOUR CODE HERE gt  gt  gt  gt  gt  gt  gt           lt  code gt    lt  pre gt    How to use     Paste this snippet in text editor    paste your code in  lt  lt  lt  lt  lt  lt        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

User · Answer

To post your html  javascript c  and java you should convert special characters to HTML code  as   lt   as  amp lt  and   gt   to   amp 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

User · 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

User · 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

User · Answer

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

User · Answer

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

User · 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

User · Answer

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

[formatting] Formatting code snippets for blogging on Blogger

Examples related to formatting

Examples related to blogs

Examples related to blogger