Compiling Mathjax 4 beta

[jox joe]

Hello David,

I want to recompile the complete source.

I use Maven and Jenkins in another Javascript+Java project.

I think npm is also good.

What is the recommended solution for Mathjax?

Thank you.

Jo

[Davide Cervone]

You can use 

npm install mathjax-full

to get the source code for MathJax v3, and use

cd node_modules/mathjax-full

npm install

npm run -s compile

npm run -s make-components

to compile the .ts files to .js files, and then build the components in the es5 directory.  But there is no reason to do that, as the mathjax-full package already includes the .js files and the webpacked component files, so unless you are modifying the source code, everything you need is already in place and it is a waste of time to recompile it.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/3728bf92-0a10-4334-99a0-1a8a7ec1a4a4n%40googlegroups.com.

[jox joe]

>You can use 

>     npm install mathjax-full

>to get the source code for MathJax v3, and use

> cd node_modules/mathjax-full

> npm install

> npm run -s compile

> npm run -s make-components

Yes I could see this on you website but I'd like

to recompile this:

MathJax-src-4.0.0-beta.4.zip

Mathjax 4 contains more fonts.

Thank you.

[Davide Cervone]

Yes I could see this on you website but I'd like

to recompile this:

MathJax-src-4.0.0-beta.4.zip

OK, that didn't come through in your previous message.

The beta versions are also available via npm, so you can use

npm install mathja...@4.0.0-beta.4

to get the beta.4 version with everything already compiled and built.  No need to take time recompiling.

If you really must compile the zip file, unzip the file and cd into the directory it creates.  Then do

npm install

npm install mathjax-m...@4.0.0-beta.4

npm run -s build-all

Mathjax 4 contains more fonts.

The fonts are in a separate repository, and it is not currently public (as the font tools are not yet ready for public release).  But the font npm packages are available, and you can use

npm install mathjax-...@4.0.0-beta.4

where "xyz" is replaced by the name of the font you want to use (e.g., "pagella", "stix2", "fira", etc.).  These are already compiled, so no need to recompile them (the files needed to recompile them are not public yet).  You can use this install with either the unpacked zip file or the npm mathja...@4.0.0-beta.4 package.

I hope that is what you are looking for.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/dc649e2e-a89c-4679-8830-24eb24d1f674n%40googlegroups.com.

[jox joe]

Hi David,

1/

I used this: MathJax-src-4.0.0-beta.4.zip

2/

npm install

npm install mathjax-m...@4.0.0-beta.4

npm run -s build-all

What do the three dots mean?

3/

npm install mathjax...@4.0.0-beta.4

If I use the above command for example an error message is displayed:

package not available

4/

I can't see "xyz".

Thank you.

[Davide Cervone]

npm install

npm install mathjax-m...@4.0.0-beta.4

npm run -s build-all

What do the three dots mean?

It probably means that whatever you are using to read your mail thinks this looks like an email address and has shortened the address for some reasons that it thinks is "helpful".  The original says "mathjax-modern-font at 4.0.0-beta.4" where " at " should be replaced by "@".  I hope that gets through without being shortened.

npm install mathjax...@4.0.0-beta.4

If I use the above command for example an error message is displayed:

package not available

That is because the package name is "mathjax-pagella-font" not just "mathjax-pagella".  Unfortunately, that was lost due to the ellipsis that your mail client inserted.

4/

I can't see "xyz".

The original had "mathjax-xyz-font at 4.0.0-beta.4".

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/edc60334-cccd-42f4-97b6-f6ac2f9e89bcn%40googlegroups.com.

[jox joe]

Hi Davide,

it is working now but I have the following error messages:

****************************

Module not found: Error: Can't resolve 'mathjax-full/mjs/output/chtml/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'
Webpacking /mjs/mml-chtml-nofont
Webpacking /mjs/mml-svg
Module not found: Error: Can't resolve 'mathjax-full/mjs/output/common/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'
Webpacking /mjs/mml-svg-nofont
Webpacking /mjs/node-main
Webpacking /mjs/output/chtml
Webpacking /mjs/output/svg
Webpacking /mjs/startup
Webpacking /mjs/tex-chtml
Module not found: Error: Can't resolve 'mathjax-full/mjs/output/chtml/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'
Webpacking /mjs/tex-chtml-nofont
Webpacking /mjs/tex-mml-chtml
Module not found: Error: Can't resolve 'mathjax-full/mjs/output/chtml/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'
Webpacking /mjs/tex-mml-chtml-nofont
Webpacking /mjs/tex-mml-svg
Module not found: Error: Can't resolve 'mathjax-full/mjs/output/common/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'
Webpacking /mjs/tex-mml-svg-nofont
Webpacking /mjs/tex-svg
Module not found: Error: Can't resolve 'mathjax-full/mjs/output/common/FontData.js' in '/Downloads/mathjax/MathJax-src-4.0.0-beta.4/node_modules/mathjax-modern-font/mjs'

****************************

A/ FontData.js is missing.

B/ I haven't installed any specific font   (mathjax-xyz-font at 4.0.0-beta.4)

This was the used sequence of commands:

1/ npm install
2/ npm install mathjax-modern-font at 4.0.0-beta.4
3/ npm run -s build-all

B/ I used this --> MathJax-src-4.0.0-beta.4.zip

Thank you.

[Davide Cervone]

Sorry, I left out one command (it will not be needed in beta.5, and I forgot about it for beta.4).  Try doing

npm run -s link:full

after the npm install commands and before the build-all command.  You should only need to do that once after an npm install.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/f1d37d78-113c-4fc3-9a7d-f4d0c5c5d7e1n%40googlegroups.com.

[jox joe]

Hi Davide,

this worked properly except the mathjax-euler-font :

01/  npm install

02/  npm install mathjax-modern-font et 4.0.0-beta.4
03/  npm run -s link:full (only once after an "npm install" command )
04/  npm run -s build-all
--------------------------fonts
05/  npm install mathjax-modern-font et 4.0.0-beta.4
06/  npm install mathjax-asana-font et 4.0.0-beta.4
07/  npm install mathjax-bonum-font et 4.0.0-beta.4
08/  npm install mathjax-dejavu-font et 4.0.0-beta.4
09/  npm install mathjax-pagella-font et 4.0.0-beta.4
10/  npm install mathjax-schola-font et 4.0.0-beta.4
11/  npm install mathjax-termes-font et 4.0.0-beta.4
12/  npm install mathjax-stix2-font et 4.0.0-beta.4
13/  npm install mathjax-fira-font et 4.0.0-beta.4
14/  npm install mathjax-euler-font et 4.0.0-beta.4 (ERROR: this is not in the registry)

15/  npm install mathjax-tex-font et 4.0.0-beta.4

 <space>et<space> = @

Thank you.

[Davide Cervone]

mathjax-euler is not actually font, but a font extension.  There aren't enough glyphs in euler to make a complete font, so it is an extension of the mathjax-modern font.  You need to use that name "mathjax-euler-font-extension" for that.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/02820a7b-8af3-42ca-aa63-844f8323d15fn%40googlegroups.com.

[jox joe]

I used Matjax 3 with this code below successfully:

BEGIN CODE **********************************************

MathJax = {
options: {}
, tex: {
packages: packages
, processEnvironments: true
, noundefined: {
color: 'red'
, background: ''
, size: ''
}
, formatError(_, error) {
throw error;
}

}
, svg: {
fontCache: 'local'
}
, startup: {
typeset: false
}
};


//
//  Load all the needed components
//
require('mathjax-full/components/src/startup/lib/startup.js');   //line 001
require('mathjax-full/components/src/core/core.js');                   //line 002
require('mathjax-full/js/adaptors/browserAdaptor');                    //line 003
require('mathjax-full/components/src/input/tex-base/tex-base.js');  //line 004
require('mathjax-full/components/src/input/tex/extensions/all-packages/all-packages.js');  //line 005
require('mathjax-full/components/src/input/tex/extensions/noundefined/noundefined');       //line 006
require('mathjax-full/components/src/output/svg/svg.js');                //line 007
require('mathjax-full/components/src/output/svg/fonts/tex/tex.js'); //line 008
require('mathjax-full/components/src/startup/startup.js'); //line 009


//
//  Let MathJax know these are loaded
//
MathJax.loader.preLoad(
'core'
, 'adaptors/browserAdaptor'
, 'input/tex-base'
, '[tex]/all-packages'
, '[tex]/noundefined'
, 'output/svg'
, 'output/svg/fonts/tex'
);


MathJax.config.startup.ready();

function _tex2svg(tex, callback, _errCallback) {
MathJax.tex2svgPromise(tex, {
display: false
, em: 16 // em-size in pixels
, ex: 8 // ex-size in pixels
, containerWidth: 80 * 16
}).then(function (node) {
callback(node.firstElementChild);
}).catch(function (err) {
_errCallback(err.message);
});

}//END function _tex2svg(tex, callback, _errCallback)


function create(o, canvas, callback, errCallback) {
_tex2svg(o.formula, function(svg) {
fabric.parseSVGDocument(svg, function(objects, options) {
const opts = $.extend({}, o, options);

const obj = objects.length === 1
? new fabric.Group(objects, opts)
: fabric.util.groupSVGElements(objects, opts);
obj.selectable = canvas.selection;
obj.type = 'group';
if (typeof(callback) === 'function') {
callback(obj);
}

canvas.add(obj).requestRenderAll();

});
}, errCallback);

}//END function create(o, canvas, callback, errCallback)

END CODE ***************************************************

As you can see, I use the SVG output and put it on the browser canvas with fabric.js.

I could recompile Mathjax 4.0.0-beta.4 ( MathJax-src-4.0.0-beta.4.zip ) successfully.

Now I want to use the code above but with  Mathjax 4.0.0-beta.4 .

*******************************

MY QUESTION:

Where are the relevant components in  4.0.0-beta.4 ?

*******************************

Thank you.

[Davide Cervone]

The component definitions are in the mathjax-full/components/mjs directory, though the package.json file is set up to make components/src to components/mjs automatically when used in an import statement, and to components/cjs when used in a require() call (the cjs versions are down compiled from the mjs ones).

There are changes in how these operate in v4 compared to v3.  In particular, the way that the startup.js files work has changed, so you will want to look at components/mjs/tex-svg/tex-svg.js for an example of the new combined component approach.  The components/bin/makeAll command has had a major overhaul in order to handle the mixed mjs/cjs compilations, and its configuration files have been combined into a single config.json file.  Again, see the tex-svg config file for an example.  See also the release notes, particularly the beta.2 notes at

https://github.com/mathjax/MathJax-src/releases/tag/4.0.0-beta.2

especially the ES6 modules section.

There have also been changes due to the ability to load different fonts, and there is no longer a components/src/output/svg/fonts directory.  If you follow the tex-svg component files as a guide, you sh9oudl not have to load a font file by hand.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/a82182a7-d7fb-4f2b-ba23-0ca7f7c709a0n%40googlegroups.com.

[jox joe]

Hi Davide,

this worked properly :

ENVIRONMENT:

OS: Ubuntu

APPS: node.js and npm

STEPS:

--------------------download

01/ downlod this: MathJax-src-4.0.0-beta.4.zip

02/ uncompress it, the result is: MathJax-src-4.0.0-beta.4

03/ rename the "MathJax-src-4.0.0-beta.4" folder to "mathjax-full"

04/ cd into the "mathjax-full" folder

---------------------install/compile

05/  npm install

06/  npm install mathjax-modern-font et 4.0.0-beta.4
07/  npm run -s link:full (only once after an "npm install" command )
08/  npm run -s build-all
----------------------install additional fonts:
09/  npm install mathjax-asana-font et 4.0.0-beta.4
10/  npm install mathjax-bonum-font et 4.0.0-beta.4
11/  npm install mathjax-dejavu-font et 4.0.0-beta.4
12/  npm install mathjax-pagella-font et 4.0.0-beta.4
13/  npm install mathjax-schola-font et 4.0.0-beta.4
14/  npm install mathjax-termes-font et 4.0.0-beta.4
15/  npm install mathjax-stix2-font et 4.0.0-beta.4
16/  npm install mathjax-fira-font et 4.0.0-beta.4
17/  npm install mathjax-euler-font-extension et 4.0.0-beta.4

18/  npm install mathjax-tex-font et 4.0.0-beta.4

 <space>et<space> = @

I'm going to try to do the upgrade from Mathjax 3

to MathJax 4.0.0-beta.4  

Thank you.

[jox joe]

Hi Davide,

**************************************

QUESTION 1:

 if I use/compile Mathjax what are the minimum required version numbers

of the following packages:

1/ node.js (it can interpret Javascript/Typescript)

2/ nvm (Node Version Manager)

3/ npm (Node Package Manager)

**************************************

QUESTION 2:

I use "browserify" with Mathjax 3.

Can I use the same with Mathjax 4 (with "babelify")

if I want to use ES5?

**************************************

QUESTION 3:

>Again, see the tex-svg config file for an example.

Which file do you mean?

**************************************

You are using this now:

JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6)

This is the future:

JavaScript ECMAScript 2020

(or just Typescript everywhere without using Javascript)

Thank you.

[Davide Cervone]

 if I use/compile Mathjax what are the minimum required version numbers

of the following packages:

1/ node.js (it can interpret Javascript/Typescript)

2/ nvm (Node Version Manager)

3/ npm (Node Package Manager)

I'd recommend node v20 as it is noticeably faster than earlier versions, in my experience.  I don't know what the minimum version is.

I suspect any version of npm should be OK.

I'm using v10.4.0 of npm.  I have not tried to determine a minimum version.

In the next beta release, we will be moving to pnpm rather than npm.

QUESTION 2:

I use "browserify" with Mathjax 3.

Can I use the same with Mathjax 4 (with "babelify")

if I want to use ES5? 

I have not used browserify, but I see not reason it could not be used.  Note that the beta versions of v4 proved a dual ES6/ES5 distribution, so you should not need babelify if you use the ES5 files (from the cjs directory).  The "npm run -s build-all" should build both cjs and mjs versions (in these respective directories).  If you import out require the cjs versions of the modules, you should not need to down compile using babel.  If you are importing from the components/mjs source files, you can switch to the components/cjs versions.

QUESTION 3:

>Again, see the tex-svg config file for an example. 

Which file do you mean?

components/mjs/tex-svg/tex-svg.js  and  components/mjs/tex-svg/config.json

You are using this now:

JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6)

This is the future:

JavaScript ECMAScript 2020

(or just Typescript everywhere without using Javascript)

So why are you trying to use ES5?

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-dev/6fa21a5d-1108-47a2-ba5f-c18de7c66fb2n%40googlegroups.com.

[jox joe]

Hello Davide,

Question 1:

Embedding svg code or svg file in the tEX string.

Does Mathjax suppot this through mathml/itex?

************************************************

The svg Environment
    \begin{svg}
       ...
    \end{svg}
allows you to embed snippets of SVG in itex equations. To assist in Instiki's LaTeX export feature, you can also include a graphicx command:
    \begin{svg}
       ...
    \end{svg}
    \includegraphics[width=...]{foo}
where foo.pdf is a file containing a PDF version of the graphic. In itex, the \includegraphics command is defined as a NOOP, and the SVG is embedded in the MathML output.

*****************

Question 2:

I can embed a jpeg/png link with the /img extension.

Can I do the same with an svg file?

Question 3:

Can I embed SVG string in a Tex string?

 

Thank you.

[Davide Cervone]

I'm going to answer the last questions first:

Question 2:

I can embed a jpeg/png link with the /img extension.

Can I do the same with an svg file?

Yes, the img extension should work with any image format that the browser understands, and that includes svg format.

Question 3:

Can I embed SVG string in a Tex string?

Yes, in v4 we added the ability to embed HTML (and so SVG) into a TeX expression, but it requires that you put the special markers <tex-html> and </tex-html> around the HTML that is to be part of the equation.  So you could do something like

$$x + <tex-html>

<svg width="200" height="100" style="vertical-align:-30px">

<rect width="200" height="100" fill="red" />

<rect x="125" y="10" width="25" height="50" fill="blue" />

</svg>

</tex-html> + x$$

to get

You do need to include the texhtml extension and set a configuration option to allow this.  See the release notes for details and caveats.

Question 1:

Embedding svg code or svg file in the tEX string.

Does Mathjax suppot this through mathml/itex?

************************************************

The svg Environment
    \begin{svg}
       ...
    \end{svg}
allows you to embed snippets of SVG in itex equations. To assist in Instiki's LaTeX export feature, you can also include a graphicx command:
    \begin{svg}
       ...
    \end{svg}
    \includegraphics[width=...]{foo}
where foo.pdf is a file containing a PDF version of the graphic. In itex, the \includegraphics command is defined as a NOOP, and the SVG is embedded in the MathML output.

*****************

It looks like itex2mml does support the svg environment, and it says it inserts that into the MathML.  If it has done this by enclosing it in an appropriate token elements (like <mtext> for example), then that MathML should work in MathJax, provided you have set the allowHtmlInTokenNodes option to true in the mml block of your MathJax configuration.  If that is not how itex2mml works, it may be that it uses an old hack based on a <semantics> tag that has an <annotation-xml> tag as its first element, which is not legal, but worked in Firefox; many people used it, so MathJax implemented it as well, for compatibility.  So that method should work as well.

Again, see the linked release notes above for details.

Davide