🐛 BUG: Math in markdown throws errors or crashes Astro fully.

[AlexLike]

What version of astro are you using?

0.22.6

What package manager are you using?

pnpm

What operating system are you using?

macOS Monterey 12.1

Describe the Bug

When using remark-math and remark-katex to extend the default markdown pipeline @astrojs/markdown-remark (as described in the docs),

• In v0.22.3 curly braces used in formulas cause Astro to throw errors. $f\colon\mathbb R^x$ is translated correctly. $f\colon\mathbb R^{x}$ throws Syntax error "x".

• In v0.22.6 Astro quits unexpectedly in both cases with shell error zsh: bus error pnpm dev.

Please view the full example linked below.

EXPECTED BEHAVIOR: Strings surrounded by $-signs should be ignored by Astro and handled by remark-math and remark-katex. Astro should not try to evaluate contents of curly braces as JS expressions when they are nested within a math context.

Link to Minimal Reproducible Example

https://stackblitz.com/github/AlexLike/astro-math-example

[jonathantneal]

This may be compiled related, @natemoo-re ?

[tony-sull]

withastro/astro#2566 looks like it's likely the same underlying issue when using remark-katex

@natemoo-re any idea if this would be an issue specific to the Astro compiler, or an integration issue with the remark-katex plugin?

[ejdrien]

withastro/astro#2566 seems to be fixed after upgrading to astro@0.23.0.

But the problem initially described by this issue is yet to be resolved.

[ejdrien]

Surely, ignoring content surrounded by $ might prevent some errors in the future but doing so wouldn't actually solve this issue because the error happens even without any math.

Here's a reproduction link.

[LorenzoLeonardini]

I've been fighting with the same problem. This is the result of my "experiments".

To me it looks like it's the templating engine trying to do stuff. {3} is fine because that's a JS number literal, {x} is not because it looks for a variable named x. A messy workaround is to define those variables in setup:

---
setup: |
    const x = 'x';
    const y = 'y';
---

{x} {y} should now work

In some Astro versions {'{}'} prints the string literal "{}" and {{}}gives you "[object Object]" (doesn't appear to work like that in all versions though? 0.24.3 does this, 0.23.7 does nothing)

Another interesting aspect is that if you do the variable workaround it doesn't seem like it's properly using them for templating, it doesn't look at their values, just if they exist. What I mean is

---
setup: |
    const x = 'y';
---

{x}

prints "x", not "y", so it doesn't really "template".

Basically the TL;DR of what I understood by fiddling around (keep in mind I have never looked at how astro works under the hood): the "template engine" wants to validate Markdown pages and therefore treats stuff like {x} as JS variables, but the "template engine" is not actually involved in the rendering process, so the value of the variable is not relevant.

This makes it impossible to have complex math using LaTeX, but also makes it extremely hard (if not impossible) to just have "{}" somewhere in the page.

Note that, apart from some past broken releases, the "template engine" does not touch code blocks, so brackets are ignored in code.

[songololo]

Also running into this issue using the latest astro 26.1

In my case I'm trying to use remark-math and rehype-katex.

$\sum_{j}$ works when used inside a .md page, but when used inside a <Markdown> component from a .astro page it throws this form of error:

j is not defined
ReferenceError: j is not defined

Adding j = 'j' to the head of the .astro page fixes the error, but this is a rather messy workaround if using lots of math in complicated equations... for example: $\scriptstyle\big(\sum_{i}^{S}p_{i}^q\big)^{1/(1-q)}\ \q\scriptstyle lim_{q\to1}\exp\big(-\sum_{i}^{S}\ p_{i}\ log\ p_{i}\big)$

So, it would be preferable if there were a way to turn off astro parsing inside dollar signs, or inside the <Markdown> component, or if there were a way to mark text that astro should ignore.

[natemoo-re]

This seems to be a compiler issue, there is special handling to ignore {} inside of <math> but it still doesn't seem to be working here.