Node.js: add ui/menu to rendered math

134 views
Skip to first unread message

Bruce B. Birkett

unread,
May 13, 2021, 1:38:20 PM5/13/21
to mathja...@googlegroups.com

Hello,

First, thanks to the MathJax team for all of the ongoing work for v3, especially given limited resources.  We're particularly excited to work toward implementing the server-side processing that's now possible through Node.js.

As a first step, we used the provided example file tex2chtml-page  to process a simple html file.  We noticed that the rendered math doesn't have the usual ui/menu attached (allowing zoom and such).  For accessibility we'd like it there, and so tried getting it back by adding an argv for enableMenu as an option (code is below), but that throws an error

MathJax(?): Invalid option "enableMenu" (no default value).
TypeError: Cannot read property 'startup' of undefined

so obviously I'm not implementing this correctly.  Apologies if I just haven't spotted the right documentation. 

Can someone tell me how to fix this?  Many thanks in advance.

--Bruce


* * * * *

//
//  The default TeX packages to use
//
const PACKAGES = 'base, autoload, require, ams, newcommand';

//
//  Get the command-line arguments
//
var argv = require('yargs')
    .demand(0).strict()
    .usage('$0 [options] file.html > converted.html')
    .options({
        em: {
            default: 16,
            describe: 'em-size in pixels'
        },
        ex: {
            default: 8,
            describe: 'ex-size in pixels'
        },
        packages: {
            default: PACKAGES,
            describe: 'the packages to use, e.g. "base, ams"; use "*" to represent the default packages, e.g, "*, bbox"'
        },https://github.com/mathjax/MathJax-demos-node/blob/master/simple/tex2chtml-page
        fontURL: {
            default: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',
            describe: 'the URL to use for web fonts'
        },
        dist: {
            boolean: true,
            default: false,
            describe: 'true to use webpacked version, false to use MathJax source files'
        },
        menu: {
            boolean: true,
            default: true,
            describe: 'trying to include menu; no luck so far'
        }

    })
    .argv;

//
//  Read the HTML file
//
const htmlfile = require('fs').readFileSync(argv._[0], 'utf8');

//
// Load MathJax and initialize MathJax and typeset the given math
//
require('mathjax-full').init({
    //
    //  The MathJax configuration
    //
    options: {
        enableMenu: argv.menu
    },

    loader: {
        source: (argv.dist ? {} : require('mathjax-full/components/src/source.js').source),
        load: ['adaptors/liteDOM', 'tex-chtml']
    },
    tex: {
        packages: argv.packages.replace('\*', PACKAGES).split(/\s*,\s*/)
    },
    chtml: {
        fontURL: argv.fontURL,
        exFactor: argv.ex / argv.em
    },
    'adaptors/liteDOM': {
        fontSize: argv.em
    },
    startup: {
        document: htmlfile
    }
}).then((MathJax) => {
    //
    //  Display the output
    //
    const adaptor = MathJax.startup.adaptor;
    const html = MathJax.startup.document;
    if (html.math.toArray().length === 0) adaptor.remove(html.outputJax.chtmlStyles);
    console.log(adaptor.doctype(html.document));
    console.log(adaptor.outerHTML(adaptor.root(html.document)));
}).catch(err => console.log(err));


* * * * *

Davide Cervone

unread,
May 16, 2021, 8:10:29 AM5/16/21
to mathja...@googlegroups.com
The MathJax menu relies on MathJax actually being present in the page.  E.g., the ability to change the renderer requires the ability to load a new renderer and the presence of the internal structures associated with the expressions MathJax has found in order to render them in a different form.  Similarly, the expression explorer (part of the assistive support) relies on the internal representation that MathJax maintains.  Even the "show math as..." relies on those structures.  So it is not easy to have the menu without having all of MathJax, and the menu code is not currently designed to support that.

We would like to be able to provide at least some of the menu functionality for server-side generated MathJax output, but do not have a stand-alone version ready for release (I have an experimental version, but it is not yet production-ready).  This is something that we do hope to provide in the future, but it is not yet available.

Davide


--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/6347df20-ec83-824c-0545-27fc9cfb3dfe%40matheno.com.

Jason Siefken

unread,
Mar 13, 2022, 9:53:16 PM3/13/22
to MathJax Users
This would be hugely helpful for my project (a rewrite of the PreTeXt frontend in React). I have no issue loading MathJax on the main page, but I'd like all the math to be pre-rendered. It would be great if MathJax stored enough information with a pre-rendered element to "rerender" it. That way, the prerendered math would display but upon click or focus, the live MathJax would take over and could do whatever it needs.

   Jason
Reply all
Reply to author
Forward
0 new messages