Anthony Mattox Interaction Design + Digital Art

In my blog I frequently share code for little projects in Processing & Arduino. It’s always bothered me to look at the black and white text which, in comparison to the beautifully colored code in various editors, is quite a strain to read. I considered a few ways to do this, primarily client side with JavaScript, server side with PHP, or something pre-formatted in any language.

I decided to write a script to add in the necessary HTML to color the code, which I could then paste into my site. Although this does add a fair amount more to the size of the HTML files on the site I decided it was the best way to go. A server side script, probably built into a WordPress Plugin, would be nice and easy to use, but it would be run every time the page was loaded and would be a load on the server. A JavaScript highlighter would also work well, but it would still be a large script anyway and it would add the hassle of browser inconsistencies and run time on slower browsers.

Since I was building this script I wanted to make it available to others. The Processing and Arduino communities, which the script is built for, are both great about sharing code, and this will make sharing just a little bit easier.

The script is built into a simple site at www.anthonymattox.com/code_formatter. You can paste your code into the page, adjust the settings, and format it. The script returns the HTML and a chunk of CSS based on the styles you selected on the first page. Paste the HTML into your site and either add the given CSS or use it as a model to write your own.

In my blog its styled to look something like this. Unfortunately it’s still black in rss readers.

/* sample processing code */
/* analog clock */
PVector mid;
float sc, mn, hr, s, m, h;

void setup() {
  background(20);
  size(400,400);
  noFill();
  stroke(200);
  smooth();
  frameRate(1);
  mid=new PVector(width/2,height/2,0);
}

void draw() {
  background(0);
  s=float(second());
  m=float(minute());
  h=float(hour());
  sc=(s-15)/60*TWO_PI;
  mn=(m-15)/60*TWO_PI;
  hr=(h-3)/12*TWO_PI+mn/12;
  
  strokeWeight(2);
  stroke(200,0,0);
  line(mid.x,mid.y,mid.x+100*cos(sc),mid.y+100*sin(sc));
  stroke(200);
  line(mid.x,mid.y,mid.x+110*cos(mn),mid.y+110*sin(mn));
  strokeWeight(4);
  line(mid.x,mid.y,mid.x+60*cos(hr),mid.y+60*sin(hr));
  
  stroke(50);
  ellipse(mid.x,mid.y,240,240);
}

If you don’t know already, WordPress is kind of a big deal, and it’s about time i give it some credit. WordPress is a completely open source content management system. Being open source it is not only free for anyone to use, the source code is also visible and unencrypted making it easy for anyone which a little scripting knowledge to customize it, or use parts of it elsewhere. A content management system (cms) is a web interface which allows users to manipulate the content of a web site without having to write any code. Even for people who do know what their doing as far as building web pages this is a far better system than manually trying to write each page. I use WordPress for this website and for a few other pages I’m working on right now.

In addition to being free, the system is also very easy to use, and most importantly very well designed. Through the interface I can add or modify posts on my blog, upload images, create pages, manage my categories and links, comments, designs, and just about anything else the average blogger could ever want to do. There is even a visual editing mode (wysiwyg) allowing users to style the content of posts and pages without writing any html. Since WordPress is installed on your own server, although they also have their own hosting service now, you don’t have to worry about annoying ads and logos and a silly looking sub-domain as you would with a service like blogger. Read On »