mathjax/mathjax-demos-web

A repository with examples using mathjax-v3

MathJax

Beautiful math in all browsers

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems. It requires no setup on the part of the user (no plugins to download or software to install), so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily. Simply include MathJax and some mathematics in a web page, and MathJax does the rest.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages

• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader

• Easy for authors, flexible for publishers, extensible for developers

• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality

• Powerful API for integration with other web applications

See http://www.mathjax.org/ for additional details about MathJax, and https://docs.mathjax.org for the MathJax documentation.

MathJax Components

MathJax version 3 uses files called components that contain the various MathJax modules that you can include in your web pages or access on a server through NodeJS. Some components combine all the pieces you need to run MathJax with one or more input formats and a particular output format, while other components are pieces that can be loaded on demand when needed, or by a configuration that specifies the pieces you want to combine in a custom way. For usage instructions, see the MathJax documentation.

Components provide a convenient packaging of MathJax's modules, but it is possible for you to form your own custom components, or to use MathJax's modules directly in a node application on a server. There are web examples showing how to use MathJax in web pages and how to build your own components, and node examples illustrating how to use components in node applications or call MathJax modules directly.

What's in this Repository

This repository contains only the component files for MathJax, not the source code for MathJax (which are available in a separate MathJax source repository). These component files are the ones served by the CDNs that offer MathJax to the web. In version 2, the files used on the web were also the source files for MathJax, but in version 3, the source files are no longer on the CDN, as they are not what are run in the browser.

The components are stored in the es5 directory, and are in ES5 format for the widest possible compatibility. In the future, we may make an es6 directory containing ES6 versions of the components.

Installation and Use

Using MathJax components from a CDN on the web

If you are loading MathJax from a CDN into a web page, there is no need to install anything. Simply use a script tag that loads MathJax from the CDN. E.g.,

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

See the MathJax documentation, the MathJax Web Demos, and the MathJax Component Repository for more information.

Hosting your own copy of the MathJax Components

If you want to host MathJax from your own server, you can do so by installing the mathjax package using npm and moving the es5 directory to an appropriate location on your server:

npm install mathjax@3
mv node_modules/mathjax/es5 <path-to-server-location>/mathjax

Note that we are still making updates to version 2, so include @3 when you install, since the latest chronological version may not be version 3.

Alternatively, you can get the files via GitHub:

git clone https://github.com/mathjax/MathJax.git mj-tmp
mv mj-tmp/es5 <path-to-server-location>/mathjax
rm -rf mj-tmp

Then (in either case) you can use a script tag like the following:

<script id="MathJax-script" async src="<url-to-your-site>/mathjax/tex-chtml.js"></script>

where <url-to-your-site> is replaced by the URL to the location where you moved the MathJax files above.

See the documentation for details.

Using MathJax components in a node application

To use MathJax components in a node application, install the mathjax package:

npm install mathjax@3

(we are still making updates to version 2, so you should include @3 since the latest chronological version may not be version 3).

Then require mathjax within your application:

require('mathjax').init({ ... }).then((MathJax) => { ... });

where the first { ... } is a MathJax configuration, and the second { ... } is the code to run after MathJax has been loaded. E.g.

require('mathjax').init({
  loader: {load: ['input/tex', 'output/svg']}
}).then((MathJax) => {
  const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', {display: true});
  console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));

Note: this technique is for node-based application only, not for browser applications. This method sets up an alternative DOM implementation, which you don't need in the browser, and tells MathJax to use node's require() command to load external modules. This setup will not work properly in the browser, even if you webpack it or bundle it in other ways.

See the documentation and the MathJax Node Repository for more details.

Reducing the Size of the Components Directory

Since the es5 directory contains all the component files, so if you are only planning one use one configuration, you can reduce the size of the MathJax directory by removing unused components. For example, if you are using the tex-chtml.js component, then you can remove the tex-mml-chtml.js, tex-svg.js, tex-mml-svg.js, tex-chtml-full.js, and tex-svg-full.js configurations, which will save considerable space. Indeed, you should be able to remove everything other than tex-chtml.js, and the input/tex/extensions, output/chtml/fonts/woff-v2, adaptors, a11y, and sre directories. If you are using the results only on the web, you can remove adaptors as well.

If you are not using A11Y support (e.g., speech generation, or semantic enrichment), then you can remove a11y and sre as well (though in this case you may need to disable the assistive tools in the MathJax contextual menu in order to avoid MathJax trying to load them when they aren't there).

If you are using SVG rather than CommonHTML output (e.g., tex-svg.js rather than tex-chtml.js), you can remove the output/chtml/fonts/woff-v2 directory. If you are using MathML input rather than TeX (e.g., mml-chtml.js rather than tex-chtml.js), then you can remove input/tex/extensions as well.

The Component Files and Pull Requests

The es5 directory is generated automatically from the contents of the MathJax source repository. You can rebuild the components using the command

npm run make-es5 --silent

Note that since the contents of this repository are generated automatically, you should not submit pull requests that modify the contents of the es5 directory. If you wish to submit a modification to MathJax, you should make a pull request in the MathJax source repository.

MathJax Community

The main MathJax website is http://www.mathjax.org, and it includes announcements and other important information. A MathJax user forum for asking questions and getting assistance is hosted at Google, and the MathJax bug tracker is hosted at GitHub.

Before reporting a bug, please check that it has not already been reported. Also, please use the bug tracker (rather than the help forum) for reporting bugs, and use the user's forum (rather than the bug tracker) for questions about how to use MathJax.

MathJax Resources

• MathJax Documentation
• MathJax Components
• MathJax Source Code
• MathJax Web Examples
• MathJax Node Examples
• MathJax Bug Tracker
• MathJax Users' Group

mathjax-demos-web's Issues

Can you provide more js example code for mathjax3? Especially mml3.

I can hardly find any open source implementations or usage examples of mml3 on github. I'm currently simply merging two people's code to implement as a plugin for Markdown it to enable the use of mathjax for Markdown in a variety of places. but I'm expecting to use mml3 for the output, and at the moment this code can only be used with the normal output/chtml and svg outputs, but the code for those outputs is not reproducible Currently, the code only uses normal output/chtml and svg output, but the code for these outputs is not reproducible. Please forgive me for not being much of a programmer. https://github.com/taophilosophy/markdown-it-mathjax3/tree/26fd2dd37036c148d634eb89a646108a77e0b4ce Currently it works fine and can only output svg and chtml code located. All other updated code is unavailable for testing, and I don't know exactly how to write it. Thank you very much.

Code Conflict

Using tex-svg.js and tex-mml-chtml.js on the same page causes a conflict and this error appears

"Uncaught TypeError: MathJax.tex2svgPromise is not a function"

update to 3.0.0-alpha.3

Cf. https://github.com/mathjax/mathjax-v3/releases/tag/3.0.0-alpha.3

a note on using the alpha.1 copy on npm

The first alpha on npm has a drawback when it comes to the harcoded fonts. They end up in node_modules/mathjax3/mathjax2/css/... so if you build something you need to copy these along.

Of course that's not hard -- the copy-webpack-plugin is your friend, e.g.,

// $ npm install mathjax3 webpack copy-webpack-plugin babel-core babel-preset-env babel-loader uglifyjs-webpack-plugin

const Uglify = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    name: 'yourscript',
    entry: './yourscript.js',
    output: {
        path: __dirname,
        filename: 'yourscript.dist.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    },
    plugins: [
        new Uglify(),
        new CopyWebpackPlugin([
            { from: 'node_modules/mathjax3/mathjax2', to: './mathjax2' }
        ])
    ]
};

update to 3.0.0-alpha.2

It's out, let's update.

add integrity hash to demos

Encapsulate part of equation into its own DOM element

I am trying to rewrite an old mathjax extension (adding Reveal.js specific capability to mathjax equations rendered into the slides) using the new API of Mathjax V3.

I am using the custom-tex-extension example as starting point.

The goal would be to be able to encapsulate part of an equation into its own DOM element on which specific classes have been added.

See the image below for an example:
in this case, I am aiming at isolating the \alpha + 4 part into its own DOM element for which I am adding a danger class. What I get instead is on the right part.

The problem I have is that right now, the part is correctly isolated, but the \alpha + 4 part is not translated and only the raw text is rendered.
This is not surprising since I am giving parser.create('text', text) as child, but I was unable to find how to add the "transformed" nodes instead.

A simplified version of the relevant code is given below.

tex_fragments(parser, name, type) {
    const def = parseAttributes(parser.GetBrackets(name))

    const text = convertEscapes(parser.GetArgument(name))
    
    const node = parser.create('node', 'mi', [parser.create('text', text)], def)
    parser.Push(node)

}

Any guidance on how I could do this would be appreciated.
Thanks a lot and great work on the V3!

XSS vulnerabilities

Even if it's not an official site or anything why would you leave it open to XSS attacks? I mean on https://mathjax.github.io/MathJax-demos-web/input-tex_mml2chtml.html
Even the easy

<img src=x onerror="alert(document.domain)"/>

Would work and in fact, even in the "official" mathjax usage there are some XSS vulnerabilities, for example, sympy has an XSS vulnerability in its mathjax "interpreter" sympy/sympy-live#192

"npm run make-custom-tex-extension" is not working

Hi there.

after I read this page "https://github.com/mathjax/MathJax-demos-web/blob/master/custom-tex-extension/mml.html.md"
I run "npm install" command in the downloaded MathJax-demos-web folder.
then, I got this message.

---

found 2 vulnerabilities (1 moderate, 1 high)
run npm audit fix to fix them, or npm audit for details

and I run "npm run make-custom-tex-extension " then,

[email protected] make-custom-tex-extension E:\ai\nodejs\MathJax-demos-web\ttt\MathJax-demos-web
cd custom-tex-extension && node ../node_modules/mathjax-full/components/bin/pack

Command failed: npx webpack --display-modules

so, I want to make the "mml.min.js" file but, I could not do that. so Please help me.
I run on windows 10 , with node : v12.18.0

error when using the demo tex2svg page

Hi
I'm trying to run the demo at https://mathjax.github.io/MathJax-demos-web/input-tex2svg.html
Didn't change anything, and when I hit render tex button, I get "Invalid option "family" (no default value)."
Firefox 68, Chrome 84, Windows 10, noticed this since Friday 28/08/2020.

Properly translating skipStartupTypeset into v3 config

Currently there is the line skipStartupTypeset: Translate.transfer('startup.typeset'), in the automated translator. But if skipStartupTypeset was true in MJ2, then the typeset parameter should be false in MJ3 and vice versa.

Building a custom Tex extension crashes.

I was following along the demo here and here.

1. I make a directory: hwjax. Then I start a package.json through npm init. Oh, npm --version returns 6.14.10 and node --version returns v12.19.0. The package.json contains:

{
  "name": "hwjax",
  "version": "0.0.1",
  "description": "Mathjax extension for homework Latex class.",
  "main": "homework.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "mathjax",
    "latex",
    "homework"
  ],
  "author": "Simurgh",
  "license": "GPL-3.0-or-later"
}

2. Now running npm install mathjax-full webpack webpack-cli terser-webpack-plugin babel-loader @babel/core @babel/preset-env produces:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.

+ [email protected]
+ @babel/[email protected]
+ [email protected]
+ @babel/[email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 278 packages from 184 contributors and audited 278 packages in 11.236s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. Right so now I assume we have everything. I get the files mml.js and webpack.config.js. Listing files in hwjax/ produces: mml.js node_modules package.json package-lock.json webpack.config.js. Note that I fixed the paths in the webpack configs:

const PACKAGE = require('./node_modules/mathjax-full/components/webpack.common.js');

module.exports = PACKAGE(
    'mml',                                // the package to build
    './node_modules/mathjax-full/js',    // location of the MathJax js library
    [                                     // packages to link to
        'components/src/core/lib',
        'components/src/input/tex-base/lib'
    ],
    __dirname,                            // our directory
    '.'                                   // dist directory
);

4. Now I don't think I need an npm install but I do it anyways since the documentation asks for it. At this point, I don't expect npm run make-custom-tex-extension to work because the package.json does not define any scripts.

npm ERR! missing script: make-custom-tex-extension

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tsfn/.npm/_logs/2020-12-31T23_12_20_164Z-debug.log

Now I run node node_modules/mathjax-full/components/bin/makeAll which produces:

[snip]
Building /src/ui/menu
    
Building /src/ui/safe
    
Webpacking /path/to/hwjax
    Command failed: npx webpack --display-modules
Webpacking /src/a11y/assistive-mml
    Command failed: npx webpack --display-modules
Webpacking /src/a11y/complexity
[snip]

5. Here is the summary of the setup:

.../hwjax$ npm --version && node --version && npx webpack --version && tree -L 1
6.14.10
v12.19.0
webpack 5.11.1
webpack-cli 4.3.1
.
├── mml.js
├── node_modules
├── package.json
├── package-lock.json
└── webpack.config.js

1 directory, 4 files

mfenced has background color

mfenced displays with a colored background for some reason (debugging code that wasn't removed?)

Two examples:

<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<mfenced> <mrow><mn>2</mn><mi>x</mi><mo>+</mo><mi>y</mi> </mrow></mfenced>
</math>

<math display='block' xmlns='http://www.w3.org/1998/Math/MathML'>
<mfenced open=')' close='('> <mn>1</mn><mn>456</mn> <mrow><mn>2</mn><mi>x</mi><mo>+</mo><mi>y</mi> </mrow></mfenced>
</math>

Here's how they display:

use font-url for re-usability

Let's change the demos to point the font-url to rawgit.

Problems with color macros

This probably falls into the "not yet implemented" category, but just in case it doesn't...
[just noticed message saying color.js isn't implemented for V3, but see bottom when it is]

With

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://cdn.rawgit.com/mathjax/mj3-demos/3.0.0-beta.1/mj3-tex2html-beta.dist.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ TeX: { extensions: ["color.js"] }});
</script>

in the header and this horrible mess in the body,

$$ 
\color{#00B219}{\bf{8}}
\color{#adadad}{(}
\bf{\color{#ff8000}{-}}
6
\,\colorbox{#e5ff00}{\(\mkern{-7mu}+\mkern{-6mu}\)}\,
2
\color{#adadad}{)}
\,\colorbox{#9100ff}{\(\mkern{-7mu}\div\mkern{-6mu}\)}\,
\color{#ff0040}{\bf{3}}
\;\color{#adadad}{=}
$$

I get "You can't use 'macro parameeter character #' in math mode".

Rendering in V2 was (IMHO) less than perfect, but it conveyed the idea I wanted to. The two weirdnesses are that the - and = seem much wider than they should be and that the parens aren't close to symmetric:

[tex2html] add support for $..$

As per last dev meeting.

tex_mml_2html request fail

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js connect reset

Change size of mathml with mathjax

I have copied most of the code from your repo.
I have following code: fiddle

And following code for rendering mathml formulas:

    function convert() {
      var input = document.getElementById("input").value.trim();
      output = document.getElementById('output');
      output.innerHTML = '';
      output.appendChild(MathJax.mathml2svg(input, {scale: 150}));
    }

As you can see the scale is set 150. After changing it to for instance 300, nothing changes after rerendering the formula. Why? It should be bigger

Also when I change the line with MathJax to following:

output.appendChild(MathJax.mathml2svg(input, {em: 150, ex: 6}));

Nothing changes. Do you know why?

[Converter] minScaleAdjust should be scaled down just like scale

This v2 config:

MathJax.Hub.Config({
    "HTML-CSS": {
        scale: 100,
        minScaleAdjust: 50,
    },
});

gets converted into:

window.MathJax = {
  chtml: {
    scale: 1,
    minScale: 50
  }
};

IIUC, minScale should also be scaled by a factor of 100 but currently it's just transferred .e.g. Translate.transfer('chtml.minScale') w/o any transformation.

Example MathJax3 from NPM module

Hi,

I am trying to figure out how to use the newly published NPM module for MathJax v3.
Examples I see in this repo seem to be a bit outdated, or at least not apply to consuming the mathjax3 npm module.

I'm just curious to see what the new MathJax will look like, and if there will be any perf improvement.
If you could paste a sample snippet on how to setup a TeX to HTML or SVG pipeline using the NPM module, it would be awesome.

Thanks

Demo of tagFormat

https://mathjax.github.io/mj3-demos/#tex-extensions
I'm attempting to use tagFormat as a replacement for equationNumbers from v2, but I haven't been able to figure out the syntax in the configuration using trial-and-error since I thought that the syntax would be somewhat similar to equationNumbers.

Other than this, my testing indicates that v3 will be a nice improvement for our application!

"npm run make-custom-tex-extension" is still not working.

a few months ago, I issued this. and checked that this is resolved, but unfortunately, it is not working.
When I typed this command "npm run make-custom-tex-extension" , I found that the file "mml.min.js" with this logs.

---

npm run make-custom-tex-extension

[email protected] make-custom-tex-extension E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web
cd custom-tex-extension && node ../node_modules/mathjax-full/components/bin/pack

Hash: 640e2f14a8f1dd014edf
Version: webpack 4.44.2
Time: 1084ms
Built at: 2020-11-25 8:07:40 ├F10: PM┤
Asset Size Chunks Chunk Names
mml.min.js 113 KiB 0 [emitted] main
Entrypoint main = mml.min.js
[0] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/core/MmlTree/MmlNode.js 28.6 KiB {0} [built]
[1] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/TexError.js 1.68 KiB {0} [built]
.........................................
.........................................
........................................
[23] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/Stack.js 4.13 KiB {0} [built]
[24] E:\ai\nodejs\MathJaxNodeTest\MathJax-demos-web/node_modules/mathjax-full/js/input/tex/Symbol.js 1.73 KiB {0} [built]

I think that that file "mml.min.js" created is too big to be working compared to original mml.min.js you distributed.
that file's size created was 113KB.

when i opened the mml.html, then i found that paper's not working.
so any guide would you please to suggest to me?

Screen reader accessibility

Screen reader accessibility

I've tested with NVDA+Firefox and have the following comments:

https://mathjax.github.io/mj3-demos/tex-svg.html

• expressions have no description / label, they are read inline as "clickable" by NVDA (nvda is detecting a click handler, but it is not finding a label or text to read)
• focusing on expressin and pressing shift+space reads entire expression, but doesn't seem to allow you to navigate as in MathJax2 (walker is checked in menu)

https://mathjax.github.io/mj3-demos/tex-chtml.html

When I look at this with NVDA, screen reader still announces "clickable" when focusing an expression, but the tex input also seems to show up following the expressions.

General Suggestions for Improving MathJax a11y

I posted this a while ago in the MathJax2 issues list, but thought I'd include it here to make it easier to find for those working on V3.

The native accessibility built into MathJax is impressive! The navigation works better than MathPlayer, and I like the fact that the user has a  choice of speech rule sets.  It would be great to be able to retire good old MathPlayer and allow MathJax to handle all accessibility natively.

However, there are two major stumbling blocks which IMO must be overcome before this is truly useful in practice:

1. Currently, if you are reading a web page containing math with a
   screen reader (say NVDA in Firefox), because of the way the screen
   reader handles elements which have a role of "application", and because
   of the way the math is auraly collapsed by default, it is impossible to
   read math in context. For instance, if you had a sentence like "The
   derivative of 2x^2 is 2x", the screen reader would read something like
   the following when it encountered  it in a document: "The derivative of
   application is application". Even if the screen reader didn't hide the
   content behind the application role by default, MathJax is still only
   presenting an abbreviated form in speech at the top level. So, for
   instance, the top level of an equation might be "summation = power" (see
   the first equation following the math input box on asciimath.org).

IMO, MathJax should have a mode, which can be set via the menu, to allow
the expression to be fully spoken at top level, then you can drill down
via shift+space and arrows if you need to.

2. Currently, pressing escape does back you out of the expression, but
   the expression still has browser focus. This means that the screen
   reader's document reading commands are still disabled due to the
   application role. I've been able to mitigate this by applying a global
   keydown handler on the document that when receiving an escape key and
   the element with focus is a MathJax container, blur() the element! This
   works, but it leaves the focus undefined, which makes continuing reading difficult.

-- Rich Caloggero, MIT Adaptive Tech. Info Center

On 4/24/2019 11:37 AM, Mary J Ziegler wrote:
Hi Rich,

Perhaps I'm behind the times, but based on the lack of other replies, I'm not sure if anyone confirmed this for you or not?! Just now, I finally went through this message in detail on both Windows and Mac.

On Windows:
I, too, can navigate the MathJax on asciimath in the manner you describe (with explorer on/assistive math off), but can't do so as well with explorer inactive.
I, too, cannot navigate the same on edX - until I change the math renderer to Common HTML (as is on ascii math), in which case I can.
In both cases, when I turn off explorer, I'm at a loss to get into the detail of the math as when I press shift+space I end up in the context menu. Perhaps I need a different keyboard shortcut to get there with explorer off?

On Mac:
I keep running into the math getting collapsed and not knowing how to un-collapse it. We can look at that together. I can't sort out the keyboard shortcuts on VoiceOver to be sure if this is working or not. That said, it works for me when uncollapsed.

I need to go to my 12 noon event soon. See you in a bit!
Mary

-----Original Message-----
From: Rich Caloggero [email protected]
Sent: Thursday, April 18, 2019 1:45 PM
To: Jeff Witt [email protected]; Mary J Ziegler [email protected]
Cc: accessibility [email protected]
Subject: MathJax Accessibility works without MathPlayer, but not on edX

http://asciimath.org/

MathJax is properly configured on this site. By default, it uses the configuration I suggested (using assistive math). See the MathJax menu by right clicking on an expression) and check out the "accessibility"
submenu).

Now, turn on the "explorer" from the accessibility menu, and after doing this, go back into the accessibility menu and be sure that "assistive math" is turned off; do not change anything else.

Now tab to an expression and press "shift+space". you will now be able to navigate the expression with up, down, left, and right arrows. My suspician is that this will work on MacOS as well as windows. I have not yet tested with jaws.

Another interesting thing is that MathPlayer is no longer needed. Even if you switch back to the "assistive math" mode and turn off the explorer, NVDA still reads the math, and I believe it processes it directly.

Can either of you verify any of this using the above URL?

I cannot get this to work on edX? What version of MathJax is in use on edX?  I have gotten it to work by downloading the latest version of MathJax (2.7.5) and using one of the supplied configuration files "AM_CHTML"; this processes asciimath input, and generates common HTML by default (but you can change the output format via the menu to whatever you want).

I will play around some more, and try to get it to work with TeX input (no reason it should not, but who knows)!

-- Rich

Request: react and vue webpack bundling examples

Most modern JS applications are distributed via a single entrypoint bundle generated by webpack, where webpack has been configured to do vendor chunking by default. All the MathJax examples I've seen assume that Mathjax is going to have its own webpack bundle, e.g. custom-mathjax.html or is going to be loaded via a CDN, instead of being imported alongside imports to other modern JS library in a single entrypoint bundle.

Please provide examples / quick starts that just assume we need the basic default settings for:

1. vanilla webpack, preferably starting with webpack's own example application and just using HtmlWebpackPlugin to output the example page
2. Create-React-App created project
3. Vue CLI- created project