By Michael Xiong, University of British Columbia
A Guide to
Overview
On the other hand,
With respect to using
“Yikers! There’s Way Too Much Text Below!”
The text below explain in fairly great detail how things work, however if you need a quick summary feel free to jump to the TL;DR summary section by clicking here.
Getting Started
Where to Type
Another way to include
<script id="MathJax-script"
async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
…between the <head> tags. This calls in
a service called MathJax, which can interpret and render
In fact, you can copy the block of code shown below, save it as an HTML file, and type along through the guide. If you used HTML in the past the code will be fairly self-explanatory. If you haven’t had much experience with HTML don’t worry, consider the following steps:
- Copy the code block below to your plain text editor of choice. Notepad, sublime text, Vim all can work.
-
The
<p>and</p>parts in the<body>are called paragraph tags, they denote a separate paragraph. You can follow along this guide by typing the codes presented here between the<p>tags. -
You can start new
<p></p>pairs to start new paragraphs. -
Save the file with the
.htmlextension, any browser should be able to open it. After you make changes to the file you can save it, open it in the browser (or refresh the browser page if it’s already open) and see the newly rendered modifications, this can help you follow along.
HTML Code to copy:
<!DOCTYPE html>
<html>
<head>
<script id="MathJax-script"
async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<p>
REPLACE THIS PART WITH MATH / TEXT AS YOU FOLLOW ALONG
</p>
<p>
YOU CAN REPLACE THIS PART TOO
</p>
<p>
YOU CAN START MORE PARAGRAPHS BY
CREATING MORE PARAGRAPH TAG PAIRS
</p>
</body>
</html>
The Basics
The basics of
\(1+1=2\)
The \(\) denotes the beginning and end of the
mathematics, the characters typed between \( and
\) will be rendered into math.
Of course, you can have more than just numbers in a math equation.
For instance, if you’d like to type a linear equation, you can enter:
\(y=mx+b\)
…to show
If you’re typing in math using the native equation editor from Canvas,
you do not need to include the \(\) as that is added by
default. Also note that in the past the $ sign was
used to surround math, so you’d do $1+1=2$, while this
is still a fairly common occurence it is actually not a recommended
practice as it is a deprecated
syntax, in this guide we’ll use \(\) exclusively as
an example of best practice.
Commands and Curly Braces
So far what we’ve seen seems like trivial features that other text
editor can easily accomplish, however the power of
For instance, if you’d like to type
\(\frac{1}{2}\)
Let’s break down the components part by part. Other than the
\(\) introduced previously, we see that there’s a
part \frac that seems to denote a command for
fractions. You’d be correct to think that! Indeed, in
\ back-slash followed by the name of the command,
in this case it is frac. Commands are used to
insert symbols and format texts. To let the command know what
it needs to operate on, we use curly braces {} to
denote the arguments or parameters to be processed. Note that
some commands take more than one argument, like the
\frac command we’re using here. The order of the
arguments passed do matter, as we see here we pass
{1} first followed by {2}, the
\frac command was built to understand the first
argument as the numerator and the second argument as the
denominator, resulting in what we see, which is
While here our curly braces only enclosed one number per pair,
note that as the formulas you type become complex, more and
more content might need to be enclosed by the braces. Keep careful
track of the braces as mismatching / incomplete pairs will often
result in
Superscripts and Subscripts
Superscripts and subscripts occur fairly frequently in math,
and ^ as a command. Note that while ^
is a command, it is used often enough that \ in front to recognize it. So
for instance, if we’d like to type
\(e^x\)
Like mentioned before, curly braces denote which parts need to be
operated on by a command. If you don’t add braces after ^
^ will need to be formatted. If multiple
characters should be in the superscripts, enclose them with a
pair of curly braces. So if you need to show
\(e^{ax}\)
Typing subscripts is identical to typing superscripts, except
instead of a ^ we use _ underscore
to insert a subscript. So for instance if we want to type
\(F_{x,A}\)
Formatting options also expand greatly when we realize we can
combine various commands. For instance, if we want to type
\(a_{mn}^{2}\)
(Note that from here on out we will omit showing
\(\) unless something is different as to avoid clutter)
Text and Normal Characters with \text and \mathrm
You may have noticed that the letters in math mode are all
slightly italicized, this is the convention for single letter
variables in mathematics. However, sometimes we need the letter
to be upright. Take the derivative operator:
The convention for the operator is to have the \mathrm{}
command, which makes the paramters inserted upright. So for our
derivative operator example, we can use it with the frac
command to type:
\frac{ \mathrm{d} }{ \mathrm{d} x}
Which makes \mathrm{} commands are used, they actually render
identically to to if we typed:
\frac{\mathrm{d}}{\mathrm{d}x}
That’s because
Where we do want a space? Indeed, if we try:
\mathrm{Standard Deviation}
We will only get \text{} command. So for instance
if we use:
\text{Standard Deviation}(x)
We would indeed get \text{} command register spaces, why not always use
it over \mathrm{} which doesn’t register spaces?
Well because \mathrm{} still have a number of
advantages. For one \mathrm{} generally just plays
nicer with the math mode that all the equations are typed
in, and for two the fact that spaces are included is not always
a good thing. In fact, the idea of \mathrm{}
handle the spacing to avoid random formatting issues. Furthermore
some commands are actually not available inside the
\text{} environment, so only use it for, well,
texts.
If you really need to insert a space in math mode (i.e. anywhere
else not in \text{}), you can type \,
to manually insert a space. So for instance:
\mathrm{Standard \, Deviation}(x)
Will produce
Note that while a lot of whitespaces are ignored in
\frac x y renders out \fracxy will only result in error. That is because
in the latter case, fracxy is being called, but no such command
exists. That’s why you should be careful to include spaces in
key locations to avoid errors (And for \frac
always use curly braces around the arguments to avoid confusion,
we only show the \frac x y case for demo).
Inline and Display Math
You may have noticed that above, some maths were embedded
inside a larger text block (i.e. inside the line), while some
maths were emphasized in their own lines, and appear larger.
This is due to different equations being placed in different
environments. Environments in \(\) we use to enclose
our math denotes an environment too, the inline math mode
environment. As the name suggests, this environment is used to
display math equations inside a line. This is best used for
small expressions or single variable letters such as \[ and \]. Math
typed in the display math environment between \[ \] will
be shown in a separate line, and will be larger in size.
You should make a judgment call based on the complexity and
size of the expression you’d like to type to see whether inline or
displayed math should be used. For simple expressions like
0=ax^2 + bx + c, it probably suffice to have it
embedded between other texts (unless you’d like to highlight
them in particular). But for expressions like
\frac{x^{\frac{2}{3}}}{y^{\frac{1}{5}}} it’d be better
to use display math. The expression surrounded by \(\)
will render as \[\] for display math it’d render out as
Note that for the Canvas equation editor, since sizing is handled
differently there, you do not need to use \[\]. Similar
to how \(\) does not need to be included there.
(We’ll omit showing \(\) and \[\]
hereafter to avoid clutter. From the size and position of the
math the environment they’re in should be clear)
Greek Letters
Greek letters occur frequently in math and statistics. It is
easy to type these in \ followed by the name of the letter, for instance
typing:
\sigma
Will display
\Sigma
Will display
Sum, Product and Integrals Symbols, Symbol Limits
The sum symbol in \sum
which will produce:
So we may wonder, why would we use \sum if we can
already insert capital sigma with \Sigma? Well the
reason is that the \sum symbol will actually fit
better for the series of math that comes after it. For one it
is larger, so there would not be an apparent mismatch if a
larger expression (involving fractions etc.) comes after it. It
also allows for better limits to be shown. So for instance if
you need to show a sum from \Sigma like:
\Sigma_{i=1}^n \frac{x_i}{y_i}
…will obtain:
Whereas if we try:
\sum_{i=1}^n \frac{x_i}{y_i}
We will obtain:
As you can see, not only does the \sum command look
bigger, but the subscript and superscript now turn into proper
limits for the sign, being on top and on the bottom. Note that
if typed in inline math the limits may still be squished to
the side of the \sum sign, but the size would
still accomodate texts better.
A similar thing goes for the sequence product
\prod. While we can indeed
use the capital Pi \Pi letter also, the formatting is not as
good as using \prod. For comparison:
\Pi_{i=1}^n \frac{x_i}{y_i}
Produces:
Whereas:
\prod_{i=1}^n \frac{x_i}{y_i}
Produces:
Another symbol that has limits similarly is the integral sign
\int_{a}^{b} f(x)\mathrm{d}x
Which makes:
Enclosing Large Expressions with Brackets and Other Characters
Let’s say we want to include brackets in our expression, and we type something like
e^{x}:= \sum_{j=0}^{\infty} ( \frac{x^j}{j!} )
…but when we render it, it turns out like
Yikers! the expression is too large, and the brackets appear
short and awkward (like me in highschool gym class), how do
we fix this? Well, we can make use of the \left
and \right commands. Indeed, if we do:
e^{x}:= \sum_{j=0}^{\infty} \left( \frac{x^j}{j!} \right)
We’d get:
Neat! We see that by putting \left before (
and \right before ) the brackets
now adjust automatically to the expression’s height. This can be
used for other kind of brackets too, e.g.
e^{x}:= \sum_{j=0}^{\infty} \left[ \frac{x^j}{j!} \right]
…yields:
You can even use curly brackets. But wait, isn’t curly brackets
used in the syntax? Yes, but we can escape that by simply adding
a \ in front of { and }.
This is generally true, whether for \left \right
or in other texts. So if we do:
e^{x}:= \sum_{j=0}^{\infty} \left\{ \frac{x^j}{j!} \right\}
…we’d get:
Note that \left \right doesn’t necessarily need
matching characters. Indeed, if we try:
\left. \frac{x}{2} \right| _{0}^{2} = 1
We’d get:
We also see that following \left or \right
with . will leave that side empty when rendered.
This is what to do if only one side needs to be shown, you
cannot type only one of \left or \right,
that will fail to render.
Other specialized symbols
There’re many other symbols available in
| Some Commonly Used Symbols | ||
|---|---|---|
| Description | Code | Rendered |
| Cross multiplication sign | \times |
|
| Dot multiplication sign | \cdot |
|
| Division sign | \div |
|
| Square root sign | \sqrt |
|
| Plus or minus sign | \pm |
|
| Greater than or equal to symbol | \geq |
|
| Less than or equal to symbol | \leq |
|
| Implies symbol | \implies |
|
| Iff (if and only if) symbol | \iff |
|
| Therefore symbol | \therefore |
|
| Triple dots symbol | \dots |
|
| Infinity symbol | \infty |
|
Remembering Commands and Symbols
The amount of commands for various formats and symbols can seem
daunting at first, but there’re a couple things that can help.
One thing that helps with remembering the commands is that fact
that most of them follow the result that they’re supposed to
produce, such as the fraction command being \frac{}
and the product command being \prod{}. There’re
also a lot of online resources that list the possible commands
available, including the link shown earlier. Another
very powerful tool is Google (or any search engine you prefer
). In fact, since
The Align Environment
We have already discussed the inline math environment that uses
\(\) and the display math environment that uses
\[\], now we introduce a special instance of the
display math environment, the align environment,
that is great for typing a series of equations that must be
aligned in a certain fashion.
Beginning and ending this environment is a bit different. You
would surround the maths you want aligned with the statements
\begin{align} and \end{align}. In
fact, for most \begin{...} and
\end{...} statements, and the name of the environment
will be provided in the curly brackets after \begin and
\end. The inline and display math environments
are used so frequently that they were given the shorthand of
\(\) and \[\].
Back to the align environment, like display math,
this environment will show math in a separate block. Something that
is special though is that you can use \\ to break up
different lines of math, and use & as a character to
“align” them. So for instance, typing the following code block:
\begin{align}
1 + 1 &= 2 \\
&2 + 2 = 4 \\
3 + 3 = &6
\end{align}
Will render the following math:
As you can see, not only does align break the math
into a separate block, it also attempts to “align” the expressions
we’ve typed at the locations where we placed the &.
Different lines of math are separated using \\, note
that the last line does not need \\.
The example placed & at somewhat silly locations to
illustrate the point, in practice this environment is most commonly
used to show something of similar format to the following.
Where there’re a series of equations that must be aligned, as the name of the environment suggests. The code for the above math, for those interested, is:
\begin{align}
e^{ix}&= \cos x + i \sin x \\
x := \pi \implies e^{i\pi} &= \cos \pi + i \sin \pi \\
&= -1 + 0 \cdot i \\
\implies e^{i\pi} &= -1
\end{align}
Note that even if you’re using the Canvas editor, you actually
do have to state where you \begin{align} and
\end{align}, since this is a specialized
environment.
TL;DR Summary
While there’re way more features available in
-
- For embedding math in HTML, make sure to insert this line:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>
between the<head>tags to allow for math to be rendered. -
For math shown in-line, surround them with
\(and\), so for instance\(1+1=2\)will show as -
For math shown on a separate line and in full size, surround
the math with
\[and\], so for instance,\[1+1=2\]will show as -
If you’re using the Canvas editor,
\(\)and\[\]are not necessary. -
(We’ll omit showing the
\(\)and\[\]hereafter unless directly relevant, as to avoid clutter.) -
In
\backslash, followed by the name of the command we need to execute, followed by arguments / parameters fed to the command enclosed in curly brackets{}. So for instance to make a fraction\frac{1}{2}, starting the command with\, naming the command we want, in this case the fraction command calledfrac, and inserting the two arguments in order, each enclosed by{}. - Curly brackets in general are used to enclose parts that need to be acted upon by certain commands, to feed arguments etc.
-
The superscript command is called with
^while the subscript command is called with_, due to the frequency of these commands, they’re exceptional in that they don’t begin with\. Use curly brackets to enclose parts that needs to be in superscript / subscript, otherwise by default they’ll recognize the one character immediately after it. For instance, if we want to show(x_i)^2 = {x_{i}}^{2}. Also as you can see, commands can be easily nestled in other commands to create very complex expressions. For instance, We can use\frac{x_i^2}{y_j^3}to create -
By default, characters typed in math mode are slightly
italicized as part of the convention for mathematical variables.
In certain instances where a few letters need to be upright,
such as the
\mathrmcommand, so to show the derivative operator above we’d type\frac{\mathrm{d}}{\mathrm{d}x}. -
However, the
\mathrm{}command does not recognize spaces typed in it, so\mathrm{Standard Deviation}, will show up as\,command may be used to force insert a space. -
Note that while
\frac{x}{y}operate the exact same as\frac{ x }{ y }, you may still want to insert space for clarity reasons. Moreover in certain places you MUST insert a space to let\fracxywon’t render anything whereas\frac x yrendersfracxyis seen as a command name, and no command of that name exists. (Also note that for\fracit is best to enclose arguments with braces always to avoid issues) -
If a longer string of words / phrases with spaces must be
typed, consider using the
\text{}command.\text{Standard Deviation}will show up as\mathrm{}command is still preferred as\mathrm{}is less error-prone. Also in the context of both Canvas and HTML files, the bulk of the regular text should be typed using their regular methods.\textis only used for one or two phrases inside other math expressions. -
Greek letters are inserted with
\plus the name of the greek letter. So\alphainserts\betainserts\Omegainserts\Sigmainserts\Piinserts -
The sum sign
\sum, and its limits are handled similar to sub and superscripts. So for instance\sum_{i=1}^{n}, note that while the sign is the capital Sigma letter, it’s better to use\sumover\Sigmafor sum series as\sumhas better sizing and handles the limits better (can be displayed at top and bottom). -
The product sign
\prod, with similar limit handling as\sum. Similar to\sum, while it is a capital Pi, using\prodis better for showing product of a sequence due to better sizing. -
The integral sign
\int, with similar limit handling as\sumand\prod. Typing\int_{x_0}^{x_f}yields -
To enclose large expressions with brackets, surround the
expression in
\left(and\right). The brackets will then be adjusted to fit the expression. For instance the following math:\left(and\right)):e^x := \sum_{j=0}^{\infty} \left( \frac{x^j}{j!} \right) = \left( 1+x+\frac{x^2}{2}+\frac{x^3}{6}+\frac{x^4}{24} + \dots\right) -
\leftand\rightcan be followed by characters other than(and)to enclose expressions with different brackets / characters. For instance\left[ \frac{x}{y}\right]renders as\left \right, For instance,\left. \frac{x}{2} \right|_{1}^{2} = \frac{2}{2} - \frac{1}{2}renders as -
You can use curly brackets in your math too (as symbols),
whether in
\left \rightpairs or regularly. Simply put a\in front of the curly bracket, so for instance\left\{ \frac{x}{y}\right\} -
\(\)and the display math environment denoted by\[\]. An environment that is a special kind of display math is thealignenvironment. This environment is denoted by\begin{align}and\end{align}at its start and end respectively. You can type many lines of math in this environment, broken by\\, and the environment will seek to “align” the maths at where&is inserted. For instance
\begin{align}
e^{ix} &= \cos x + i \sin x \\
\iff e^{i\pi} &= \cos \pi + i \sin \pi \\
\implies e^{i\pi} &= -1
\end{align}
Notice how the math is surrounded by\begin{align}and\end{align}, how the first and second line of math is broken by\\and how the math lines up at where the&sign is inserted when rendered. -
There’re many more commands in
Exercises
Congratulations on getting a head-start on using
Practice makes perfect! Here’re a couple of expressions of varying complexity for exercise purposes. Some of the symbols in the exercises are not covered in the long or the short version of the guide, this is to encourage you to seek out the answers either through googling or through the command list (searching for resources is actually a very important skill!). The solutions are still included at the bottom for final comparison. Note that with many programming / markup languages, there’re often many ways to do one thing, so the solutions are not necessarily absolute.
Also note that depending on your faculty some equation types and formats may not be encountered at all, so feel free to select the equations more applicable for yourself when attempting the exercise (i.e. for most folks, doing up to and including exercise 6 is sufficient).
-
National Income Formula:
-
Discounting:
-
Compounding:
-
Bond Evaluation:
-
Probability:
-
Variance:
-
Epsilon Delta Definition of Limits:
-
Definition of the Derivative:
-
Definition of the Integral:
-
Vectors:
-
Static Equilibrium:
-
Schrödinger Wave Equation:
-
Navier Stokes Equations:
-
Bonus meme:
-
National Income Formula:
\(Y = C + I + G + (X-M)\) -
Discounting:
\(PV = FV(1+r)^{-n}\) -
Compounding:
\(FV = PV(1+r)^n\) -
Bond Evaluation:
\[P = I\left[\frac{1-(1+r)^{-n}}{r}\right] + F(1+r)^{-n}\] -
Probability:
\begin{align}
P(A \cup B) &= P(A) + P(B) - P(A \cap B) \\
P(A \cap B) &= P(A) P(B|A) \\
P(A|B) &= \frac{P(B|A) P(A)}{P(B|A) P(A) + P(B|A')P(A')} \\
P(A_j | B) &= \frac{P(A_j) P(B|A_j)}{\sum P(A_i) P(B|A_i)}
\end{align} -
Variance:
\begin{align}
&\mathrm{VAR}(X) = \sigma_X^2 = E[(X-\mu)^2] \\
&\mathrm{VAR}(X) = \sigma_X^2 = E(X^2)-[E(X)]^2 \\
&\mathrm{VAR}(X) = \sum_{i=1}^n \left( p_i \cdot (x_i - \mu)^2 \right)
= \sum_{i=1}^n \left[ p_i \cdot \left(x_i - \sum_{i=1}^n p_i x_i \right)^2\right]\\
&\mathrm{COV}(X) = \sigma_{XY} = E(X\cdot Y)-[E(X)-E(Y)] \\
&\mathrm{VAR}(aX) = a^2 \sigma^2_X \\
&\mathrm{VAR}(aX + bY + cZ) =
a^2 \sigma_X^2 + b^2 \sigma_Y^2 + c^2 \sigma_Z^2
+ 2ac \sigma_{XZ} + 2bc \sigma{YZ}
\end{align} -
Epsilon Delta Definition of Limits:
\[
\lim_{x\to c}f(x)=L\iff (\forall\varepsilon\gt 0,\exists\delta\gt 0,
\forall x\in D, 0\lt |x-c|\lt\delta \implies |f(x)-L|\lt \varepsilon)
\] -
Definition of the Derivative:
\begin{align}
\frac{\mathrm{d}f}{\mathrm{d}x}(x) &=
\lim_{\Delta x \to 0} \frac{f(x+\Delta x)-f(x)}{\Delta x} \\
\frac{\mathrm{d}f}{\mathrm{d}x}(c) &=
\lim_{x \to c} \frac{f(x)-f(c)}{x-c}
\end{align} -
Definition of the Integral:
\begin{align}
\Delta x &:= \frac{x_f - x_0}{n}\,,n\in\mathbb{N}\\
\int_{x_0}^{x_f} f(x)\mathrm{d}x &:=
\lim_{\Delta x \to 0} \sum_{i=1}^{n} f(x_i^*) \Delta x \\
&\dots \\
f(x) &= \frac{\mathrm{d}F}{\mathrm{d}x}(x) \\
\implies \int_{x_0}^{x_f} f(x)\mathrm{d}x &=
\left. F(x) \right|_{x_0}^{x_f}
\end{align} -
Vectors:
\begin{align}
&\mathbf{a} + \mathbf{b} = \sum_{i}^{n} (a_i + b_i)\mathbf{\hat{e}}_i \\
& \mathbf{a} \cdot \mathbf{b} = \sum_{i}^{n} a_i \cdot b_i \\
& \mathbf{a} \times \mathbf{b} = (a_2b_3 - a_3b_2)\mathbf{\hat{i}}
+ (a_3b_1 - a_1b_3)\mathbf{\hat{j}}
+ (a_1b_2 - a_2b_1)\mathbf{\hat{k}} \\
& \mathrm{proj}_\mathbf{v} \mathbf{a} =
\frac{\mathbf{a}\cdot\mathbf{v}}{{||\mathbf{v}||}^2} \mathbf{v} \\
\end{align} -
Static Equilibrium:
\begin{align}
& \sum \mathbf{F} = \mathbf{0} \\
& \implies \sum F_x = \sum F_y = \sum F_z = 0 \\
&{}\\
& \sum \mathbf{M}_P = \mathbf{0} \\
& \implies \left(\sum_i \mathbf{F}_i \times \mathbf{r}_{i}\right)_P =
\sum_i \left( \det \begin{bmatrix}
\mathbf{\hat{i}} & \mathbf{\hat{j}} & \mathbf{\hat{k}} \\
F_{i,x} & F_{i,y} & F_{i,z} \\
r_{i,x} & r_{i,y} & r_{i,z} \\
\end{bmatrix} \right)_P = \mathbf{0}
\end{align} -
Schrödinger Wave Equation:
\[
\left[-\frac{\hbar^2}{2m} \frac{\partial^2}{\partial x^2}
+V(x,t)\right] \Psi(x,t)
= i\hbar\frac{\partial}{\partial t} \Psi(x,t)
\] -
Navier Stokes Equations:
\begin{align}
\nabla \cdot \mathbf{V} &= 0 \\
\rho\left[\frac{\partial \mathbf{V}}{\partial t}+(\mathbf{V}\cdot\nabla) \mathbf{V}\right]
&= -\nabla p + \nabla \cdot \mathbf{\tau} + \rho\mathbf{g}
\end{align} -
Bonus meme:
\[\Huge \mathscr{B}\mathfrak{onus}\,\mathscr{M}\mathfrak{eme}\]
> WTH? I love \LaTeX now!
Exactly!
Bonus Bonus Meme
Godzilla wins