No internet connection

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

By KajMagnus @user_1452013-06-15 13:28:19.282Z2018-05-06 12:13:34.399Z

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>

You'll need double backslases: \$$... \$$ instead of just: $$..$$ because the Commonmark parser "eats" one backslash.

/End update.

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\$
• 12 replies
1. U
Piotr @user_1612013-06-16 13:30:24.667Z

$\sum_{n=1}^\infty \frac{1}{n} = \infty$

1. U
Piotr @user_1612013-06-18 11:01:57.539Z

Great news. Testing: $$\sum_{n=0}^\infty \frac{(-1)^n}{2n+1} = \frac{\pi}{4}$$

1. IOlti N @Itlox2016-11-09 13:26:04.742Z

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

2. A
Anton @Anton2018-04-28 14:32:04.843Z2018-04-28 14:39:14.486Z

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?

1. 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).

(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 :- )

1. AAnton @Anton2018-04-30 21:42:12.737Z

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.

1. 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.)

1. AAnton @Anton2018-05-01 11:13:01.561Z

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

1. KajMagnus @KajMagnus2018-05-01 13:11:54.657Z

Yes I'll do (well unless I forget. But I will probably remember.)

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).

1. AAnton @Anton2018-05-06 18:15:32.858Z

@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 :-)

1. 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.