Wonderful news!
Unfortunately they don't work on GitHub Pages yet. I still have to resort to GitHub Actions to invoke a container to render my RMarkdowns into a GitHub Pages branch --- wish one day I can retire that pipeline.
Render mathematical expressions in Markdown On GitHub
41–50 of 114 posts
Re: Render mathematical expressions in Markdown On GitHub
#42Nice! A welcome addition! Too bad they're not using KaTeX [0] instead. It renders the maths server-side, so there's no runtime needed. An additional bonus is that the resulting math is copy-pasteable, which in the case of disply math might not be that useful (since most equations are to complex to be meaningfully copy-pasted with unicode), but it helps from inline math dissappearing when copy pasting texts. But, that…
Our GitLab docs state "Math written in LaTeX syntax is rendered with KaTeX" https://docs.gitlab.com/ee/user/markdown.html but I'm not sure it isn't just using MathJax under the hood.
Re: Render mathematical expressions in Markdown On GitHub
#43I wonder if, at all, other fonts will ever be used for MathJax max display? The 'default MathJax font' is also just the 'default LaTeX font' (CM?). There are countless other, high-quality math fonts, for example the TeX Gyre Math fonts. I'd like to see those one day, I prefer them. It would be not more out of place than the current version. There are font pairs, too, like TeX Gyre Pagella and its TeX Gyre Pagella Mat…
MathJax 3 currently only supports the default font, as more general font support is still under development [1]. According to the relevant GitHub issue, font support is planned to be part of the next major release, which is supposed to arrive sometime this year [2]. This should then include Gyre Pagella out of the box (as was the case for MathJax 2), but also make it possible to use custom fonts (which apparently wasn’t possible with MathJax 2) [3].
[1]: http://docs.mathjax.org/en/latest/output/fonts.html [2]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-... [3]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-...
Re: Render mathematical expressions in Markdown On GitHub
#44Earlier quoted context omitted.
For pages with lots of mathematics markup, it is far better (in terms of download size) to send the latex markup and the katex library to the browser, and render it there. I tried rendering the mathematics server-side using katex on my own website a while ago, and the div soup generated by katex takes up loads of space. Original page (compressed): 10 kB Page with server-rendered Katex (compressed): 50 kB Katex.js (co…
For my blog (e.g. https://daniel.lawrence.lu/blog/y2021m09d08/ with tons of math), I render the math serverside using MathJax and serve them as SVG images (with alt text for the visually impaired). They get cached too which is nice especially since many symbols are duplicated. Seems fast enough for me.
You're being modest. This is easily the most performant option... although it means losing interactivity (right clicking equations on GitHub allows copy to clipboard, A11y features, etc).
Running the JS client side, like GitHub, means blocking the thread. You're either going to be 1. delaying other JS from running, or 2. rendering late, shifting the layout – which is what GitHub has chosen: https://imgur.com/a/y47haf9
(Sending the rendered div's is a non-starter. Large document sizes delay domContentLoaded, slow down browsers, aren't shared cacheable resources, etc.)
Your approach, then. On your page there are 178 SVGs. Total gzipped size is 490KB. SVGO[0] gets that down to 311KB – that's 1.74KB transferred per equation. These are non-blocking, immutable, cacheable assets. Brilliant.
Upgrades:
- Figure out viewbox and inline height/width values on the HTML so no layout jank (aka "Cumulative Layout Shift"/CLS) occurs. Unsure if this is possible for inline math.
- Add `loading="lazy"` afterwards. Users that don't scroll the entire length of the page won't suffer unneeded downloads, and the inlined sizes will prevent late CLS for those that do.
- Maybe re-add interactivity? Cheap option: just support copying alt-text in a context menu.
Re: Render mathematical expressions in Markdown On GitHub
#45Nice! A welcome addition! Too bad they're not using KaTeX [0] instead. It renders the maths server-side, so there's no runtime needed. An additional bonus is that the resulting math is copy-pasteable, which in the case of disply math might not be that useful (since most equations are to complex to be meaningfully copy-pasted with unicode), but it helps from inline math dissappearing when copy pasting texts. But, that…
I used to think KaTeX was far superior to MathJax but now I'm not so sure. I made https://mk12.github.io/web-math-demo/ to compare them and other things. They're definitely superior to browser MathML rendering today, which is nonexistent in Chrome (though see https://mathml.igalia.com/), quite bad in Safari, and OK in Firefox. It's true pre-rendering KaTeX produces a lot of markup, but it compresses very well so I don't think it's a big deal. They both have MathML for accessibility, but MathJax is more flexible in letting the user right-click and change the rendering engine, view raw TeX, etc. Rendering KaTeX on the client side is faster than MathJax, but in my experience KaTeX is slightly worse quality, e.g. https://github.com/KaTeX/KaTeX/issues/3400 has gone unfixed for a long time.
Re: Render mathematical expressions in Markdown On GitHub
#46Earlier quoted context omitted.
For my blog (e.g. https://daniel.lawrence.lu/blog/y2021m09d08/ with tons of math), I render the math serverside using MathJax and serve them as SVG images (with alt text for the visually impaired). They get cached too which is nice especially since many symbols are duplicated. Seems fast enough for me.
You're being modest. This is easily the most performant option... although it means losing interactivity (right clicking equations on GitHub allows copy to clipboard, A11y features, etc). Running the JS client side, like GitHub, means blocking the thread. You're either going to be 1. delaying other JS from running, or 2. rendering late, shifting the layout – which is what GitHub has chosen: https://imgur.com/a/y47haf…
> Figure out viewbox and inline height/width values on the HTML so no layout jank (aka "Cumulative Layout Shift"/CLS) occurs. Unsure if this is possible for inline math.
That's a great idea, I should do that. Right now I apply the height and offsets from the SVG file (via vertical-align and height) so that it flows nicely but I should add width too. It is trivially doable since the SVG does contain the width.
e.g.
Re: Render mathematical expressions in Markdown On GitHub
#47Nice! A welcome addition! Too bad they're not using KaTeX [0] instead. It renders the maths server-side, so there's no runtime needed. An additional bonus is that the resulting math is copy-pasteable, which in the case of disply math might not be that useful (since most equations are to complex to be meaningfully copy-pasted with unicode), but it helps from inline math dissappearing when copy pasting texts. But, that…
MathJax can do server side rendering too now!
Re: Render mathematical expressions in Markdown On GitHub
#48I wonder how the grammar works and how this interacts with other Markdown syntax precedence-wise. The specification hasn’t been updated since 2019:
https://github.github.com/gfm/
This clue indicates that it might become really annoying to talk about actual dollar signs in some cases:
https://docs.github.com/en/get-started/writing-on-github/wor...
“Outside a math expression, but on the same line, use span tags around the explicit $.
To split $100 in half, we calculate $100/2$”
Re: Render mathematical expressions in Markdown On GitHub
#49[deleted]
Re: Render mathematical expressions in Markdown On GitHub
#50Funny thing is, this feature (with MathJax) used to be available in 2010ish, but got removed back then as they did not want to have "unvetted" large libraries as a dependency.
Right! And I've been wanting it ever since. This is big news!