# $\LaTeX$ demo (works inside this topic only)

**Update, May 2018:**

If you have created a Talkyard community, you can make LaTeX work, over there, by adding this script:

```
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script>
talkyard.postElemPostProcessor = function(elem) {
console.log('Telling MathJax to post process elem: ' + elem);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]);
};
</script>
```

To add the script: Log in as admin, go to the admin area, click **Look and Feel** and then **CSS and JS**.

You'll need double backslases: `\\( ... \\)`

instead of just: `\( .. \)`

because the Commonmark parser "eats" one backslash.

**/End update 2018.**

**Update, Mars 2019:**

Now soon Chrome apparently will support MathML. And Firefox does already? Maybe this'll mean a standard? translate-text-to-MathML javascript library will appear, which ... maybe there could be an option to enable it in Talkyard. See: https://news.ycombinator.com/item?id=19344843

**/End update 2019.**

To enable writing mathematical forumlas in $\LaTeX$,

one can include a certain Javascript from http://www.mathjax.org/, plus some configuration.

I've done that on this page, using the same configuration as at http://maths.stackexchange.com.

One can enable LaTeX site wide too, alternatively.

Here's a demo: Depending on the particular configuration, some lines below work, some don't. I wonder if the Markdown processor eats some `\`

somehow, and if that's why `\(...\)`

apparently doesn't work.

$\sin\Pi^2$

$$\sin\Pi^2$$

(\sin\Pi^2)

\(\sin\Pi^2\)

[\sin\Pi^2]

\[\sin\Pi^2\]

The actual source code:

```
$\sin\Pi^2$
$$\sin\Pi^2$$
\(\sin\Pi^2\)
\\(\sin\Pi^2\\)
\[\sin\Pi^2\]
\\[\sin\Pi^2\\]
```

- UIn reply touser_145⬆:Piotr @user_161
Great news. Testing: $$\sum_{n=0}^\infty \frac{(-1)^n}{2n+1} = \frac{\pi}{4}$$

- IOlti N @Itlox
$$\sum_{n=0}^\infty \frac{(-1)^n}{2n+1} = \frac{\pi}{4}$$

- AIn reply touser_145⬆:Anton @Anton
It seems that inserting the mathjax initialization

`<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"> </script>`

into the page header HTML in the admin settings does the trick of enabling mathjax globally (but not for the preview).

Is that a reasonable approach?

**[EDIT]:**Not quite there yet: transitioning or updating page content doesn't trigger the mathjax rerender. @KajMagnus any idea whether it can be done?- KajMagnus @KajMagnus2018-04-30 21:03:51.240Z
That seems like a good start. And, to make MathJax work, when transitioning to a new page, or editing & saving something, and in the preview, I can add Javascript events for those things, which you can listen to and call:

`MathJax.Hub.Queue(["Typeset",MathJax.Hub]);`

to run MathJax again and rerender the new / modified LaTeX code on the page.

(I found out via this StackOverflow question-answer about how to re-run MathJax: https://stackoverflow.com/a/5200579/694469.

And,*"[one] can focus the Typeset method on particular elements in the DOM so that you aren't rerendering the whole page with every change"*, they say in MathJax google group. )Maybe in the future, there could be a Talkyard plugin for LaTex, that one could enable via a config option. So people wouldn't need to add the above

`<script>`

tag themselves (instead, they'd click a checkbox in the admin settings).B.t.w. seems there's a newer & faster library nowadays, here: https://khan.github.io/KaTeX/

(I found via: https://stackoverflow.com/questions/3284131/is-there-a-javascript-latex-equation-renderer )

scroll down a bit and look at the demo, seems a lot faster than MathJax :- )- AAnton @Anton
And, "[one] can focus the Typeset method on particular elements in the DOM so that you aren't rerendering the whole page with every change", they say in MathJax google group. )

Would you know how to hook up mathjax to the page updates? Would that work using the custom header option?

About MathJax vs KaTeX: the latter is definitely much faster, but it is also still missing a bunch of math. Most team chat software goes with KaTeX, a lot of forum software with MathJax.

- KajMagnus @KajMagnus2018-05-01 09:16:13.911Z
Yes it'll work with the

`<script>`

you added above + one more`<script>`

tag, like so:`<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"> </script> <script> talkyard.postElemPostProcessor = function(elem) { console.log('Telling MathJax to post process elem: ' + elem); MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem]); }; </script>`

(Implementation details: Talkyard will call

`postElemPostProcessor`

, when one types text in the editor, and also when transitioning to a new page. The`elem`

passed to`postElemPostProcessor`

will be the html elem id of the preview, or of the page contents (all posts). Or instead of an id, it'll be a html node. Mathjax works with both, here're the docs: https://docs.mathjax.org/en/v1.0/typeset.html )You'll need double backslases:

`\\( ... \\)`

instead of just:`\( .. \)`

because the Commonmark parser "eats" one backslash.Tested locally, works fine :- ) Might take some days before I deploy the new code with

`talkyard.postElemPostProcessor`

to the production servers.

(Interesting to hear about KaTeX vs MathJax, good to know.)

- AAnton @Anton
Awesome, thanks! If it's not too much trouble, can you please post here when I could test that?

- KajMagnus @KajMagnus2018-05-01 13:11:54.657Z
Yes I'll do (well unless I forget. But I will probably remember.)

- In reply toAnton⬆:KajMagnus @KajMagnus2018-05-06 12:08:59.270Z
Hi @Anton now LaTeX works again, including in the editor preview, and when transition to new pages — if one adds the two script tags I pasted above.

On this website, LaTeX only works in topics with

`latex`

in the URL (because I added some Javascript that avoids loading MathJax by default, for performance reasons).- AAnton @Anton
@KajMagnus indeed, works perfectly, thanks a lot!

I think this makes talkyard the best option as a forum for courses I teach... once I figure out what to do about GDPR :-)

- KajMagnus @KajMagnus2018-05-09 05:50:22.578Z
GDPR? If you have any thoughts about Talkyard & GDPR, feel free to create a topic about that :- )

Via one's user profile, one can download one's personal data, & delete one's account — then one's personal data gets anonymized.