how to render \quantity ?

guanzongjiang commented 2 months ago

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>

$$\quantity{2.5}$$


3. page result

![image](https://github.com/user-attachments/assets/61c1e2af-62ba-43dc-8a98-378f3fa29b92)

4. vue code
   `const latexExpression = ' $$\quantity{2.5}$$ '
`
6. vue page result
![image](https://github.com/user-attachments/assets/8c358eda-dfd7-4269-b3e9-aadb2ac97558)

### Technical details:

I am using the following MathJax configuration:

``` js
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>

dpvc commented 2 months ago

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.

guanzongjiang commented 2 months ago

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.

in vue , I tried showing it as follows, is it correct？

dpvc commented 2 months ago

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.

mathjax / MathJax