Home > Developer > Web Develop
Today share with you the use of mathematical formulas in Web pages.
How do you write a formula like this?
There are even more complex:
It was a common practice to use a mathematical formula generator to generate a picture and then embed the image in a Web page.
is to use this mathematical formula generator to generate a picture of the formula, and then change the IMG's style property to style="padding:0px; Border: none; Margin:0px; Vertical-align: bottom;" You can insert it into a Web page.
This method can be used to use the mathematical formula generator of Ruan Feng. Specific approach to his blog to see, I will not carry: Ruan a peak number Student Builder blog (click Me).
However, sometimes we do not want to embed the image in the Web page, that is, how to do without the image method to achieve it? The answer is to use the Mahtjax plugin. First Officer Net: Mathjax official website, then GitHub's information: GitHub, and finally an English document: documentation
These are all the information I've looked for and I'll talk about simple ways to use them.
The first step is to introduce: you can introduce CDN, you can also download JS introduction, personal Referral CDN introduced.
Type= "text/javascript" src= "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config= TEX-AMS-MML_HTMLORMML "></script>
The above configure support TeX and MATHLL syntax, and if necessary support asciimath syntax, change configure to "? CONFIG=TEX-AMS=MML_HTMLORMML"
Step two: There are 3 ways to use:
①:TeX and latex format mode
The default operators are $$...$$ and \[... \] for display math, \ (... \) for online math. Note in particular that the $...$ online delimiter does not use the default value. This is because the dollar sign appears often in non-mathematical settings, which may cause some text to be considered as accidental math. For example, for cell separators, "... The cost is for the first $2.50 and $2.00 each additional one ... "will result in the first of the phrase" 2.50, and "is considered mathematically because it belongs to the dollar sign. Note that HTML tags may conflict with Tex syntax, "less than/greater than/ampersands&" requires a space, such as:$ $a < b$$;
In order to prevent errors, add a section of the JS code, the example is as follows:
<!DOCTYPE HTML><HTML><Head><title>Mathjax TeX Test Page</title><Scripttype= "Text/x-mathjax-config">MathJax.Hub.Config ({tex2jax: {inlinemath: [['$','$'], ['\\(','\\)']]}});</Script><Scripttype= "Text/javascript"src= "Http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></Script></Head><Body>When $a \ne 0$, there is the solutions to \ (ax^2 + bx + c = 0\) and they are$ $x = {-B \pm \sqrt{b^2-4ac} \over 2a}.$ $</Body></HTML>
②: The second method: Add MathML medium Label form
<!DOCTYPE HTML><HTML><Head><title>Mathjax MathML Test Page</title><Scripttype= "Text/javascript"src= "Http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></Script></Head><Body><P> when<Mathxmlns= "Http://www.w3.org/1998/Math/MathML"> <mi>A</mi><Mo>& #x2260;</Mo><mn>0</mn></Math>, there is and solutions to<Mathxmlns= "Http://www.w3.org/1998/Math/MathML"> <mi>A</mi><Msup><mi>X</mi><mn>2</mn></Msup> <Mo>+</Mo> <mi>B</mi><mi>X</mi> <Mo>+</Mo> <mi>C</mi> <Mo>=</Mo> <mn>0</mn></Math>and they are<Mathxmlns= "Http://www.w3.org/1998/Math/MathML"Display= "Block"> <mi>X</mi> <Mo>=</Mo> <Mrow> <Mfrac> <Mrow> <Mo>& #x2212;</Mo> <mi>B</mi> <Mo>& #x00B1;</Mo> <msqrt> <Msup><mi>B</mi><mn>2</mn></Msup> <Mo>& #x2212;</Mo> <mn>4</mn><mi>A</mi><mi>C</mi> </msqrt> </Mrow> <Mrow> <mn>2</mn><mi>A</mi> </Mrow> </Mfrac> </Mrow> <Mtext>.</Mtext></Math></P></Body></HTML>
③ Third type: Asciimath input. "As the symbol."
<!DOCTYPE HTML><HTML><Head><title>Mathjax Asciimath Test Page</title><Scripttype= "Text/javascript"src= "Http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></Script></Head><Body><P>When ' A! = 0 ', there is solutions to ' ax^2 + bx + c = 0 ' Andthey is</P><Pstyle= "Text-align:center">' x = (-B +-sqrt (B^2-4AC))/(2a). '</P></Body></HTML>
This is the result of the operation.
Done
Write a mathematical formula in a Web page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
