an illustrative example
I like to label my code blocks, especially when they describe the contents of a specific file.
That’s been possible with Hugo since 0.93.0, using render hooks for code blocks. Render hooks let you use custom templates for all instances of certain Markdown structures such as links, headers, images, and code! I didn’t think to try them out for labeling code until just now, though. This comment from Hugo Discourse user pamubay got me started. My template builds directly on theirs.
The HTML changes are personal aesthetics. I’ve been using <figure/>
more and more often for illustrative examples beyond — you know — illustrations.
My render hook looks for two attributes, title
and verbatim
. These attributes are added after the language identifier for the fenced code block.
title
is the intended title / caption to attach. The verbatim
flag indicates whether I want this in a monospaced font. Grabbed that one from the Org folks since it seems like a useful differentiator between code and not-code.
Most of the time when I label code samples, I use a filename or identifier, and I’m used to seeing those in monospace. So it makes sense to have code block captions as verbatim by default. So the verbatim
flag only matters if I set it to false, such as for explanatory captions.
So now I can rest happily with Hugo now that it can do almost exactly what I — ooh Pandoc 3.0 is out!
Backlinks
Got a comment? A question? More of a comment than a question?
Added to vault 2024-01-15. Updated on 2024-01-26