Mathjax support

[sharonyue]

Hi there,

I include Mathjax script in the header. It works pretty good. But there is only one problem: I need to refresh my page, then the equation comes out. Other wise its just code. Just check it out here:

see? when you open it, its just the code, after you refresh, the equation poops up.

Any ideas? Thanks.

Nope, maybe the equation appears when you click that link, so how about click "CFD" at the left top corner? you will see the equation's code instead equation.

After refresh! It works.

[frissdiegurke]

It's because the script runs once the page is loaded. Since NodeBB is a single page application, you have to re-run code when the page changes see this hooks.
I think action:posts.loaded would be the right choice for you. How you can re-run the parser of Mathjax you have to check within their docs.

[sharonyue]

@frissdiegurke Thank you, I will try it and give you a feedback. Actually there is a plugin for nodeBB, called "Katex", but the equation looks not very beautiful....not well arranged.

[sharonyue]

@frissdiegurke

Re: Mathjax support

Hello again,

do you know where should I insert this:?

$(window).on('action:ajaxify.end', function(event, data) {
    console.log(data);  // to inspect what is passed back by NodeBB
});

Thanks.

This dynamic mathjax is so great: https://cdn.mathjax.org/mathjax/latest/test/sample-dynamic-2.html

[SuperMike]

I am using https://www.npmjs.com/package/nodebb-plugin-katex

to render mathjax script. It works good so far.

[sharonyue]

Im still looking for a dynamic mathjax support from nodebb...

[PitaJ]

Here:

$(window).on('action:posts.loaded action:ajaxify.end', function () {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, "content"]);
});

[sharonyue]

@PitaJ
where should I put the code into? which file?

[sharonyue]

@SuperMike
I wish this plugin can number the equations and support center locating. Check my page with MathJax: link text. It is very well-organised, the only problem is that you need to refresh the page. I also tested with Katex, looks it does not support with \mathbf{}?

[PitaJ]

@sharonyue you put that code in the custom HTML in the ACP inside a <script> </script> tag, or wherever you have the rest of your code.

[sharonyue]

@pitaj
Hello, I put the following

<script>
$(window).on('action:posts.loaded action:ajaxify.end', function () {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, "content"]);
});
</script>

here:

And it does not work?... I still need to refresh the page to load mathjax.

[julian]

You don't need <script> and </script> in the custom JS portion of the page.

[sharonyue]

After I include that script I dont need to refresh page to show the equations. But I still cannot preview equations in PREVIEW panel... Is it possible to do that?

http://docs.mathjax.org/en/latest/advanced/dynamic.html

[julian]

You can try adding action:composer.preview to the list of events you listen for. I don't know if it'll convert the Mathjax in the preview box, but it is worth a try.

[sharonyue]

@julian said in Mathjax support:

action:composer.preview

I tried this:

$(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function () {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, "content"]);
});

Unfortunately it does not work ..

[sharonyue]

To those who need Mathjax support on nodebb. Now the dynamic rendering works:

1. Include this in the header:

<script>
    window.MathJax = {
  tex: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    tags: "ams",
    macros: {
      ra: "{\\rm a}",
      rb: "{\\rm b}",
      rD: "{\\rm D}",
      cell: "{\\rm cell}",
      drag: "{\\rm drag}",
      lift: "{\\rm lift}",
      turb: "{\\rm turb}",
      rd: "{\\rm d}",
      buo: "{\\rm buo}",
      rc: "{\\rm c}",
      rN: "{\\rm N}",
      tr: "{\\rm tr}",
      dev: "{\\rm dev}",
      mag: "{\\rm mag}",
      max: "{\\rm max}",
      min: "{\\rm min}",
      rleft: "{\\rm left}",
      wall: "{\\rm wall}",
      outlet: "{\\rm outlet}",
      inlet: "{\\rm inlet}",
      rright: "{\\rm right}",
      own: "{\\rm own}",
      nei: "{\\rm nei}",
      exp: "{\\rm exp}",
      rq: "{\\rm q}",
      rref: "{\\rm ref}",
      rE: "{\\rm E}",
      bfH: "{\\bf H}",
      dpm: "{\\rm dpm}",
      rT: "{\\rm T}",
      rP: "{\\rm P}",
      rgh: "{\\rm rgh}",
      rL: "{\\rm L}",
      rR: "{\\rm R}",
      Kd: "{\\rm Kd}",
      rr: "{\\rm r}",
      rW: "{\\rm W}",
      bfU: "{\\bf U}",
      bfh: "{\\bf h}",
      bfHbyA: "{\\bf HbyA}",
      bfS: "{\\bf S}",
      bfg: "{\\bf g}",
      bfT: "{\\bf T}",
      bfV: "{\\bf V}",
      bfd: "{\\bf d}",
      bfI: "{\\bf I}",
      bfK: "{\\bf K}",
      bfA: "{\\bf A}",
      bfn: "{\\bf n}",
      bfR: "{\\bf R}",
      bfM: "{\\bf M}",
      bfx: "{\\bf x}",
      bfX: "{\\bf X}",
      bfF: "{\\bf F}",
      bfq: "{\\bf q}",
	  dt: "{\\Delta t}",
      p: "{\\partial}"    // this macro has an optional parameter that defaults to 'x' \ddx[t]{y}
    },
    autoload: {
      color: [],
      colorV2: ['color'],
	  verb: ['verb']
    },
    packages: {'[+]': ['verb']}
  },
  options: {
    skipHtmlTags: ["<pre>","<span>","<code>"],
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  },
  loader: {
    load: ['[tex]/verb']
  },
  startup: {
    ready: () => {
      MathJax.startup.defaultReady();
      MathJax.startup.promise.then(() => {
        console.log('MathJax initial typesetting complete');
      });
    }
  }
};


(function () {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js';
  script.async = true;
  document.head.appendChild(script);
})();
    
    
</script>

2. Include the following to Javascript

$(window).on('action:posts.loaded action:ajaxify.end action:composer.preview', function () {
  MathJax.startup.defaultReady();
      MathJax.startup.promise.then(() => {
        console.log('MathJax initial typesetting complete');
      });
});

[abhinov singh]

@sharonyue
are you able to render $\sqrt{2}$ ?

[abhinov singh]

@sharonyue
Screenshot of the problem :

[sharonyue]

@abhinov-singh It works at my site. What did you put in your CSS?

[abhinov singh]

@sharonyue
Can you please tell me the steps for how to use Mathjax on NodeBB
I will follow that strictly

Thanks in advance