XenForo MathJax and XF 2.0.x

[UnstucK]

Include MathJax​

I help administrate a math help site now running XF 2.0.10, and I wanted to share with this community how I added support for LaTeX powered by Mathjax to the site using a series of template edits.

The first thing I did was to initialize and define the scripts to be called on every page so that when any page is loaded, any LaTeX to be rendered will be done.

Open the "PAGE_CONTAINER" template and add the following code to the end of the template:

<script type="text/x-mathjax-config">
   MathJax.Hub.Config(
   {
       TeX:
       {
           extensions: ["autoload-all.js"],
           noErrors:
           {
               style: {"display": "block !important",
               "margin": "1em 0em 1em 2em",
               "border": "none",
               "text-decoration": "underline"
           }
       },
       Macros:
       {
           pd: ["{\\frac{\\partial#1}{\\partial#2}}",2],
           d: ["{\\frac{d#1}{d#2}}",2],
           E: ["\\times 10^{#1}",1],
           csch: ["\\mathop{\\rm csch}\\nolimits"],
           arccsc: ["\\mathop{\\rm arccsc}\\nolimits"],
           arcsec: ["\\mathop{\\rm arcsec}\\nolimits"],
           arccot: ["\\mathop{\\rm arccot}\\nolimits"],
           sech: ["\\mathop{\\rm sech}\\nolimits"],
           arsinh: ["\\mathop{\\rm arsinh}\\nolimits"],
           arcosh: ["\\mathop{\\rm arcosh}\\nolimits"],
           artanh: ["\\mathop{\\rm artanh}\\nolimits"],
           arcsch: ["\\mathop{\\rm arcsch}\\nolimits"],
           arsech: ["\\mathop{\\rm arsech}\\nolimits"],
           arcoth: ["\\mathop{\\rm arcoth}\\nolimits"],
           cis: ["\\mathop{\\rm cis}\\nolimits"],
       }
   },
   extensions: ["tex2jax.js"],
   jax: ["input/TeX", "output/HTML-CSS"],

   "HTML-CSS": {linebreaks: {automatic: true, width: "90% container"}},
   "SVG": {linebreaks: {automatic: true, width: "90% container"}},
                            
   displayAlign: "left", displayIndent: "2em", displayErrorAlign: "left",
   tex2jax:
   {
       inlineMath: [['\\(','\\)']],
       displayMath: [['\\′,′′,′']],
       processEscapes: true
   }
   });

   MathJax.Hub.Register.StartupHook("TeX Jax Ready",function ()
   {
       MathJax.InputJax.TeX.prefilterHooks.Add(function (data)
       {
           if (data.display)
           {
               var next = data.script.nextSibling;
               while (next && next.nodeName.toLowerCase() === "#text")
               {
                   next = next.nextSibling
               }
               if (next && next.nodeName.toLowerCase() === "br")
               {
                   next.parentNode.removeChild(next)
               }
           }
       });
   });
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script>
   function parseNewPost()
   {
       var newpost = document.getElementById("js-post-{$post.post_id}");
       MathJax.Hub.Queue(["Typeset", MathJax.Hub, newpost]);
       MathJax.Hub.Queue.autoReset = true;
   }

   function parsePreview()
   {
       var preview = document.getElementsByClassName("bbCodePreview-content");
       MathJax.Hub.Queue(["Typeset", MathJax.Hub, preview]);
       MathJax.Hub.Queue.autoReset = true;
   }

   function parseTooltip()
   {
       var tooltip = document.getElementsByClassName("bbCodePreview-content");
       MathJax.Hub.Queue(["Typeset", MathJax.Hub, tooltip]);
       MathJax.Hub.Queue.autoReset = true;
   }
</script>

This includes my custom macros, and definitions. You can find leaner configurations at MathJax's support site if you wish.

docs.mathjax.org

You don't want any LaTeX markup (that may be present if you are working on a post and have come back to it) to be rendered in the quick reply editor, so open the "quick_reply_macros" template and locate the line:

<div class="message-editorWrapper">

And change it to:

<div class="message-editorWrapper tex2jax_ignore">

This will tell MathJax to ignore that element when rendering the markup.

Next, we want any LaTeX to be rendered when a new post is posted, and since new posts are added via AJAX, we will need to call for the new posts to be processed. Open the "post_macros" template, and locate the line:

</article>

And directly beneath that line add:

    <script>
       if (typeof parseNewPost == 'function')
       {
           parseNewPost();
       }
   </script>

Next, we want to process any markup when a post is being previewed, so open the "bb_code_preview" template, and directly above the last line, which reads:

</xf:if>

Add the following:

    <script>
       parsePreview();
   </script>

And finally, we want any markup in thread previews to be rendered, so open the "thread_preview" template, and directly above the last line, which reads:

</div>

Add the following:

    <script>
       parseTooltip();
   </script>

And that's what I did to add support for MathJax to a XF 2.0.10 site.

Maths between dollars is inline: ∑nk=1k=n(n+1)2∑k=1nk=n(n+1)2.

Maths between slash-square-brackets is display:

n∑k=1k=n(n+1)2∑k=1nk=n(n+1)2

 

Discord Chatbox

Add FA icons in the Forum menu