mathjax
how to render \quantity ?
Replace the text below with the details of the issue you are facing.
DO NOT simply erase the form and type a free-form response.
Issue Summary
\quantity render is abnormal
in HTML page
in vue
What's the reason? How to solve it
thks
Steps to Reproduce:
- html code
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
<script type="text/javascript">
window.MathJax = {
loader: {load: ['[tex]/physics']},
tex: {packages: {'[+]': ['physics']}},
};
</script>
</head>
<body>
$$\quantity{2.5}$$
</body>
</html>
- page result
- vue code
const latexExpression = ' $$\quantity{2.5}$$ ' - vue page result
Technical details:
I am using the following MathJax configuration:
window.MathJax = {
loader: {load: ['[tex]/physics']},
tex: {packages: {'[+]': ['physics']}},
};
and loading MathJax via
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>
For strings enclosed in quotes in javascript, the \ character has special meaning. It is used to enter control sequences (e.g., \n for a newline, or \t for a tab), so in order to get an actual \ into your string, you need to use \\ instead. So you should do
const latexExpression = ' $$\\quantity{2.5}$$ '
instead.
For strings enclosed in quotes in javascript, the
\character has special meaning. It is used to enter control sequences (e.g.,\nfor a newline, or\tfor a tab), so in order to get an actual\into your string, you need to use\\instead. So you should doconst latexExpression = ' $$\\quantity{2.5}$$ 'instead.
in vue , I tried showing it as follows, is it correct？
It looks like the physics package may not have been loaded. That might indicate that your MathJax configuration isn't being processed, or that the physics component isn't being found. Note that the configuration script should come before the script that loads MathJax itself (you have them in the wrong order in your sample file above), so that could be the issue in your vue app. Make sure the MathJax configuration script comes first, and then check that there are no errors in the browser console concerning the physics package.