Having list of equations aligned on the = sign on each line?

[nowherenearithaca]

I apologize, as this is a ditzy thing but I can't get any permutation of dollar signs or //begins to work when setting the {tex} property (via .raw)... it seems to interpret the $'s as actual characters and not in a tex way,

so something simple like this to work with the equal signs aligned...

x = 2
y = 4

That's possible, right?

[CharlieMcVicker]

Hi - I see this.

I see a couple of issues and will take some time to look at this next week.

My first thought is to use the align environment from amsmath, but it doesn't seem like that is properly loaded. I've had a couple of requests for loading extra packages, so I will hopefully take a crack at that.

If you would like to contribute, I think the underlying logic in convert.ts will need to be changed to use the init function from MathJax, which handles loading packages. (Here is an example from MathJax using the init pattern https://github.com/mathjax/MathJax-demos-node/blob/master/simple/tex2svg)

I believe the best way to get everything working with React's best practices will be a useContext/Provider model, where packages can be specified in a MathJaxProvider component, and the useMathJax hook (and therefore MathComponent) will use a loaded version of MathJax with those packages.

Don't worry if that sounds too hard to take on. I'm just trying to get my thoughts down :)

For your use case, this would mean having a new MathJaxProvider component somewhere in your tree, and then using the amsmath align environment like so:

const src = String.raw`
\begin{align}
x &= 2\\
y &= 4
\end{align}
`

const Component = () => <MathComponent tex={src}/>