# Katex/MathJax render

**URL:** <https://forum.gitea.com/t/katex-mathjax-render/2565>\
**Category:** Gitea Usages\
**Created:** [October 10, 2020, 2:11pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565 "2020-10-10T14:11:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Py-rE](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/py-re/32/990_2.png) [@Py-rE](https://forum.gitea.com/u/Py-rE)\
**Post date:** [October 10, 2020, 2:11pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/1 "2020-10-10T14:11:03Z")

</div>

Hi,  
After following the recommendations of the documentation [External Renders](https://docs.gitea.io/en-us/external-renderers/) 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 ?

---

<div class="post-metadata">

**Author:** ![lattay](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/lattay/32/806_2.png) [@lattay](https://forum.gitea.com/u/lattay)\
**Post date:** [October 11, 2020, 11:27am UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/2 "2020-10-11T11:27:52Z")

</div>

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 ☹  
I am looking at changing the sanitizer configuration but the doc is terrible for that topic.

---

<div class="post-metadata">

**Author:** ![bak](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@bak](https://forum.gitea.com/u/bak)\
**Post date:** [October 11, 2020, 2:59pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/3 "2020-10-11T14:59:56Z")

</div>

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:

> **[ben-kenney/docker-services](https://github.com/ben-kenney/docker-services/tree/master/gitea)**
>
> A list of docker services that I use. Contribute to ben-kenney/docker-services development by creating an account on GitHub.

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:

- All you need to do is add a custom header or footer. See custom/templates/custom in the git repository that I listed.
- I followed instructions from here: [https://github.com/go-gitea/gitea/issues/3445](https://github.com/go-gitea/gitea/issues/3445)

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

---

<div class="post-metadata">

**Author:** ![bak](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@bak](https://forum.gitea.com/u/bak)\
**Post date:** [October 11, 2020, 3:05pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/4 "2020-10-11T15:05:13Z")

</div>

Ah whoops, @ [Py-rE](https://forum.gitea.com/u/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](https://katex.org/docs/browser.html).

---

<div class="post-metadata">

**Author:** ![lattay](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/lattay/32/806_2.png) [@lattay](https://forum.gitea.com/u/lattay)\
**Post date:** [October 14, 2020, 8:04am UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/5 "2020-10-14T08:04:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lattay](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/lattay/32/806_2.png) [@lattay](https://forum.gitea.com/u/lattay)\
**Post date:** [October 14, 2020, 8:09am UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/6 "2020-10-14T08:09:27Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Py-rE](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/py-re/32/990_2.png) [@Py-rE](https://forum.gitea.com/u/Py-rE)\
**Post date:** [October 14, 2020, 11:29pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/7 "2020-10-14T23:29:51Z")

</div>

Hi,  
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]`.

---

<div class="post-metadata">

**Author:** ![Py-rE](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/py-re/32/990_2.png) [@Py-rE](https://forum.gitea.com/u/Py-rE)\
**Post date:** [December 5, 2020, 7:33pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/8 "2020-12-05T19:33:58Z")

</div>

Hi,  
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`)

---

<div class="post-metadata">

**Author:** ![eeyrjmr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/eeyrjmr/32/1095_2.png) [@eeyrjmr](https://forum.gitea.com/u/eeyrjmr)\
**Post date:** [May 24, 2022, 10:27am UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/9 "2022-05-24T10:27:17Z")

</div>

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:

 ![2022-05-24_15-05-1653402781](https://us1.discourse-cdn.com/flex020/uploads/gitea/original/2X/6/6c3f48830afea562271166a0f284def931d1bb43.jpeg)

saving and the resultant render - looking good

 ![2022-05-24_15-05-1653402792](https://us1.discourse-cdn.com/flex020/uploads/gitea/original/2X/c/cd4895354535d4c1ac0ec1869fa8a5959b7bb787.jpeg)

The edit because of reasons

 ![2022-05-24_15-05-1653402805](https://us1.discourse-cdn.com/flex020/uploads/gitea/original/2X/c/cf980e3e01436bc3973bbe34886af9a501103bb7.jpeg)

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

---

<div class="post-metadata">

**Author:** ![eeyrjmr](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.gitea.com/eeyrjmr/32/1095_2.png) [@eeyrjmr](https://forum.gitea.com/u/eeyrjmr)\
**Post date:** [May 24, 2022, 3:13pm UTC](https://forum.gitea.com/t/katex-mathjax-render/2565/10 "2022-05-24T15:13:20Z")

</div>

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
