No internet connection
  1. Home
  2. Support

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

By KajMagnus @user_145
    2013-06-15 13:28:19.282Z2019-03-09 11:42:35.568Z

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

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

        1. U
          In reply touser_145:
          Piotr @user_161
            2013-06-18 11:01:57.539Z

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

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

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

              • A
                In reply touser_145:
                Anton @Anton
                  2018-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. 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 :- )

                    1. AAnton @Anton
                        2018-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. 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 @Anton
                              2018-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. Yes I'll do (well unless I forget. But I will probably remember.)

                                1. In reply toAnton:

                                  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 @Anton
                                      2018-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. 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.