Add math rendering to posts using KaTeX

[Gravydigger]

What kind of changes does this PR include?

• Changes with larger consequences (logic, library updates, etc.)

Description

Adds support of rendering TeX maths equations & symbols inside posts using KaTeX. Wrap a TeX statement with $$ to allow rendering.

Tex rendering before this PR:

Tex rendering after this

[netlify]

‼️ Deploy request for astro-theme-cactus rejected.

Name	Link
🔨 Latest commit	a36c64d

[chrismwilliams]

@Gravydigger thank you for doing this & sorry for taking so long, I'll get this merge by next week

[Gravydigger]

After using this for a while, I have realised it does have some issues with the RSS Feed regarding rendering, for example:
Website:

RSS feed (I use Feeder):

This is caused by KaTeX using CSS to render the text, as KaTeX shows both a nice formatted version as you see on the webpage, just also has a version for screen readers to parse, which is hidden, hence the repeating of text in RSS.

I only just now had a look at Astro's RSS documention, so a custom stylesheet might need to be implemented to fix these issues.

[Gravydigger]

ok, having a look on how RSS works in general and how its set up in this template, it seems that when a RSS reader fetches the full article, its up to the RSS reader to format it. the only way to fix it would be to include the content directly into the rss.xml, which might be undesirable.

[chrismwilliams]

Ahh I see what you mean. That's a shame but I guess it makes sense it's all css. I know some readers will drop any custom stylesheet, so yeah you're probably right in that it's going to be including the content directly, which still might need 'cleaning-up'.

Umm. I'm not completely against adding the content directly, e.g. Astro's docs, but I'm guessing it's not going to be much better, unfortunately, but I'll see what output we get.

[Gravydigger]

Here's the KaTeX docs if your curious and the stylesheet:
https://katex.org/docs/browser
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" rel="stylesheet">

Now KaTeX isn't the only option, as specified in the remark-math monorepo, MathJax being another option, but I wouldn't recommend. It has an option to turn the LaTeX into an SVG, but does break formatting on the website. The other options would require css aswell.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MelihDarcanxyz]

Hi, I'm interested in this PR. Is there any way for me to help? Not KaTeX specific, but math notation in general, I'd be glad to contribute.

[Gravydigger]

The reason this has gone stale is more so over a design decision, than a technical implementation.
The issue currently is that RSS readers don't render the custom CSS used by KaTeX to render the math notation. The other program that can be used, MathJax, can render it out into images, but this causes issues with in-line rendering.
Basically RSS can't really support math notation in a way I have seen. If you can somehow find a way to overcome that, and also make it look decent on the website itself, then we can implement it.