Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

how to render \quantity ? #3278

Open
guanzongjiang opened this issue Aug 28, 2024 · 3 comments
Open

how to render \quantity ? #3278

guanzongjiang opened this issue Aug 28, 2024 · 3 comments
Labels
Expected Behavior This is how MathJax works

Comments

@guanzongjiang
Copy link

guanzongjiang commented Aug 28, 2024 •
edited by dpvc
Loading

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
image
in vue
image

What's the reason?
How to solve it

thks

Steps to Reproduce:

  1. 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>
  1. page result

image

  1. vue code
    const latexExpression = ' $$\quantity{2.5}$$ '
  2. vue page result
    image

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>
@dpvc
Copy link
Member

dpvc commented Aug 28, 2024

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.

@dpvc dpvc added the Expected Behavior This is how MathJax works label Aug 28, 2024
@guanzongjiang
Copy link
Author

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？
image

@dpvc
Copy link
Member

dpvc commented Aug 30, 2024

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.

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
Expected Behavior This is how MathJax works
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dpvc @guanzongjiang