How do I configure MathJax={} when there is a missing error or other error to display original data instead of error.

[guoyutao]

Issue Summary

How do I configure MathJax={} when there is a missing error or other error to display original data instead of error.
This is a problem with the data:$h^2+left(\frac{8}{2}\right)^2=5^2$ , not MathJax's problem.
I just want to show original data:$h^2+left(\frac{8}{2}\right)^2=5^2$, not show the 'Missing.....' info.Due to this yellow warning, it doesn't look very clear to the users.

Technical details:

• MathJax Version: 4.0.6
• Client OS: (e.g., Mac OS X 14.3.1)
• Browser: (e.g., Chrome)

I am using the following MathJax configuration:

window.MathJax = {
      options: {
        enableMenu: false,
        menuOptions: {
          settings: {
            enrich: false,
            braille: false
          },
        },
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code',
          'a'],
        ignoreHtmlClass: 'tex2jax_ignore',
        processHtmlClass: 'tex2jax_process',
      },
      loader: { load: ['[tex]/texhtml'] },
      tex: {
        allowTexHTML: true,
        packages: { '[+]': ['texhtml'] },
        inlineMath: [
          ['$', '$'],
          ['\\(', '\\)']
        ],
        displayMath: [
          ['$$', '$$'],
          ['\\[', '\\]'],
        ]
      },
      chtml: {
        displayOverflow: 'linebreak',
        displayAlign: 'left',
        // scale: 2.2,
        minScale: .65,
        mtextInheritFont: !0,
        merrorInheritFont: !0,
        skipAttributes: {},
        exFactor: 18,
        displayIndent: "0",
        matchFontHeight: 0,
        adaptiveCSS: !0
      },
      includeHtmlTags: {
        br: "\n",
        wbr: "",
        "#comment": ""
      },
      linebreaks: {                  // options for when overflow is linebreak
        inline: true,                   // true for browser-based breaking of inline equations
        width: '95%',                  // a fixed size or a percentage of the container width
        lineleading: 2,                // the default lineleading in em units
        LinebreakVisitor: null,         // The LinebreakVisitor to use
      },
      output: {
        linebreaks: {
          inline: true,
        },
        font: 'mathjax-modern'
      },
      startup: {
        ready() {
          const { ChtmlMath } = MathJax._.output.chtml.Wrappers.math;
          delete ChtmlMath.styles['mjx-container[jax="CHTML"] mjx-break::after'];
          ChtmlMath.styles['mjx-container[jax="CHTML"] mjx-break'] = {
            'white-space': 'normal',
            'font-family': 'MJX-BRK'
          };
          MathJax.startup.defaultReady();
          const adaptor = MathJax.startup.adaptor;
          MathJax.startup.document.outputJax.postFilters.add(({ data }) => {
            for (const brk of adaptor.tags(data, 'mjx-break')) {
              brk.innerHTML = ' ';
            }
          });
        }
      }
    }

and loading MathJax via

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4.0.0-beta.6/tex-mml-chtml.js"></script>

    <div ref="exampleRef" class="example_class" v-html="tempstr">
    </div>

    const tempstr = ref('$h^2+left(\frac{8}{2}\right)^2=5^2$');

    nextTick(() => {
            window.MathJax.typesetPromise([exampleRef.value]);
     });

  .example_class {
    width: 100px;
    background-color: #fff;
  }

Supporting information:

Error Info:

[dpvc]

Thanks for re-filing the issue with more information.

If you add '[tex]/noerrors' to the loader.load list, that may get you close to what you are looking for. That will show the original TeX code, but in red on a yellow background as with the error in your image, and without the original delimiters. So that might be sufficient for your needs.

You can add some CSS to your page to change the colors. For example:

mjx-merror[data-mjx-error] {
  background: inherit;
  color: inherit;
}

will use the background and foreground colors in effect for the text surrounding the math.

But it still doesn't have the delimiters. You can fake those using

mjx-merror[data-mjx-error] {
  background: inherit;
  color: inherit;
}
mjx-container mjx-merror[data-mjx-error]::before,
mjx-container mjx-merror[data-mjx-error]::before {
  content: '$';
  font-family: initial
};
mjx-container[display] mjx-merror[data-mjx-error]::before,
mjx-container[display] mjx-merror[data-mjx-error]::before {
  content: '$$';
  font-family: initial
};

Perhaps that will do what you need?

[guoyutao]

Thank you very much, this is exactly what I want.👍🏻