Markdown math support (Latex)

[Vagab]

Check for existing issues

• Completed

Describe the feature

Would be cool if markdown preview rendered math as well

If applicable, add mockups / screenshots to help present your vision of the feature

No response

[ferntheplant]

It seems like this would be very non-trivial to implement. Zed uses its own customer renderer so they'd have to make a LaTeX renderer that produces something like MathElement. I didn't dig super deep into that side of the equation but think that once that is done it would be relatively easy to regex match for $ enclosed text and render MathElement as part of the render_markdown_text sequence that currently calculates highlights and generates interactive text elements for hyperlinks.

[bbb651]

pulldown-cmark added support for it so should be easy on the parsing front. Rendering Layout is a lot more complicated, the only potentially useful reference I've found is typst's implementation.

[bitfield]

Just to give an idea of what this might look like (screenshot from the VS Code Markdown Preview extension).

The markup:

1.11 Neptunium. In the fall of 2002, a group of scientists at Los Alamos National Laboratory determined 
that the critical mass of neptunium-237 is about 60 kg. The critical mass of a fissionable material is the 
minimum amount that must be brought together to start a chain reaction. This element has a density of 
19.5 g/cm^3. What would be the radius of a sphere of this material that has a critical mass?

Volume of the critical sphere $$ V_{crit} = 60,000 / 19.5 = 3077cm^3 = \frac{4\pi r^3}{3} $$

So

$$ R_{crit} = \sqrt[3]{\frac{3 \times 3077}{4 \pi}} = 9cm \; ✅ $$

Rendering:

[bersace]

codestral produce markdown math. Very hard to read in assistant panel:

[probably-neb]

This is definitely a neat idea, but as @ferntheplant probably non-trivial to implement given our custom renderer.

I'd definitely be interested in seeing this in the markdown renderer, especially as we get more support for Jupyter notebooks that would benefit from this kind of thing.

In order to keep track of this i'm going to convert this to a discussion because we've decided to move feature/enhancement requests there so it will be more likely someone from the team will see it there when looking for new features to add

[497e0bdf29873]

As a temporary workaround that should be quicker to implement, how about triggering (on save or another key) markdown compilation externally (with markdown-it, which has good support for all sorts of features) and then launching a browser? If feasible, inserting an anchor point at cursor location and directing the browser to that anchor.

This is a similar pipeline as in the TeX package so maybe it could be adapted.

[lnay]

@ferntheplant I played with something along these lines this week. The idea is to render MathML into a bitmap-like format currently already used by GPUI for SVGs, and then something like Temml (or something in rust) could generate the MathML. Zed already uses node for prettier formatting so there is a precedent for running a node process to process text.

Edit: this was just a proof of concept and is much less developed compared to KenyC/ReX I talk about in my other response.

[paperbenni]

Pretty much this idea exact is already implemented in snacks.nvim
https://github.com/folke/snacks.nvim/blob/main/docs/image.md
It works remarkably well, it compiles all latex asynchronously and caches the results of individual math blocks.
Zed could download tectonic like it does with language servers upon opening a markdown file with math blocks, insert the math blocks into a latex template, render that using tectonic and display the result in the markdown preview buffer.

[lnay]

For clarity, my suggestion didn't involve invoking a 'proper' LaTeX compiler like pdflatex or tectonic as is done in snack.nvim. It would see the rendering more tightly integrated into GPUI similarly to how SVGs are currently dealt with.

[497e0bdf29873]

KaTeX is almost standard for rendering math in markdown, and generates some sort of HTML/MathML. It's also Node.js.

[lnay]

It's the HTML/MathML that's the issue here, Zed's markdown renderer does not involve a webview.

[lnay]

I found a project that could be a could fit for maths rendering in GPUI (https://github.com/KenyC/ReX), here's a minimal demo with gpui: https://github.com/lnay/latex-gpui-experiment

KenyC/ReX is very modular and has been used already to have live preview tools: https://github.com/KenyC/maths-preview

[michaelfortunato]

This seems like a good approach perhaps one day we can even render latex in lsp hover windows