The Teeny-Tiny Happy Hakyll TikZ Pixie

For my blog, I use Jasper Van der Jeugt’s Hakyll system. When I was first looking for a blogging platform, I rejected all the usual choices (Wordpress, etc.), mostly because I’m a borderline obsessive control freak and they didn’t give enough configurability. Plus, they weren’t Haskell. I started writing my own blogging system, but then I found Hakyll. “Great,” I thought, “that’s perfect, except I want something almost completely different!”

Fortunately, Hakyll is written as a library that allows you to do more or less anything you like with it. This is common with Haskell tools: XMonad is another “do what you like example”.

Anyway, I set my blog up in a way completely different from the “normal” Hakyll blog, but still using all the handy tools that Jasper provided. It was pretty easy to do (and it’s even easier now, since Jasper redid the central page processing abstraction to use monads instead of arrows).

Carried away with my success, I added an extra feature that I thought would be cool. I’ve since changed my mind three or four times about whether it really was a good idea, but I’ve now come to the opinion that it’s kind of sweet.

Here’s how it works. There’s a very powerful LaTeX drawing package called TikZTikZ ist kein Zeichenprogramm–“TikZ is not a drawing program”. It’s based on a lower-level package called PGF. that allows you to say things like this:

\begin{scope}[very thick]
  \draw (0.5,0.5) +(-.25,-.25) rectangle ++(.25,.25);
\end{scope}

to draw a little square (TikZ can do a little bit more than this, obviously!). The thing I did was to allow you to embed this within the Markdown for blog posts (between rows of @ signs, just like you put code samples between rows of ~ characters–there’s a special syntax to say “don’t wrap my TikZ code” so that you can add extra libraries and arbitrary LaTeX setup code as well). These bits of TikZ code are pulled out during processing of the blog articles and processed to generate SVG files, using htlatex, and these SVGs are then embedded in the resulting HTML pages, like this:

Why do this? Well, often when you’re writing things with some mathematical content, you want to embed little diagrams along the way to explain things. You can switch out of Emacs, start up Inkscape or something and do some drawing. The problem with that is that it’s really easy to get distracted by the details of the prettiness of your drawing, it’s hard to maintain consistent styling throughout a series of pictures, and it’s hard (or annoying) to get things lined up right in precise diagrams. Or you can quickly write some TikZ right in the document where you are. Once you’ve learnt enough TikZ to be useful, it’s very quick to knock out an accurate sketch of what you want (since you’re talking directly in terms of coordinates, rather than shifting things around by hand), and it’s easy to come back and apply consistent styling when you’re done.

Here are some examples taken straight from the TikZ manual:

Personally, I think that’s kind of fun, although I agree that it won’t be to everyone’s taste. If you want to play with it, you can find the code in my blog repository. You can see the raw Markdown code for this post here.