Approach for handling javascript expressions inside of math blocks?

[mattvague]

In the app I'm working on I need to be able to insert dynamic values into Katex math blocks in MDX, for example:

export const a = Math.floor(Math.random() * 10)

What is the derivative of ${a}x^2$?

Obviously this doesn't work out of the box because a) curlies are part of Katex syntax, and b) anything inside of dollar sign delimiters is parsed by remark-math as Katex instead of as JSX or MDX.

Unless there is some fancy interpolation trick I'm missing here, it seems like I have two choices:

1. Use a component that that renders it's children prop as katex (instead of using remark-math) e.g.

import Katex from '../components/Katex'

export const a = Math.floor(Math.random() * 10);

What is the derivative of <Katex>{`${a}x^2`}</Katex>?

2. Invent my own expression delimiters that don't clash with katex, and then somehow tokenize anything inside them as expressions that can be evaluated with micromark-extension-mdx-expression

export const a = Math.floor(Math.random() * 10)

What is the derivative of $[[a]]x²$?

The first option does currently work, but adds a lot of extra visual noise to my content which tends to have a lot of math blocks per page so is very much not ideal.

So I guess that's my question: is there a fancy trick I'm missing to accomplish this JS expressions inside of math blocks out of the box? If not, any advice on the best way to go about accomplishing option 2?

Thanks!

[wooorm]

Interesting!

• It’s probably not a good idea to include random numbers in MDX. As MDX is used with typically functional and pure React-like frameworks, it’s expected that rendering it twice would produce the same result
• What you want is impossible:
  • You use plugins, which work at compile time, so when MDX is compiled to JS, the math gets highlighted
  • You define variables, which happens at run time, so in a browser or so, when the math is already highlighted
• Of course, like the component you mention, there are alternatives. Two more alternative:
  • You can use two math spans, with the expression in between: $x${a}$y$ the “variable” : in your
    then use
  • Like programming, (LaTeX) math also has “variables”. You can rework your prose to print the value at the variable: Let’s say `🍰` is {Math.PI}, and then use the “variable” 🍰 in your math.

[wooorm]

highlighted

That was a typo. Highlighting programming code is a very similar problem, that I mixed up here. “Marked up” here makes more sense

I realized that even if what I described is doable it wouldn’t necessarily solve my problem since the value of the JS expression still needs to be evaluated as katex

Indeed. The assumption here is that it’s a number. But it could be more LaTeX math. Which needs to be “marked up”.

I guess I could just write my own plugin which transformed any children of my <Katex> tag to a template string

I was thinking of that, it could be done in rehype-katex/rehype-mathjax, however, it doesn’t work as I attempted to say with the compile/run difference, because KaTeX/mathjax expect a complete input string and generate complete output HTML, with no room for variables that can be “interoplated” later:
https://github.com/remarkjs/remark-math/blob/08c7efcd4027b494e037125e0038d88aeb64a9b8/packages/rehype-katex/index.js#L48
Perhaps the interpolation can be solved (e.g., by injecting funky unicode characters before and replacing them after, but not sure if that would be “marked up” correctly by KaTeX/mathjax), but it’s most likely too complex for rehype-katex/rehype-mathjax.

Latex/Katex has macros but I’m not sure what you mean by it having variables, nor how that would work in my case. Can you elaborate?

I mean that in the math $x$, x is a variable. In the rest of your prose you can explain what x holds. So perhaps you can reword your prose.

[mattvague]

That was a typo. Highlighting programming code is a very similar problem, that I mixed up here. “Marked up” here makes more sense

Gotcha! No problem.

I was thinking of that, it could be done in rehype-katex/rehype-mathjax, however, it doesn’t work as I attempted to say with the compile/run difference, because KaTeX/mathjax expect a complete input string and generate complete output HTML, with no room for variables that can be “interoplated” later:

Oh with this solution I was thinking I would not even be using rehype-katex and would just be using my own Katex component like this that handled the rendering itself at runtime rather than at compile time (actually technically "pretender time" in my app since I'm SSG-ing then hydrating). As I say, the Katex component idea does already work, it's just ugly syntax for my content creators as-is so I was thinking I could maybe at least cut out the curlies / backticks using a custom parser.

[mattvague]

I mean that in the math $x$, x is a variable. In the rest of your prose you can explain what x holds. So perhaps you can reword your prose.

Ahhh, I see. Yeah unfortunately that won't work for us either as we'll be using these dynamic segments for a lot of things in math blocks, not just for simple variable assignments like Let x = 10 or something.

[wooorm]

ok, I believe I’ve answered your Qs. Do let us know what you end up with :)

[mattvague]

You have, thanks a ton for your time! I'll let you know what happens

[mattvague]

For anyone who lands here: I've released a package that handles this case: remark-mdx-math-enhanced

[kazoomarc]

hello can you help me with an error in mdx or nextra i dont know the source

i posted it as follows on the nextra discusiion page:

I am having this error Could not parse expression with acorn and i dont know how to solve it. I have a lot of math equations that involve ax somehow so those are getting highlighted and the whole page doesnt compile. How can i deal with it. Or how to make the compiler to leave the math stuff to katex only