Katex/MathJax render

After following the recommendations of the documentation External Renders and install Pandoc, Katex and MathJax, Markdown on my Gitea server don’t show math formula. I tried MathJax and Katex render. I search more information about math rendering on Gitea. How can I show Tex formula trough Markdown, without web third party ?

1 Like

I am interested in this too for the rendering of Jupyter notebook.
If I understand well, the problem is that Gitea “sanitize” the output of external rendered removing all classes, all scripts and style and everything else.
So of course MathJax or Katex cannot work and my Jupyter notebooks just look terrible :frowning:
I am looking at changing the sanitizer configuration but the doc is terrible for that topic.

Hi, I signed up just to answer this.

I have been able to cobble together something that works for me, using docker. I have it on git:

The docker commands that I have allows for in-line rendering of math (via katex) and also rendering of jupyter notebook.

If you’re not using docker then it should still be helpful, the configuration is the same, you just need to install the proper dependencies yourself.

For Katex:

For jupyter notebook:

  • Install python and jupyter dependencies
  • Install pandoc
  • Add a custom entry to app.ini [markup.jupyter] in my custom/conf/app.ini
1 Like

Ah whoops, @ Py-rE I see that you are requesting a Katex solution that doesn’t rely on “web third party”. The solution that I had requires pulling css and script files from Katex.

Hi, @bak I think your answer is good anyway because it should be fairly easy to bundle the Katex file in the docker image by adding them in gitea/custom/public and updating the docker-compose and the templates accordingly.

So what I found, and that is mostly the same thing as @bak but without docker is that you have to do a few different things:

  • Add the CSS and script files for Katex/Mathjax in gitea/custom/templates/header.tmpl (CSS) and gitea/custom/templates/footer.tmpl (JS)
  • Add sanitizer rules for the file type to prevent the sanitizer to remove the classes used by Katex/MathJax (see https://github.com/ben-kenney/docker-services/blob/master/gitea/gitea/custom/conf/app.ini markup.sanitizer.TeX section)
  • Add the Katex/Mathjax code for autodetection of math items in the source in the footer template.

First of all, thanks to both of you for the information.
For my part, I tested what you advise me (with my own .css and .js). I still cannot display formulas. However, in [markup.markdown] @bak flagged the --katex option as potentially problematic. Without this option, I can only display characters from the Greek alphabet or the \sum symbol. It seems that this is due to pandoc -f markdown -t html only. With, I see only the effect of [markup.sanitizer.TeX].

I finally managed to get some nice Tex formulas.
The error I made was in the header.tmpl and footer.tmpl links. Indeed, I had put the complete link, from the root, by mistake. The solution, for me, was to link to KaTeX’s .js and .css from the folder containing them by removing the / ... /gitea/custom/public part.
Since it works, I haven’t noticed any difference between pandoc -f markdown -t html and pandoc -f markdown -t html --katex.
Thanks for guiding me to a solution.

Edit : pandoc -f markdown -t html --katex gives better results, the whole KaTeX syntax seems operational (not the case without --katex)

I recently added latex for markdown (reasonably easy to add) but the only downside is if you edit a markdown cell as the latex auto-formatting ($$) is lost and is replaced by the latex statement

This isn’t just Katex as it also happens with mathjax. I have settled on Katex as it is faster to render (mathjax makes sense for jupyter) but I think a more complete solution (full support or partial around the $$ guards) for this post-processing within gitea would be great

eg: adding/editing a markdown:

saving and the resultant render - looking good

The edit because of reasons

you will notice that aspects of the auto-format bracers have been replaced. This is likely because the js is run in footer.tmpl and thus once the markdown edit is “edited” the script acts on the $$ and attempts to replace.

It occurs whether it is FOOTER or HEADER and equally impacts mathjax

solved: use \$ instead … which is more natural for myself due to jupyter/SO … still an odd rendering artifact that occurs if you don’t do that