Website Extras

Jul 22, 2025

Here are few extra things I have access to in my website if I need them.

Details

asciidoctor has native support for <details> HTML tag. If I write this in asciidoc:

.Click to reveal the answer
[%collapsible]
====
This is the answer.
====

I get this:

Click to reveal the answer

This is the answer.

Admonitions

Admonitions are a neat way to highlight specific information. They are also supported in asciidoctor.

[IMPORTANT]
====
While werewolves are hardy community members, keep in mind the following dietary
concerns:

. They are allergic to cinnamon.
. More than two glasses of orange juice in 24 hours makes them howl in harmony with alarms and sirens.
. Celery makes them sad.

====

Which gets rendered as:

Important!

While werewolves are hardy community members, keep in mind the following dietary concerns:

They are allergic to cinnamon.
More than two glasses of orange juice in 24 hours makes them howl in harmony with alarms and sirens.
Celery makes them sad.

I am still unsure how to style this. I might also have to change the HTML generated.

Quotes

Quotes are pretty useful in a website; my main page uses them!

Here is how you write a quote in asciidoc:

[quote,Monty Python and the Holy Grail]
____
Dennis: Come and see the violence inherent in the system. Help! Help! I'm being
repressed!

King Arthur: Bloody peasant!

Dennis: Oh, what a giveaway! Did you hear that? Did you hear that, eh? That's
what I'm on about! Did you see him repressing me? You saw him, Didn't you?
____

Which we see as:

Dennis: Come and see the violence inherent in the system. Help! Help! I’m being repressed!

King Arthur: Bloody peasant!

Dennis: Oh, what a giveaway! Did you hear that? Did you hear that, eh? That’s what I’m on about! Did you see him repressing me? You saw him, Didn’t you?

— Monty Python and the Holy Grail

Source Code

As a computer scientist, my blog for sure will have some code. Source code listings in asciidoc are simple enough:

[source,python]
----
print('Hello, World!')
----

Becomes:

print('Hello, World!')

I am still on the fence on whether I should have syntax highlighting. I don’t want to fill my blog with code! asciidoctor has some neat features, like adding callouts for specific lines. When I see the need to use those features, I will add styling for them.

Math

asciidoctor did not have any satisfactory way to render math. The only HTML output they had used MathJax (that too an older version). I know MathJax to be slow and the older version is not accessible by screen readers. I could have done something hacky with Katex but now that most popular browsers support MathML, I’d like to use MathML to typeset math in my blog. But, I did not find any MathML renderers for asciidoctor. So I wrote one myself. It just shells out to latexmlmath, which supports packages like amsmath and stmaryrd(indispensable for wacky computer science theory notation). It was very easy to add a new block in asciidoctor. Here is what my MathML block looks like:

[mathml]
++++
\vec{v} \in \mathbb{R}^3 \quad \text{for } x \in \llbracket 0, 1 \rrbracket
++++

which looks like:

\vec{v}\in\mathbb{R}^{3}\quad\text{for }x\in\llbracket 0,1\rrbracket

Pretty neat!