Skip to main content

FluentCommunity

LaTex in FluentCommunity

Hi all,

I'm trying to load and render LaTex in my FluentCommunity. I loaded it to the header, but... It's not working. And it's working fine everywhere else on my site. I thought maybe because the community is different from a regular wordpress page, as it has dynamic content (and not in the way wp has). So I used this explanation (MathJax.typeset()), but it also didn't work.

I'd really appreciate your help on this @jewel.

I'm adding the code that I added:

add_action('fluent_community/portal_head', function() {
?> <script>
// MathJax configuration
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\(', '\)']]
},
svg: {
fontCache: 'global'
}
};

// Load MathJax and typeset the content using typeset after loading
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "MathJax-script";
script.async = true;
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
script.onload = function() {
    MathJax.typeset().then(() => {
        console.log("MathJax typesetting complete!");
    }).catch((err) => console.error("MathJax typesetting failed:", err));
};
document.head.appendChild(script);
</script>
<?php

});

  • 5 likes
  • 8 comments

Assaf Manor

Ok found a solution! Just added MutationObservation. Now LaTex is working in FluentCommunity!!

Shahjahan Jewel

Assaf Manor, It would be great if you share the full code as a tutorial so other users can use that :)

Assaf Manor

Shahjahan Jewel, I'd be happy too. I'm just checking with my LaTex forum to see whether the MutationObservation isn't an overkill and that there isn't an simpler solution.

Assaf Manor

Shahjahan Jewel, Any idea when is the next update gonna be published?

Also, I added a lot of bug report the past few days and I didn't tag anyone. Is the team just going through all the posts here?

Shahjahan Jewel

Assaf Manor, All the bug reports are actively monitored by the team and they are at work!

Titus Grange

Shahjahan Jewel Hi! I have a similar problem. I would want to render LaTex in my Fluent Community! Any news?

SAK LEE

Hi Assaf, can you explain how did you do this?? :)

Bill Monroe

i used this and it works:

  add_action('fluent_community/portal_head', function () {
?> <script>
(function () {
// Prevent double-loading / double-observing
if (window.__fcMathJaxBootstrapped) return;
window.__fcMathJaxBootstrapped = true;

  // MathJax config MUST exist before the script loads
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    },
    svg: { fontCache: 'global' }
  };

  function loadMathJax(cb) {
    if (window.MathJax && window.MathJax.typesetPromise) return cb();

    var script = document.createElement('script');
    script.id = 'MathJax-script';
    script.async = true;
    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
    script.onload = cb;
    document.head.appendChild(script);
  }

  // Debounce typesetting so rapid DOM updates don't spam MathJax
  var t;
  function typesetSoon() {
    clearTimeout(t);
    t = setTimeout(function () {
      if (!window.MathJax || !MathJax.typesetPromise) return;
      MathJax.typesetPromise()
        .catch(function (err) { console.error('MathJax typeset failed:', err); });
    }, 150);
  }

  loadMathJax(function () {
    // Initial typeset
    typesetSoon();

    // Re-typeset when FluentCommunity injects/updates content
    var observer = new MutationObserver(function (mutations) {
      // Only trigger if nodes were added/changed (keeps it lighter)
      for (var i = 0; i < mutations.length; i++) {
        if (mutations[i].addedNodes && mutations[i].addedNodes.length) {
          typesetSoon();
          return;
        }
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
})();
</script>
<?php

});