mathjax
How do I configure MathJax={} when there is a missing error or other error to display original data instead of error.
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/[email protected]/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:
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?
