Plaintext table formatting

2009-06-08T17:39:00.002+02:00

I just finished a very small library called TextTable, which will lay out tables in plaintext, ASCII-art style. It is available via haxelib or directly from the source code repository linked above.

Highlighter status

2009-03-13T13:01:00.004+01:00

I just added Python support, as per Tong's request. It now supports html, xml, javascript, php, css, perl, ruby, c, c++, c#, java, scala, haxe, python, haskell, latex, plus a few obscure languages. Admittedly, the support is pretty weak for some of the languages, like c, c++ and c#.

New Highlighter Version

2008-08-10T13:00:00.003+02:00

I cleaned up the code and changed the way nested languages works. The IE bug turned out to be an error in IE's handling of innerHTML for <pre> and certain other elements. It was easily worked around by wrapping an extra <pre> around it. I also made the line numbers non-selectable in FF and IE. I haven't shown off line-numbers really, but here's an example:

I generated it at my own computer, obviously using a different style sheet than I use on this blog.

The currently supported languages are: html, xml, css, ebnf, php, javascript, java, haxe, and a few others. I plan to add ruby, perl, C# and C++ (and C) some time this weekend.

EDIT: Alright, I added those languages. Click here to see the examples.

Source Code Syntax Highlighting for Blogs

2008-08-08T20:28:00.027+02:00

Ever wanted to include syntax highlighted source code on your blog? Here's one way to do it (for Blogger):

First of all, you should disable automatic insertion of <br>, since those are shown verbatim if placed within <pre>-blocks. You do this under Settings -> Formating -> Convert Linebreaks (or similar, set it to "no").

Then you should include the highlighting script somehow. Go to Settings -> Layout and add a bottom element of type "HTML/JavaScript ". Then paste this in:

<style type="text/css">
.code {
    background-color:#F0FFEA;
    border:1px dashed #20A000;
    color:#000000;
    padding:6px 6px 6px 6px;
}

.code-line-numbers {
    color:#809080;
    border-right:1px dotted #809080;
    float:left;
    text-align:right;
    width:1.5em;
    padding-right:3px;
    margin-right:12px;
}

.code-code {
    /* This is the box around the actual code 
    (as opposed to .code which is both the 
    code and the line numbers) */
}

.code-keyword {
    font-weight: bold;
    color: #000000;
}

.code-type {
    font-weight: bold;
    color: #106020;
}

.code-variable {
    color: #004050;
}

.code-number {
    color: #F08000;
}

.code-comment {
    color: #208000;
}

.code-string {
    color: #F00000;
}
</style>
<script type="text/javascript" 
src="http://highlighter.ahnfelt.dk/CodeHighlighter.js">
</script>
<script type="text/javascript">
CodeHighlighter.highlightAll();
</script>

The last few lines load and apply the highlighting. Insert true between the parenthesis in the call to highlightAll to enable line numbers. You could also use another highlighter if you tweaked the above a little.

Now hit save. You're done! To include code in your blog comments, you must write it like <pre class="code XXX">CCC</pre> where XXX is the language name (for example java) and CCC is your code. One example is:

<pre class="code java">
public class VisitorDemo {
    static public void main(String[] args) {
        Car car = new Car();
        Visitor printVisitor = new PrintVisitor();
        Visitor doVisitor = new DoVisitor();
        printVisitor.visitCar(car);
        doVisitor.visitCar(car);
    }
}
</pre>

Which will show up as:

public class VisitorDemo {
    static public void main(String[] args) {
        Car car = new Car();
        Visitor printVisitor = new PrintVisitor();
        Visitor doVisitor = new DoVisitor();
        printVisitor.visitCar(car);
        doVisitor.visitCar(car);
    }
}

You may sometimes have to escape < and > with the corresponding codes < and >. The preview won't show the code as highlighted, but it will be when you hit save.

Now it's time to chose the colors and style you want for your code. Go back to editing the <style type="text/css"> code. It's CSS as you probably know, and it decides nearly everything about how your code looks. If you need more languages, you can ask me to add them or modify the source code and compile it yourself.

That's it, you're done!

Ideas Worth Shredding

Plaintext table formatting

Highlighter status

New Highlighter Version

Source Code Syntax Highlighting for Blogs