Graphics with fixed size boxes around formulas in HTML slides

I'm writing reveal.js slides using pandoc, and I need to include some simple graphics involving formulas within boxes of fixed size. Something like this, or just slightly more involved:

\begin{split}
\framebox[8em]{$x_1$}\framebox[12em]{$x_2$}\\
\framebox[15em]{$y_1$}\framebox[5em]{$y_2$}
\end{split}


Of course, I could build those as external PNG files (e.g. using LaTeXiT) to be included in my Markdown code, but I would like to avoid that, to increase clarity&reusability and also just to reduce the amount of external files I need.

So, my first instinct was to just write the graphics as a displayed equation, hoping that MathJax would deal with it nicely. However, MathJax does not support \framebox, sadly.

My second idea was using CodeCogs scripts to convert LaTeX to PNG on the fly, but they won't support putting maths inside a \framebox; in fact, as soon as you use \$ or $$…$$ delimiters, you get an "Invalid equation".

Third candidate, Google Chart API: does support formulas within a formula, does not support \framebox

Any more ideas?

Here's a screenshot for one of my slides, where the graphics was included as an external PNG:

• MathJax is off-topic here. But maybe you could give an example with your latex code to play with. Pandoc does support several mechanisms for math in HTML, maybe there is one, that works for you. – DG' Apr 17 '20 at 12:33
• Thanks (why do we have a specific tag, if it's off-topic?) Anyway: I'm already using MathJax for the formulas within my slides, and I can't switch to KaTeX or MathML because of other issues. The documentation you linked is indeed what inspired me to try CodeCogs. – fudo Apr 17 '20 at 13:05
• Please make a fully compilable example and preferably a screenshot or mock-up of what you want – DG' Apr 17 '20 at 13:36
• Perhaps a filter could do what you want. Have a look here: github.com/liamoc/latex-formulae – DG' Apr 17 '20 at 13:52