Align numbers with a minus sign in a matrix for a quarto document in html

Question

I would like to align numbers with a minus sign in a matrix for a Quarto document in HTML format, similar to the following example:

$$\begin{bmatrix}
   3  & 4 \\
   -2 & 0 \\
   1  & 2 
\end{bmatrix}$$

One possible solution is to use \phantom{-}:

$$\begin{bmatrix}
   \phantom{-}3 & 4 \\
             -2 & 0 \\
   \phantom{-}1 & 2 
\end{bmatrix}$$

However, when the matrix has many numbers, this is not very efficient. I am aware that in LaTeX, the mathtools package can achieve the desired result:

\documentclass{article}
\usepackage{mathtools}

\begin{document}

\[
\begin{bmatrix*}[r]
 3  & 4 \\
 -2 & 0 \\
 1  & 2 
\end{bmatrix*}
\]

\end{document}

Is it possible to use the mathtools LaTeX package in a Quarto HTML document? Alternatively, if not, are there other alternatives to mathtools to consider, keeping in mind that Quarto uses MathJax to render equations?

Answer 1

I think you were close to solving your problem (assuming I have understood the issue at hand). Simply just use the right alignment on bmatrix* and compile the qmd file. It should work even without loading mathtools explicitly (at least working in my case and I am using quarto version 1.3.450)

---
title: "mathtools in html"
format: html
# include-in-header: load-mathtools.html
--- 

## Quarto

$$
\begin{bmatrix*}[r]
   3  & 4 \\
   -2 & 0 \\
   1  & 2 
\end{bmatrix*}
$$

---

And if for some other reason, you need the mathtools extension, you need to explicitly load it.

load-mathtools.html

<script>
  window.MathJax = {
      loader: {load: ['[tex]/mathtools']},
      tex: {packages: {'[+]': ['mathtools']}}
  };
</script>