zacharymoring.com

My personal website, powered by Django. The website is styled using Tailwind and deployed to a container service on Digital Ocean.

I was inspired to base my article layout on the web version of the book Crafting Interpreters, which makes extensive use of margin notes. How do we do that in Markdown?

The “purest” way to do it would be to customize the Markdown renderer to look for a certain construct – say, block quotes – and interpret them as margin notes. Then, something like this:

Here is the main column text.

> Here is a margin note.

Would get laid out simply as:

┌───────────────────────────────┬────────────────────────┐
│ Here is the main column text. │ Here is a margin note. │
└───────────────────────────────┴────────────────────────┘

The problem with this approach is that Markdown doesn’t actually have very many constructs defined, so setting one aside for this purpose means you can’t use it in the article itself.

Block quotes are cool. Sometimes I want to use them. So I don’t want to eliminate them completely by allocating them to the renderer.

— Me

Plus, customizing markdown rendering like that would mean I can no longer just trivially use the out-of-the-box Markdown renderer in the markdown Python package.

The solution is to break an Article into a series of Chunks, where each Chunk has a main body and a margin note, both of which are Markdown strings. Then, instead of rendering the Article body, we just iterate over the chunks that make up the article. Using CSS grid, it is very easy to get the triptych layout I want, and I can easily configure the margin notes to slide under the accompanying main text for small screens.