Thursday, October 30, 2008

Displaying Java code fragments

I noticed that a few people have tried various things to display code fragments in a nice way within the blog. This does seem to be a bit of a problem. I have found the following solution which could perhaps be refined somewhat, but in the meantime would at least provide an acceptable solution.

Java2Html seems to be a nifty little Java program that converts Java code to HTML format with indentation and syntax highlighting. It provides a few options and it seems is also available as an Eclipse plug-in. I have not tried the plug-in. You can download it as a jar, which I believe should run on any operating system that has a JRE available.

This is what I managed to get using the program:



01 int k;
02 int xpos1 = 100
03 int xpos2 = 118
04 int count = 0
05 int timey = 0;
06 int num = 12;
07 
08 size(200200);
09 background(102);
10 noStroke();
11  
12 // Draw gray bars 
13 fill(255);
14 k=60;
15 for(int i=0; i < num/3; i++) {
16   rect(25, k, 1555);
17   k+=10;
18 }
19 
20 // Black bars
21 fill(51);
22 k = 40;
23 for(int i=0; i < num; i++) {
24   rect(105, k, 305);
25   k += 10;
26 }
27 k = 15;
28 for(int i = 0; i < num; i++) {
29   rect(125, k, 305);
30   k +=10;
31 }
32   
33 // Thin lines
34 k = 42;
35 fill(0);
36 for(int i=0; i < num-1; i++) {
37   rect(36, k, 201);
38   k+=10;
39 }





Step by step, here is what I have done:
  1. Download Java2Html from http://www.java2html.de/download.html
  2. Extract into a directory of your choice.
  3. Create a batch file in the same directory to run the program. All I put in my batch file, which I called run.bat, was: javaw -jar java2html.jar
  4. You can now double click the batch file in Explorer or create a short-cut on your desktop. For operating systems other than Windows you'll have to do what is required for that operating system to get the same functionality.
  5. Java2Html allows you to either convert a file or direct text. Select the tab you require and then either open the file or type (cut & paste) your text in the text area.
  6. I selected Line numbers and I set Tab-space to 8.
  7. Conversion is done immediately. If you opened a file, the conversion is available on the clip-board. If you did a direct conversion, the text is available in the "Converted Source" text area.
  8. I stripped off all the headers and code up to the <code> tag and after the </code> tag.
  9. I also removed all the <br /> tags at the end of each line. For this I used vi (my favourite editor). The command for stripping the tags is: :%s/<br />$//g
  10. The normal colour for code is black. My blogger theme did not display this well. To change the black text to white, I used vi again to do a global replacement. The command for this was: :%s/color="#000000"/color="#000000"/g
  11. Now cut and paste what is left over into Blogger using Edit Html
  12. Important: You have to paste this code while in Edit Html and not Compose, or else your HTML code will be displayed rather than the formatted HTML.
I hope this makes sense. Just leave comments if anything seems wrong or not clear and I'll update the instructions.

If I have time I might have a look at the source for Java2Html and either extend or modify it to create Blogger-ready code.

I hope this is of help to someone.

2 comments:

Tsojcanth said...

The code highlight is quite sweet :)
I've played quite a bit to produce a CSS definition for <pre> that displays a bit better in the blog, but this is definitely better.

monkstone said...

Your code is much easier to read, because you've thought of the user....

As a vim user you could have used
:runtime syntax/2html.vim
There is also handy ftplugin valid for Processing 0135 BETA, easily updated though.

http://martinpblogformasswritingproject.blogspot.com/2009/02/syntax-highlighting-tmtowtdi.html