Do floating menu webview items support MathJax?

Floating Menus / Widgets
1

Hello there -

I was wondering if a floating menu webview item supported MathJax? If a webview item is really just a WKWebView item, then I don’t think there’s anything which would prevent that, in principle. But I tried creating a simple floating menu with a webview item defined as follows:

<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
<div style='height: 100%;'>
Hello there!
Here's a button: 
<button>press me</button>
Does this work? $\alpha + \beta$
</div>

and the math wasn’t formatted.

Sorry if this is a stupid question! I’m very new to BTT and am still figuring my way around this program, which seems incredibly powerful.

2

I think in general that works fine, but I don’t think you HTML / script would work anywhere. Does it work in your default browser?

Here is an example from the MathJax website that also works fine in BTT: MathJax v4 with TeX input and MathML output


<head>
  <style>
  mjx-container[display="block"] {
    display: block;
    margin: 1em 0;
  }
  </style>
  <style id="mjx-explorer-styles"></style>
  <script>
  MathJax = {
    //
    // Load only TeX input and the contextual menu
    //
    loader: {load: ['input/tex', 'a11y/explorer', 'ui/menu']},
    tex: {inlineMath: {'[+]': [['$', '$']]}},
    startup: {
      //
      // Set the styles needed for the expression explorer and
      // disable the assistive MathML menu and renderer menu.
      //
      ready() {
        MathJax.startup.defaultReady();
        //
        // Add the CSS needed for the explorer (since that is usually
        // done by the output jax, and we don't have one).
        //
        const doc = MathJax.startup.document;
        const {StyleJsonSheet} = MathJax._.util.StyleJson;
        const css = new StyleJsonSheet(doc.constructor.speechStyles);
        const sheet = document.getElementById('mjx-explorer-styles');
        sheet.textContent = css.cssText;
        //
        // Disable the some menu item.
        //
        doc.menu.menu.findID('Options', 'AssistiveMml').disable();
        doc.menu.menu.findID('Settings', 'Renderer').disable();
      },
      //
      // Perform the initial typesetting (we don't have an output
      // jax, so this isn't done automatically).
      //
      pageReady() {
        return MathJax.startup.document.renderPromise();
      }
    },
    options: {
      //
      // Override the usual typeset render action with one that generates MathML output.
      //
      renderActions: {
        assistiveMml: [],  // disable assistive mathml
        typeset: [150,
          (doc) => {for (math of doc.math) {MathJax.config.renderMathML(math, doc)}},
          (math, doc) => MathJax.config.renderMathML(math, doc)
        ]
      },
      //
      // Don't add assistive MathML.
      //
      menuOptions: {
        settings: {
          assistiveMml: false,
        }
      }
    },
    //
    // The action to use for rendering MathML.
    //   Create the container and insert the MathML into it.
    //   Mark it as a display expression, if needed.
    //
    renderMathML(math, doc) {
      math.typesetRoot = document.createElement('mjx-container');
      math.typesetRoot.innerHTML = MathJax.startup.toMML(math.root);
      if (math.display) {
        math.typesetRoot.setAttribute('display', 'block');
      }
    }
  };
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/startup.js"></script>
</head>
<body>
   
  <p>
  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </p>
 
</body>
3

Here is a more minimal example that works fine here:


<html>
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
<body>
  <p>
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </p>
 
</body>
</html>

//edit: actually yours also works fine, you just need to use two $ instead of one:


<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
<div style='height: 100%;'>
Hello there!
Here's a button: 
<button>press me</button>
Does this work? $$\alpha + \beta$$
</div>
4

Thank you for the incredibly rapid reply - that’s amazing!

It seems that, out of the box, MathJax doesn’t enable “$” as a delimiter because it would break too many web pages. When you pointed out that “$$” would work, I tried the standard LaTeX delimiters of \( … \) and \[ … \] and those worked just fine.

Sorry — it’s been a long time since I’ve set up MathJax in a new environment from scratch, and so I forgot about all of these subtleties…

1 Like