Painless inserting of nicely highlighted code block to my blog

If u happen to like the way i display code blocks in this blog & have read my previous post abt how i have given this blog a face-lifting, here are some extra steps i've taken to conveniently allow me to:

# 1. edit whatever code i want to display in vim

# 2. use a user-defined command (while still in vim) :Xc to process the entire (or selected lines) of the current buffer to yield nicely-highlighted code block & load it to the X11 clipboard (using xclip)

# 3. use middle mouse click (hehe, i'm using thinkpad, anyway, this can be done by doing left & right click together on mouse) to paste it to whereever i like (eg. the textarea i'm typing in right now)

Enough said, let's get into action:

# S1. Installing the required packages:

pacman -S xclip

# S2. Inserting the user-defined command :Xc to ~/.vimrc

1 2 3 4 5

func! Xclip() range execute ":!~/bin/code2html.rb " . bufname('%') . " " . a:firstline . ":" . a:lastline . " | xclip" endfu com! -range=% -nargs=0 Xc <line1>,<line2>call Xclip()

# S3. Revising the existing ~/bin/code2html.rb to accept extra args

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#!/usr/bin/env ruby require 'rubygems' require 'coderay' require 'tempfile' file = ARGV[0] range = ARGV[1].split(':').map(&:to_i).map(&:pred) rescue nil if range basename = Time.now.to_i.to_s extension = file[/\/.*?.(\.[^\.]*?)$/,1] Tempfile.open(extension ? [basename, extension] : basename) do |fh| fh.write(File.readlines(file)[range[0] .. range[-1]].join) file = fh.path end end puts %|#{coderay.scan_file(file).html(:line_numbers => :table)}|. gsub('coderay','coderay').split('<pre').map{|s| !s.include?('</pre>') ? s.gsub("\n",'').squeeze(' ') : ( parts = s.split('</pre>') [parts[0], parts[1].gsub("\n",'').squeeze(' ')].join('</pre>') ) }.join('<pre')

To try out, restart ur vim to edit any file, to convert the entire file, run the following command in vim:

:Xc

Alternatively, if u want to convert the selected lines (in visual mode, using Shift-v to select the specific lines):

:'<,'>Xc

And to do the pasting, just do middle (mouse) click on any textarea u are working on.

New Face New Look

Finally given this blog a face-lifting. Well, 99.9% of the credit goes to (1) coderay, (2) syntax highlighting railscast, & (3) the new template designer of blogger.com, while the rest falls under some minor hackish tweaking on my part. Anyway, here's the fragment that customizes the blog template:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<style type='text/css'> code, table.coderay { background-color: #111111; color: #E6E0DB; overflow: auto; display: block; margin: 15px 0px 0px 0px; padding: 0px 20px 15px 20px; -moz-border-radius:10px; -webkit-border-radius:10px; } table.coderay { padding: 0px 20px 0px 0px; } table.coderay td.line_numbers { color: #444444; padding: 0px 5px 0px 8px; } table.coderay td.code { padding-left: 5px; } table.coderay .an { color:#E7BE69 } /* html attribute */ table.coderay .c { color:#BC9358; font-style: italic; } /* comment */ table.coderay .ch { color:#509E4F } /* escaped character */ table.coderay .cl { color:#FFF } /* class */ table.coderay .co { color:#FFF } /* constant */ table.coderay .fl { color:#A4C260 } /* float */ table.coderay .fu { color:#FFC56D } /* function */ table.coderay .gv { color:#D0CFFE } /* global variable */ table.coderay .i { color:#A4C260 } /* integer */ table.coderay .il { background:#151515 } /* inline code */ table.coderay .iv { color:#D0CFFE } /* instance variable */ table.coderay .pp { color:#E7BE69 } /* doctype */ table.coderay .r { color:#CB7832 } /* keyword */ table.coderay .rx { color:#A4C260 } /* regex */ table.coderay .s { color:#A4C260 } /* string */ table.coderay .sy { color:#6C9CBD } /* symbol */ table.coderay .ta { color:#E7BE69 } /* html tag */ table.coderay .pc { color:#6C9CBD } /* boolean */ </style>

Plus the help of the script ~/bin/code2html.rb:

1 2 3 4 5 6 7 8 9 10 11 12

#!/usr/bin/env ruby require 'rubygems' require 'coderay' puts %|#{coderay.scan_file(ARGV[0]).html(:line_numbers => :table)}|. gsub('coderay','coderay').split('<pre').map{|s| !s.include?('</pre>') ? s.gsub("\n",'').squeeze(' ') : ( parts = s.split('</pre>') [parts[0], parts[1].gsub("\n",'').squeeze(' ')].join('</pre>') ) }.join('<pre')

As ~/bin is already in my $PATH, all i need to do to convert any code to the nice code blocks u see here is to run:

code2html.rb <PATH_TO_ANY_FILE>

Hmmmm .. not too bad rite ? Now, what is left is to set aside some time to do some cleaning up for the rest of this blog (sweat).