Simple typst inserter

Written on 2025-12-21

header-composer-inserter? I just met her!

Unknown

Background

Right after the yesterday's commemorate achievement of launching a webhook I had to start studying for the oncoming colloquium. For those unfamiliar with what colloquim is: it's a superior form of knowledge control. Most probably learn about the same from 2-3 hours there as from the rest of the semester.

One of the problems posed for the colloquium was eye-opening for me. So much in fact that I wanted to make an article about it. But this would mean I'll have to be able to display equations. On the old website I used MathJax to render LaTeX equation. But this has downsides, the most prominent one of which is I don't want to type equations in LaTeX. I would prefer typst's syntax 24/7 365 days in a year for my whole life. The other reason is that MathJax approach needs MathJax to render every time, which doesn't sound very reliable and not at all customizable.

So I had a concept that I successfully implemented and would like to share.

Concept

The idea is the following:

you type equations in html like you normally would in typst
you run a script to transform the equation to a link to an svg generated from it

But I immediately noticed a drawback: once you transformed the equation there is no way back. What if it was a long one and you had to make a tiny correction? So the final concept is:

you type equations in comments in html with typst syntax
you run a script to insert a link to an svg generated from the equation just below it

Then if you need to edit, you just do it inside the comment and run the script again.

So as a proof of concept I made some simple scripts and surprisingly they worked as wanted almost first try! Had to ask DeepSeek about regex, but that's about it.

Showcasing

For anyone interested I posted a code on my github. It'll need further improvement and I am looking forward to hearing your suggestions but it works!

So as I am writing this article, say I need to insert an equation. Let's pick a long one.

HTML

<!--
    $ln((k_1(epsilon))/(k_1(epsilon^0))) = e^2/(4 pi epsilon_0 2 k T)(1/epsilon 1/epsilon^0)(Z_A^2/r_A + Z_B^2/r_B - (Z_A + Z_B)^2/r^eq.not)$< born >
-->
        

Then I go to eq-to-svg.py and just run it. Ending up with this

HTML

<!--
    $ln((k_1(epsilon))/(k_1(epsilon^0))) = e^2/(4 pi epsilon_0 2 k T)(1/epsilon 1/epsilon^0)(Z_A^2/r_A + Z_B^2/r_B - (Z_A + Z_B)^2/r^eq.not)$< born >
-->

<div class="equation">
    <img src="./assets/typ/born.svg" alt="ln((k_1(epsilon))/(k_1(epsilon^0))) = e^2/(4 pi epsilon_0 2 k T)(1/epsilon 1/epsilon^0)(Z_A^2/r_A + Z_B^2/r_B - (Z_A + Z_B)^2/r^eq.not)">
</div>

        

Now here is the result:

ln((k_1(epsilon))/(k_1(epsilon^0))) = e^2/(4 pi epsilon_0 2 k T)(1/epsilon 1/epsilon^0)(Z_A^2/r_A + Z_B^2/r_B - (Z_A + Z_B)^2/r^eq.not)

Oh wait! Nooo way. I forgot the minus before the 1/epsilon^0 term. No minus? No problem. Just add it and run the script again to gain the following.

Have you noticed the equation color is the same as the left border of the quote? That's because the header-composer-inserter.py (which makes and inserts a styling header into the .typ files) took the color variable from the website's css!

There are other cool details included like indent matching and you may have noticed the alt being composed on the way. So just as I said, it's quite customizable and independent. I'll try to make this setup more compact and optimized.

Oh and stay tuned for the kinetics article!

have fun
a-for-short