Hello, everyone!
HTML can express most things, but sometimes there are things that are difficult to express. One of those things is mathematical equations.
Writing them on paper is the fastest way, but…
Nowadays, you can easily find answers on the internet, so there’s no need to write an entire article about it. Nevertheless, I will write an article just for the sake of my own notes.
First, there are two main ways to represent equations in HTML: using images or using a mathematical notation language.
Using images is easier since you don’t have to think too much. You can create the equation in an image editing software, save it as an image file, and then embed it in your HTML like below.
However, this method requires some extra steps like opening the image editing software and saving the file, which can be a bit inconvenient.
Now, let’s talk about using a mathematical notation language, specifically MathJax.
First, before writing the equation, you need to include some JavaScript code in your HTML like this:
You can copy the code above by clicking the button.
You need to replace the placeholder （Insert equation here） with your own equation. For example, if you replace it with "x+1=3", it will be displayed like this:
Next, we'll look at different mathematical notations and their respective ways of writing them.
| Name | Notation | Representation |
|---|---|---|
| Power | a^b | [a^b] |
| Fraction | \frac{a}{b} | [\frac{a}{b}] |
| Square root | \sqrt{a} | [\sqrt{a}] |
| Integral | \int_{a}^{b}\,dx | [\int_{a}^{b},dx] |
| Summation | \sum_{i=0}^{n} | [\sum_{i=0}^{n}] |
| Limit | \lim_{x\to0} | [\lim_{x\to0}] |
| Sine | \sin{a} | [\sin{a}] |
| Cosine | \cos{a} | [\cos{a}] |
| Tangent | \tan{a} | [\tan{a}] |
| Pi | \pi | [\pi] |
When inserting special symbols like "∫" or "√", you need to use "\" before the symbol. If you want to place a character below the symbol, use "_", and if you want to place it above, use "^".
For simple equations like "x+1=3", you can write them without much thought.
The mathematical equation generated by the rule above is like below:
\[ \int_{0}^{1}\frac{x}{\sqrt{1+x^2}}\,dx=\sqrt{2}-1 \]It looks like an equation on a textbook, much great!
That's the end of this article, but I'll also share a practical example in the following article. Please take a look.
See you next time!
