Mathjax support

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:

0_1520407974394_捕获.PNG

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?

404 Not Found | Read the Docs

(docs.mathjax.org)

捕获.PNG

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

捕获.JPG

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

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/mathjax@3/es5/tex-svg.js';
  script.async = true;
  document.head.appendChild(script);
})();
    
    
</script>

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?

捕获.JPG

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

sharonyue

@abhinov-singh Please see it here: https://community.nodebb.org/topic/8278/mathjax-support/16 You simply needs two steps. Please try it and give me a feedback.