Table of Contents

Using LaTeX in Canvas

Brock Schmutzler Updated by Brock Schmutzler

Introduction

This article is meant to be a quick introduction to using LaTeX in Canvas. For a more comprehensive guide, please see the LaTeX Guide linked at the end of this article.

LaTeX is a collection of macros built on top of the TeX typesetting language and widely used for scientific publication. TeX is pronounced "tek" and LaTeX is pronounced "LAH-tek" or "LAY-tek" (derived from the Greek "techne" meaning art or craft). TeX was created by Donald Knuth in the 1970s and LaTeX was conceived by Leslie Lamport in the 1980s. Many people have contributed to the LaTeX Project since the introduction of LaTeX. The current stable version of LaTeX is known as LaTeX2e, and the next version of LaTeX (i.e., LaTeX3) has been in development for over a decade.

At its core, LaTeX is a markup language that was developed for typesetting mathematics. Thanks to a JavaScript library called MathJax, LaTeX code can be used almost anywhere in Canvas, as long as you are wrapping your LaTeX code with the delimiters \(...\) instead of $...$. LaTeX code can also be used directly in the Canvas Equation Editor.

If you ever find yourself in a LaTeX-aware environment (e.g., Canvas, H5P, drawio) and the delimiters $...$ (or $$...$$) are not working as expected, try using the delimiters \(...\) (or \[...\]) instead — they are often used in environments where dollar signs already mean something else.

LaTeX and MathJax

In eCornell STEM courses, Canvas pages often contain a lot of LaTeX code for typesetting the mathematical notation used in the course. The LaTeX code in a Canvas page is rendered by a display engine called MathJax, which renders LaTeX code and adds an extra layer of accessibility for STEM content delivered in Canvas. You can view the MathJax menu by right-clicking a math image (that has been created using the Equation Editor) in Canvas. From this menu, you have a number of options like viewing the MathML Code, TeX Commands, or turning on Assistive MathML to make the math accessible to screen readers, as shown in the next two images.

MathJax menu option Show Math As > MathML Code
MathJax menu option Accessibility > Assistive MathML
MathJax settings for both eCornell and Cornell instances of Canvas are configured at the server level, so there is no need for additional configuration at the course or page level. That means MathJax is often working in the background of most environments within the Canvas ecosystem at Cornell and eCornell.

Since MathJax in working in the background of the Rich Content Editor (RCE), entering \(...\) will render the LaTeX code in ... when you save changes. Similarly, some (but not all) LaTeX math mode environments will be recognized as well, including the double-dollar signs $$...$$ and the alignment environment \begin{align}...\end{align}. Even though LaTeX code can be rendered this way, use the native Canvas Equation Editor to insert math images via the Rich Content Editor.

For example, consider the snippets of LaTeX code in the image below:

When you save changes, the LaTeX code is rendered by MathJax like this:

On the WYSIWYG (What You See Is What You Get) and HTML (HyperText Markup Language) side of the RCE (Rich Content Editor), the LaTeX code simply appears as plain text. It is only when the Canvas page is rendered as a webpage that MathJax will display LaTeX code written directly into the RCE.

Even though you can write LaTeX code directly into the RCE and MathJax will render it when you save changes, please use the Canvas Equation Editor. This process is described in the next section.

Canvas Equation Editor

To insert math in a Canvas page, use the native Canvas Equation Editor by selecting the menu option Insert > Equation in the Rich Content Editor. If you use the Canvas Equation Editor to insert math, you will be able to see a preview of the rendered output in the Rich Content Editor before you save changes.

The native Canvas Equation Editor can be opened by selecting the RCE menu option Insert > Equation:

If you highlight \(y=x^2+1\) first and then select Insert > Equation, the Canvas Equation Editor will open with the LaTeX code y=x^2+1 pulled into the editor window like you see in the second image below:

After clicking the Done button, your math will be inserted into the Rich Content Editor:

In the Canvas Rich Content Editor, you can highlight \(...\) and select Insert > Equation to bring the LaTeX code in ... into the Canvas Equation Editor. This can be useful if you are writing LaTeX code directly in the Rich Content Editor or pasting it into the Rich Content Editor from another plain text source file. This little trick will work if the LaTeX code in ... is wrapped in the delimiters \(...\) or $$...$$, but will not work with other math mode delimiters like $...$ and \[...\].

If you open Canvas Equation Editor by selecting Insert > Equation (without highlighting \(...\) first), you will be taken to a screen where the Directly Edit LaTeX button is de-selected like this:

By clicking the Directly Edit LaTeX button, you will be able to use the window as a LaTeX editor:

You can preview the output of your LaTeX code in a window underneath the Directly Edit LaTeX button:

Click the Done button to save your changes in the Rich Content Editor, which will now render the image as you see it in the preview window of the Canvas Equation Editor.

Display Style versus Text Style

"Text style" is the default style for the Canvas Equation Editor.

This means that any LaTeX code in the Canvas Equation Editor will be rendered as if the math were intended to be inline with the surrounding text:

If you want summations or integrals (or any other LaTeX symbol with display style features) to be displayed in full size, then you should add the command \displaystyle to the LaTeX in the Canvas Equation Editor:

When you typeset math on its own separate line (instead of having the math appear inline with the surrounding text), use the \displaystyle command in the Canvas Equation Editor to ensure that the mathematical symbols will be displayed in full size.

Display Style
Sometimes you may prefer to use the \displaystyle command for inline math. For example, \displaystyle\frac{}{} would produce a display style fraction that may come in handy if the numerator or denominator is hard to read in the smaller text style default that \frac{}{} has in the Canvas Equation Editor.

In a text style LaTeX math mode environment like \(...\), the fraction command \frac{}{} would normally be rendered in text style, but can be coerced to render in full size by prefacing the command with \displaystyle, i.e., \displaystyle\frac{}{} or the shortcut \dfrac{}{} (display style fraction) command. The differences between these styles is compared in next three examples.

In the first example, you see the \frac{}{} command rendered in text style math mode:

In the second example, you see the effect of adding \displaystyle before \frac{}{}:

In the third example, you can see that \dfrac{}{} is equivalent to \displaystyle\frac{}{}:

In multi-line math mode environments (e.g., \begin{align}...\end{align}), there is no need for the command \displaystyle or \dfrac{}{} because display style is the default:

You can also use \displaystyle in math mode environments like \begin{cases}...\end{cases} or \begin{array}...\end{array} when you want to enlarge the math within a "cell" of the environment:

If you want to adjust the spacing between lines in a multi-line math environment, you can append the code [#pt] to the new line command \\. For example, \\[5pt] puts five pt units of space between the current line and the next line, as in the three images above. Instead of pt (points), which is a small unit of space, you can use cm (centimeters) or in (inches).
Text Style
Sometimes you may want text style math in display style math modes, in which case use \textstyle.

For example, \textstyle \frac{}{} or \tfrac{}{} could be used for text style fractions:

Centering Display Style Math

In addition to using \displaystyle in the Canvas Equation Editor, you can present the output as a centered math image on its own separate line. This is done by first putting your cursor on a blank line of the RCE and then selecting Insert > Equation to build your math. On the HTML side of the RCE, this has the effect of creating an HTML paragraph and generating a math image that is contained inside the paragraph.

To ensure that a math image is centered in its own paragraph, add the style attribute style="text-align:center" to the HTML paragraph tag <p> on the HTML side of the RCE.

Here is a minimal example of what centered math would look like on the HTML side of the RCE:

<p style="text-align:center"> 
    <img src="<Canvas Equation Editor math image link>" /> 
</p>
If the math image is within a collapsible accordion environment, you may also need to add width:100% as a style attribute of the paragraph tag to ensure that the math image is centered within the accordion.

Here is another minimal example for centering a math image inside an accordion environment (or any other environment in a flexible container that interferes with the "visual center" of the Canvas page):

<p style="text-align:center; width:100%"> 
    <img src="<Canvas Equation Editor math image link>" /> 
</p>

LaTeX Guide

When you're getting started with LaTeX, you may find it helpful to have a few more tips, tricks, and templates at your disposal. For that, please see this LaTeX Guide. You may want to occasionally check the link for any updates.

You can right-click a math image in the LaTeX Guide to copy the LaTeX or code for that image. You can also use the Chrome extension called Screen Reader to hear the math read aloud.

How did we do?

Create a New Course Shell

Search in Canvas Using API Utilities - Tutorial

Contact