Saturday, November 13, 2010

Embedding Code Snippets in blogger

I have tested 2 methods.

1. Client side JavaScript library called SyntaxHighlighter. I think this is a decent and easy to use method. It allows the line width of the snippet to be much wider then the blog's column. The annoying part of this method is that if you want to use a language not in the mainline you have to find it made elsewhere or DIY. Obj-C is not in the mainline. HowTo for this method.

2. Use vim :TOhtml to create static html chunks formatted and styled as the code appears inside vim, using vim as a WYSIWYG editor. This method is discussed Here. I modified the vim function provided by that HowTo to output inline html styling since it is easier to embed in blog posts. This solution allows me to easily modify the appearance of a snippet inline and the snippet is based on a dark background. This method allows you to leverage vim for syntax highlighting, which is a huge plus. The disadvantage to this style is that it isn't embedded inside of an H/V scrollable document which means blogger will wrap long lines. This could be fixed by wrapping the html chunk in something to provide the scrollable document area.

My Vim function for generating html chunks.

function! DivHtml(line1, line2)
  exec a:line1.','.a:line2.'TOhtml'
  "remove everything up to <body>
  %g/<\/head>/normal $dgg
  "Change Body to <div>
  %s/<body\(.*\)>\n/<div class="vim_block"\1>/
  "Replace the ending it </div>
  %s/<\/body>\n<\/html>/<\/div>
  "remove all <br> tags
  %s/<br>//g
  set nonu
endfunction
command -range=% DivHtml :call DivHtml(<line1>,<line2>)

^ Was generated with this function. Guess my vim color scheme?

No comments:

Post a Comment