How to use color? - Githubissues

eoinpayne commented 2 years ago

Hi, i'm looking at http://docs.mathjax.org/en/latest/input/tex/extensions/colorv2.html#tex-colorv2 but i am having trouble getting it working.

Can you advise how i would load in additional settings?

i thought something like this might work, but it didn't.

//  const settings = {
//    loader: {load: ['[tex]/colorv2']},
//    tex: {packages: {'[+]': ['color']}},
//  }

  const settings = {
    load: ['[tex]/colorv2'],
    packages: {'[+]': ['color']},
  }

  return (
    <Box sx={{fontSize: '1.35rem', pb: 1.5}}>
      <MathComponent tex={tex} settings={settings} />
    </Box>
  )

Could it be related to this issue here? https://github.com/CharlieMcVicker/mathjax-react/issues/12

Thanks!

CharlieMcVicker commented 2 years ago

Something is not working right with the settings option. MathJax does not seem eager to load packages and I've even been having trouble getting the MathJax require macro loaded.

I believe it should be fixed when I get around to what I described in this comment: https://github.com/CharlieMcVicker/mathjax-react/issues/35. I thought I would get around to that this week and it didn't happen.

dpvc commented 2 years ago

The MathJax variable as a configuration object relies on the MathJax Components architecture, which makes it possible to dynamically load pieces of MathJax as needed. The alternative is to load MathJax code modules directly, which offers a bit more flexibility of control of what gets loaded, at the expense of ease of configuration. Unfortunately, mathjax-react uses the direct module approach, rather than components, so the settings values don't provide for all the values that can be included in a component-based application. In particular, the loader (whose load option you are trying to use) is part of the components framework, and it not included in mathjax-react. So that will have no affect. The various extensions like colorv2 are part of the components architecture, and there is no way to access them in mathjax-react as it currently stands.

I suspect that the codebase could be converted to a components-based one, if you want, but that would require allowing MathJax to insert <script> tags into the document <head> in order to load the needed components at run time.

CharlieMcVicker commented 2 years ago

Hi @dpvc! Did you get a chance to read the comment I left on the other issue, describing an approach using the init function from mathjax-full?

dpvc commented 2 years ago

If you mean the init() that is in node-main, then no. the node-main component is intended as a quick way to get a server-side node application running, but isn't for use in a web browser. You would need to do something more like the the custom component in the MathJax web demos repository (the require() commands can be replaced by import directives). The important parts, here, are that the startup module is used, which is the one that handles the configuration via the MathJax variable and the dynamic loading of components. The Load.preLoad() call tells the system which components you have explicitly imported yourself, so it won't try to load those again. The MathJax global variable can be used to control the configuration, just as in the browser (unfortunately, that does have to be global, as that is how the components communicate with each other). The startup module also makes the functions like MathJax.typesetPromise() and MathJax.tex2svgPromise() available, so you can use those directly rather than setting up your own MathDocument and calling its convert() method.

If you want to allow dynamic loading of components, you will have to go with something like this, and you will want to use the promise-based calls, since typesetting an expression could cause a component to be loaded (e.g., via a \require{} macro), which is asynchronous, so must be mediated by promises.

There are node-based examples in the MathJax node demos repository, particularly in the component and preload directories that might also be useful to look at.

Using the component framework would help out with the dual browser/server-side usage as well. You could webpack the browser version, and a server-side user could have a configuration like

global.MathJax = {
  loader: {
    load: ['adaptors/liteDOM'],
    require: require
  }
};

in order to switch over to the LiteDOM in node. That could be put into a file called mathjax-config.js and the node application could start with

import './mathjax-config.js';
import 'mathjax-react';

in order to get the global MathJax defined before loading mathjax-react. There are some functions available for manipulating the MathJax variable (to insert your defaults without overwriting the user's configuration, for example) that you might find useful. I can give you more details if you end up going this route.

CharlieMcVicker / mathjax-react

How to use color? #36