Syntax Highlighting in Haunt

2026-01-10T00:00:00Z

I wrote a post just under two years ago about setting up this blog, and then I didn't write anything else! Shame on me.

Part of the issue that got me stuck is that I wanted syntax highlighting. The "standard" option for Haunt[], but it has a pretty minimal set of supported languages. I wasn't satisfied with that.

In the past I've used Pygments, but I wasn't sure how to get that into Haunt.

Well, it's been two years: I think it's finally time to solve this problem!

I had some trouble finding a way to call an external process, passing something to its stdin and reading something from its stdout. In the end, I came up with something like this:

(define (syntax-highlight-strings strings language)
  (let* ((push (pipe))
         (pull (pipe))
         (pid (spawn "pygmentize" `("pygmentize" "-f" "html" ,language)
                     #:input (car push)
                     #:output (cdr pull))))
    ;; Write to the subprocess, then close the port
    (close-port (car push))
    (for-each (lambda (b) (display b (cdr push))) strings)
    (close-port (cdr push))

    ;; Read the result back in, then close the port.
    (close-port (cdr pull))
    (let ((result (get-string-all (car pull))))
      (close-port (car pull))
      (waitpid pid)
      result)))

This uses spawn to start a pygmentize process, writes a list of strings to it, then reads the result back.

We can then walk the whole tree to find the shape that the guile-commonmark reader emits for fenced code blocks with a language (which is <pre><code class="language-scheme">...</code></pre>).

(define (syntax-highlight sxml-tree)
  (define (language-from-attrs attrs)
    (let ((classname (assoc-ref attrs 'class)))
      (and classname
           (string-prefix? "language-" (car classname))
           (substring (car classname) 9))))

  (match sxml-tree
    (('pre ('code ('@ . attrs) . body))
     (match (html->shtml (syntax-highlight-strings body (language-from-attrs attrs)))
       (('*TOP* element "\n")
        `(div (@ ,@attrs) ,element))))
    ((tag ('@ . attrs) . bodies)
     (cons* tag (cons '@ attrs) (map syntax-highlight bodies)))
    (((? symbol? tag) . bodies)
     (cons tag (map syntax-highlight bodies)))
    ((? list? elements)
     (map syntax-highlight elements))
    (_ sxml-tree)))

Then it's just a matter of calling syntax-highlight on the post-sxml in our theme's #:post-template function.

(define my-theme
  (theme #:name "My Made Up Theme"
         #:post-template (lambda (post)
                           `((h1 (,post-title post))
                             (div ,(syntax-highlight (post-sxml post)))))))

This sets up the HTML necessary for colours, but to get actual colours you'll need to generate a stylesheet with the colours you want. The pygmentize command can do this. This will print the styles to stdout:

pygmentize -S default -f html

You can include these styles in your page (either in a linked .css file, or inline) and colours should appear.

Hello, World!

2024-01-26T00:00:00Z

As this blog enters the world, let us begin in the customary way: "hello, world!"

This blog will be a place for me to write things. I'm not really trying to achieve anything with this, except to write more words, so keep your expectations low. 🙂

For some reason, I have decided on a slightly odd software stack for this blog: I am using the Haunt static site generator. It is pretty bare-bones, and requires some up-front setup. Haunt is not much more than a Guile Scheme library for parsing posts and constructing pages from them. It has a few helpers, and a way to define "themes", but not that much else.

I decided to define a fancy style that I saw in an Org mode exporter time, to put the name of a language on the top-right of a code block.

pre code:after {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    outline: 1px solid black;
}
pre:hover code:after {
    display: block;
}

I need to make sure to define a new style for each language I use, though.

.language-scheme:after { content: "Scheme"; }
.language-css:after { content: "CSS"; }

But I should also add some sort of source highlighting, I guess. I have no idea how hard that is going to be.

Anyway, it's a start!

The Zanc Report

Syntax Highlighting in Haunt

Hello, World!