LaTeX HTML Comprehensive Guide – Sauder Teaching Playbook

By Michael Xiong, University of British Columbia

A Guide to $\mathrm{\LaTeX\,}$in Canvas and HTML

Overview

$\mathrm{\LaTeX\,}$ is a system used to type math equations. Text and math equations are first typed in the $\mathrm{\LaTeX\,}$ syntax using plaintext then converted into readable forms for the audience. The main advantage of this system over other formatting options, such as the equation editor in Word, is that it is systematic, transportable, quick (when you get used to the syntax) and consistent. A math expression produced in Word can only be edited inside the application, will lose its formatting when copied elsewhere, and takes a long time to complete as it relies on clicking through pages of symbols for specialty characters. Even then, all that work may result in inconsistent formatting as misclicks will easily cause brackets being out of place, exponents being off etc, when these issues are encountered it’s hard to also isolate the problematic components, often resulting in a restart of the expression editing process.

On the other hand, $\mathrm{\LaTeX\,}$ formats its contents at the very end when you compile the plaintext into their display form. The plaintext nature of the input means you can edit your content in any text editor you like, and it can be easily copied or pasted around. Using plaintext to substitute for symbols also means the speed is only limited by your familiarity of the syntax and your typing speed, saving the hassle of scrolling through menus upon menus of symbols and going back and forth between your keyboard and mouse. In the long run this results in much better workflow. Last but not least, the way $\mathrm{\LaTeX\,}$ compile math is much more systematic, producing beautiful, clear results that is consistent. If errors occur, it’s also easier to copy out non-problematic parts out so progress won’t be lost from minor errors.

With respect to using $\mathrm{\LaTeX\,}$ for online teaching, it is most relevant for use in the Canvas equation editor and using it in conjunction with HTML to produce formula sheets. This guide will list the basic syntax for $\mathrm{\LaTeX\,}$ in said platforms. Note that $\mathrm{\LaTeX\,}$ has much more powerful capabilities to typeset entire papers, but for the sake of brevity we’ll only go over the parts immediately relevant to our needs.

“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 $\mathrm{\LaTeX\,}$

$\mathrm{\LaTeX\,}$ can be typed in the Canvas equation editor (in the editing window, go to Insert -> Equation -> Switch to Advanced View).

Another way to include $\mathrm{\LaTeX\,}$ is to type it within an HTML file. After setting up a basic HTML file, include 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. This calls in a service called MathJax, which can interpret and render $\mathrm{\LaTeX\,}$ typed inside HTML files. So long as you begin / end your $\mathrm{\LaTeX\,}$ materials properly, the maths will be rendered by MathJax.

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 .html extension, 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 $\mathrm{\LaTeX\,}$ for simple equations is quite intuitive. For instance, to get $1+1=2$, you would simply type:

$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 $y=mx+b$.

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 $\mathrm{\LaTeX\,}$ comes from its vast array of commands for inserting special symbols and formatting. Take building a fraction, in Word you may have to click around feverishly, inserting the division line, clicking the top part and bottom part to add the numerator and the denomenator. In $\mathrm{\LaTeX\,}$, this is easily accomplished with a couple characters.

For instance, if you’d like to type $\frac{1}{2}$ in $\mathrm{\LaTeX\,}$, you can simpy do:

$\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 $\mathrm{\LaTeX\,}$, commands are commonly denoted by a \ 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 $\frac{1}{2}$.

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 $\mathrm{\LaTeX\,}$ failing to interpret what you typed! Not enclosing content properly by curly braces can also result in sub-optimal or unintended formatting.

Superscripts and Subscripts

Superscripts and subscripts occur fairly frequently in math, and $\mathrm{\LaTeX\,}$ makes typing them quite easy. For superscripts, $\mathrm{\LaTeX\,}$ simply uses the carrot character ^ as a command. Note that while ^ is a command, it is used often enough that $\mathrm{\LaTeX\,}$ does not require a \ in front to recognize it. So for instance, if we’d like to type $e^x$, we’ll only need 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 ^ $\mathrm{\LaTeX\,}$ will assume only the character immediately 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}$, type:

$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}$ we’d 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}$ we can do:

$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: \[\frac{\mathrm{d}}{\mathrm{d}x}\]

The convention for the operator is to have the $\mathrm{d}$ character upright, as to ensure it is recognized as an operator rather than a variable. To do this we can use 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 $\frac{ \mathrm{d} }{ \mathrm{d} x}$. Note that while spaces were inserted in the code above to show where the \mathrm{} commands are used, they actually render identically to to if we typed:

\frac{\mathrm{d}}{\mathrm{d}x}

That’s because $\mathrm{\LaTeX\,}$, like many other markup language such as html, often ignore or collapse spaces. This is ok for command syntax, as that allows everything to be more compact, but what about texts? What if we want something like \[\text{Standard Deviation}(x)\]

Where we do want a space? Indeed, if we try:

\mathrm{Standard Deviation}

We will only get $\mathrm{Standard Deviation}(x)$. What now? The answer is to use the \text{} command. So for instance if we use:

\text{Standard Deviation}(x)

We would indeed get $\text{Standard Deviation}(x)$. So if the \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{\LaTeX\,}$ is that formatting will be handled by the software, including spacing between characters and such, so for a couple characters that don’t require spaces, it’s best to let \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 $\mathrm{Standard \, Deviation}(x)$

Note that while a lot of whitespaces are ignored in $\mathrm{\LaTeX\,}$, you may still need to incorporate some of it into your syntax. For instance while \frac x y renders out $\frac x y$, \fracxy will only result in error. That is because in the latter case, $\mathrm{\LaTeX\,}$ thought a command named 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 $\mathrm{\LaTeX\,}$ govern how the code written in them will be interpreted and displayed, in fact the  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 $x$ or $1+1=2$. For longer, larger expressions or expressions we want to highlight, we should consider using the display math environment, which is enclosed by \[ 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 $\frac{x^{\frac{2}{3}}}{y^{\frac{1}{5}}}$ whereas using \[\] for display math it’d render out as \[\frac{x^{\frac{2}{3}}}{y^{\frac{1}{5}}}\] …as you can see, the size of the expression makes placing it in display math mode much better, as inline mode will squish down certain parts of the math, making it harder to see. It also appears awkward inside a normal line.

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 $\mathrm{\LaTeX\,}$. Simply type \ followed by the name of the letter, for instance typing:

\sigma

Will display $\sigma$. If you need to type the capitalized version, simply capitalized the first letter of the name, so for instance typing:

\Sigma

Will display $\Sigma$. Note that some Greek letters are identical to their Latin counterpart, such as capital alpha and capital A, in these cases the command may not work (and they’d be redundant anyhow).

Sum, Product and Integrals Symbols, Symbol Limits

The sum symbol in $\mathrm{\LaTeX\,}$ is \sum which will produce: \[\sum\]

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 $i=1$ to $n$, typing with \Sigma like:

\Sigma_{i=1}^n \frac{x_i}{y_i}

…will obtain:

\[\Sigma_{i=1}^n \frac{x_i}{y_i}\]

Whereas if we try:

\sum_{i=1}^n \frac{x_i}{y_i}

We will obtain:

\[\sum_{i=1}^n \frac{x_i}{y_i}\]

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$ sign typed with \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: \[\Pi_{i=1}^n \frac{x_i}{y_i}\]

Whereas:

\prod_{i=1}^n \frac{x_i}{y_i}

Produces: \[\prod_{i=1}^n \frac{x_i}{y_i}\]

Another symbol that has limits similarly is the integral sign $\int$. So for instance we can use:

\int_{a}^{b} f(x)\mathrm{d}x

Which makes: \[\int_{a}^{b} f(x)\mathrm{d}x\]

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

\[e^{x}:= \sum_{j=0}^{\infty} ( \frac{x^j}{j!} ) \]

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:

\[e^{x}:= \sum_{j=0}^{\infty} \left( \frac{x^j}{j!} \right) \]

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:

\[e^{x}:= \sum_{j=0}^{\infty} \left[ \frac{x^j}{j!} \right] \]

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:

\[e^{x}:= \sum_{j=0}^{\infty} \left\{ \frac{x^j}{j!} \right\} \]

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:\[\left. \frac{x}{2} \right| _{0}^{2} = 1\]

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 $\mathrm{\LaTeX\,}$, here we list a couple commonly used ones, but a more comprehensive list can be found at this site

Some Commonly Used Symbols
Description	Code	Rendered
Cross multiplication sign	`\times`	$\times$
Dot multiplication sign	`\cdot`	$\cdot$
Division sign	`\div`	$\div$
Square root sign	`\sqrt`	$\sqrt{}$
Plus or minus sign	`\pm`	$\pm$
Greater than or equal to symbol	`\geq`	$\geq$
Less than or equal to symbol	`\leq`	$\leq$
Implies symbol	`\implies`	$\implies$
Iff (if and only if) symbol	`\iff`	$\iff$
Therefore symbol	`\therefore`	$\therefore$
Triple dots symbol	`\dots`	$\dots$
Infinity symbol	`\infty`	$\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 $\mathrm{\LaTeX\,}$ is a well-explored software system, a lot of questions have already been asked in the past and are available on forums, Stackexchange and other services. If there’s a specific result we want to achieve, you’re encouraged to reach out to these powerful resources, you’d be surprised at how much material is available for seemingly niche goals.

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 $\mathrm{\LaTeX\,}$ environments, they are surrounded by some sort of \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:

\begin{align} 1 + 1 &= 2 \\ &2 + 2 = 4 \\ 3 + 3 = &6 \end{align}

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.

\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*}

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 $\mathrm{\LaTeX\,}$, what we’ve discussed so far should be sufficient to get you started on typing your own math. Here’s a quick summary of what we’ve covered:

$\mathrm{\LaTeX\,}$ can be typed in a variety of places, for the purposes of creating instruction material or formula sheets, the Canvas equation editor (advanced view) AND/OR embedded in HTML code are probably the most common cases.
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 $1+1=2$. Note that expressions shown in line may be squished to accomodate line spacing.
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 \[1+1=2\]
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 $\mathrm{\LaTeX\,}$, everything is edited in plain text. to insert special symbols or formatting, commands are used. Commands are usually began with a \ 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}\] we will type \frac{1}{2}, starting the command with \, naming the command we want, in this case the fraction command called frac, 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 \] we can type (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 \[\frac{x_i^2}{y_j^3}\]
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 $\mathrm{d}$ in \[\frac{\mathrm{d}}{\mathrm{d}x}\] We’d use the \mathrm command, 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 $\mathrm{Standard Deviation}$. In general, $\mathrm{\LaTeX\,}$ ignores or collapse a lot of whitespaces typed by the user, this is to keep formatting consistent. To manually insert a space, the \, command may be used to force insert a space.
Note that while $\mathrm{\LaTeX\,}$ ignores a lot of whitespace, making a line like \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 $\mathrm{\LaTeX\,}$ know how things are separated, for instance \fracxy won’t render anything whereas \frac x y renders $\frac x y$, as the first case the entire string of fracxy is seen as a command name, and no command of that name exists. (Also note that for \frac it 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 $\text{Standard Deviation}$. Note that for single upright letters or shorter phrase with no spaces the \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. \text is only used for one or two phrases inside other math expressions.
Greek letters are inserted with \ plus the name of the greek letter. So \alpha inserts $\alpha$ and \beta inserts $\beta$ etc. The capitalized version of the letters are inserted by capitalizing the first letter of the name, so forstance \Omega inserts $\Omega$, \Sigma inserts $\Sigma$ and \Pi inserts $\Pi$ etc.
The sum sign $\sum$ is inserted with \sum, and its limits are handled similar to sub and superscripts. So for instance \[\sum_{i=1}^{n}\] is inserted by the code \sum_{i=1}^{n}, note that while the sign is the capital Sigma letter, it’s better to use \sum over \Sigma for sum series as \sum has better sizing and handles the limits better (can be displayed at top and bottom).
The product sign $\prod$ is inserted with \prod, with similar limit handling as \sum. Similar to \sum, while it is a capital Pi, using \prod is better for showing product of a sequence due to better sizing.
The integral sign $\int$ is inserted with \int, with similar limit handling as \sum and \prod. Typing \int_{x_0}^{x_f} yields \[\int_{x_0}^{x_f}\]
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: \[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) \] Uses the code (observe the locations of \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)
\left and \right can be followed by characters other than ( and ) to enclose expressions with different brackets / characters. For instance \left[ \frac{x}{y}\right] renders as \[\left[\frac{x}{y}\right]\] You can even use different characters for a pair of \left \right, For instance, \left. \frac{x}{2} \right|_{1}^{2} = \frac{2}{2} - \frac{1}{2} renders as \[\left. \frac{x}{2}\right|_1^2 = \frac{2}{2} – \frac{1}{2}\]
You can use curly brackets in your math too (as symbols), whether in \left \right pairs or regularly. Simply put a \ in front of the curly bracket, so for instance \[\left\{ \frac{x}{y}\right\}\] is typed with \left\{ \frac{x}{y}\right\}
$\mathrm{\LaTeX\,}$ has many other environments beside the inline math environment denoted by  and the display math environment denoted by \[\]. An environment that is a special kind of display math is the align environment. 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*} Is inserted through \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 $\mathrm{\LaTeX\,}$ for every mathematical symbol and other formatting options under the sun, for a full list of them click here . Another thing to note is that since $\mathrm{\LaTeX\,}$ is a very well established tool, even seemingly obscure formatting questions are often already answered. You’re encouraged to search on Google, Stackexchange and other forums for answers if needed.

Exercises

Congratulations on getting a head-start on using $\mathrm{\LaTeX\,}$! It may seem intimidating at first, but with some practice you’ll have a powerful weapon in your teaching / support arsenal to type and show crisp, beautiful math.

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).

\[\Huge\mathscr{E}\Large\mathfrak{xercises}\]

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}\]

Toggle Solutions to Exercises

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

A Guide to \(\mathrm{\LaTeX\,}\)in Canvas and HTML

Overview

“Yikers! There’s Way Too Much Text Below!”

Getting Started

Where to Type \(\mathrm{\LaTeX\,}\)

The Basics

Commands and Curly Braces

Superscripts and Subscripts

Text and Normal Characters with `\text` and `\mathrm`

Inline and Display Math

Greek Letters

Sum, Product and Integrals Symbols, Symbol Limits

Enclosing Large Expressions with Brackets and Other Characters

Other specialized symbols

Remembering Commands and Symbols

The Align Environment

TL;DR Summary

Exercises

A Guide to \(\mathrm{\LaTeX\,}\)in Canvas and HTML

Overview

“Yikers! There’s Way Too Much Text Below!”

Getting Started

Where to Type \(\mathrm{\LaTeX\,}\)

The Basics

Commands and Curly Braces

Superscripts and Subscripts

Text and Normal Characters with \text and \mathrm

Inline and Display Math

Greek Letters

Sum, Product and Integrals Symbols, Symbol Limits

Enclosing Large Expressions with Brackets and Other Characters

Other specialized symbols

Remembering Commands and Symbols

The Align Environment

TL;DR Summary

Exercises

Text and Normal Characters with `\text` and `\mathrm`