It took me a while to figure out how to publish C/C++ code to the blog(spot). While doing so I messed up the post a few times. Finally, I got it working, and the way I wanted it, such that it looks same across the browsers and is well formatted. I tried a few things and some of them didn’t work. What didn’t work for me were plugins in Windows Live Writer (LW) to post code. Some of them didn’t show the colored text for the keywords and some didn’t have uniformity across browsers.
What worked was gvim/vim. Vim provides a command ‘TOhtml’ to generate html for the code with proper syntax – exactly the way seen in vim. But that is half the job, as BlogSpot doesn’t take the html code with <head> and <body> tags of the generated html. To get it right I had to do two things. First configure vimrc to generate the desired syntax and scheme (more on this later), and then copying the right part from the generated html. Here I will write about the way I did it using Live Writer (LW).
The published code in previous posts is inside a table, which is easy to draw in LW. So, first draw a table (1x1) in edit mode. Then in source mode copy the html generated by vim, starting from first <font> tag to the closing of it (which is at the end of the file) into that table. Even without LW this is easy to do, just add 1x1 table tags in BlogSpot edit post mode and then paste the generated html code. Explained below.
Copy the vim generated html code (as explained above) between these <td> tags.
<td valign="top" width="625"> {copy here} </td>
Note: Remove <pre> tags if any between the <td> tags. width can be adjusted to fit the blog.
After this add bgcolor of the <body> tag from the generated html to the <table> tag in the html code of the post. This will give the background color similar to vim scheme. At this point we have everything in place except the part, that this post won’t look same across the browsers. The reason being, first <font> tag in the pasted code. Where face is set as ‘monospace’ and not a particular fixed width font, like ‘Courier’. Hence, replace whatever there is with this ‘color="#ffffff" size="2" face="Consolas"’. This also gives the color to the ‘regular text’ in the code. In this case white (#ffffff).
This is how it will looked like on completion. Copied code marked in green.
<table border="0" cellspacing="0" cellpadding="3" width="625" bgcolor="#333333">
<tbody> <tr> <td valign="top" width="625">
<font color="#ffffff" size="2" face="Consolas, Courier New">
<Rest of the generated html code>
</font>
</td> </tr> </tbody>
</table>
| 1 int main(int argc, char * const argv[]) { 2 return 0; 3 } |
Here is the vimrc configuration used to get the syntax, scheme and the format. Just add these lines to the existing text. Line numbering can be turned off. If vimrc file can’t be located, typing in command - ‘e $MYVIMRC’ – will fetch it. html_use_css, is a switch to enable/disable CSS in the generated html code. The example above is without CSS styles.
set nu
colorscheme desert
syntax on
set guifont=Courier_New:h10
let html_use_css=0
(After writing this post, I am thinking of doing away with LW. I had hard time formatting and getting the post as I wanted.)
No comments:
Post a Comment