How to add Math using MathML and LaTeX

Brightspace incorporates different tools to add formulas and equations into content. This is made possible via the HTML-editor tool. The editor supports the input of the equations graphical editor as you may have already discovered in the article How to insert a Graphical Equation to the Editor. However, there are other tools supported by Brightspace to easily insert equations and formulas, such as MathML and LaTeX.

This article will focus on the following topics:

Navigate to the editor

To enter equations in MathML or LaTeX code, first, navigate to the editor box where you would like to add them. Then, follow the next steps:

1. Click on the three dots icon to view all the options if the formula editing icon does not appear on the screen

2. Click on the arrow next to the Graphical equation icon. A drop-down menu will open

3. Click on MathML equation or LaTeX equation. A pop-up window will open to insert the equations

To create the code in MathML or LaTeX language, you can use a visual math editor to assist you in the process. Here it is a free online editor that you can use:  http://visualmatheditor.equatheque.net/. Go to Using a visual math editor to learn more.

editor screen to add equations. click the sigma symbol
3.1. Adding equations in MathML code

MathML is a standard adopted by the World Wide Web Consortium (W3C). It uses XML to describe mathematical notation by capturing both its structure and content. This enables MathML to support the visual display and assistive technology access.

Its appearance is similar in structure to HTML. Unlike HTML, MathML is not designed to be hand-written. It is recommended that you compose equations in a visual editor and paste its MathML output into the Brightspace Equation Editor.

In the pop-up window Copy MathML code and

4. Enter the MathML code into the text box. You will see a preview of the formula after you click on Generate a preview. Check Using a visual math editor to know how to generate this code.

5. Click on Insert

Insert equation window for MathML

Now the equations you entered will appear in the editor text box!

3.2. Adding equations in LaTeX code

LaTeX is a typesetting system based on TeX. Although there is a bit of a learning curve, it is compact and efficient once users are familiar with its commands. Advanced users usually find LaTeX as a nice and fast way to input both text and equations.

There are two possible modes for LaTeX entry: text mode and Math mode. MathJax supports math mode only. If you add LaTeX using the Equation Editor, allow for the following differences in Math mode:

  • Most spaces and line breaks are not recognized and have to be specified with special commands such as \quad.
  • Empty lines are ignored, only one paragraph per formula.
  • Each letter is considered to be the name of a variable and will be typeset as such. If you want normal text within a formula (normal upright font and normal spacing) then you have to enter the text using dedicated commands

In the pop-up window Copy LaTeX code and

4. Enter the LaTeX code into the text box . You will automatically see a preview of the equation. Check Using a visual math editor to know how to generate this code.

5. Click on Insert

Insert equation window for LaTeX

Now the equations you entered will appear in the editor text box!

Using a visual math editor

As mentioned in the previous sections, it may be handy to use a visual math editor in order to generate a validated code that could be entered in Brightspace as MathML or LaTeX code. In this section we will show how the tool Visual Math Editor works. This is an online tool, but any other visual math editor compatible with LaTeX and MathML languages are also valid.

1. Go to the website http://visualmatheditor.equatheque.net/

2. Click on Get started now. A pop-up window will open with the editor view

Visual Math Editor homepage

3. In the pop-up window, use the formula options at the left and right sides of the screen to add the symbols or operations you want to include in the code. The code will automatically be added in the central screen area. A preview of the formula will appear below

visual math editor screen

Once your equation is ready, copy the corresponding code format you want to use by following one of these two options:

3.1. Copy MathML code

4. Hover your mouse over View on the top toolbar

5. Click on MathML translation. A new window will open in the bottom right side under the title MathMML. This window contains the MathML code

6. Copy all the MathML code and paste it in the corresponding Brightspace page (step 4 of Adding equations in MathML code).

visual math editor screen: MathML code translated
3.2. Copy LaTeX code

4. Click on the option Edit in Latex. This will set the entered code as LaTeX language format.

5. Copy all the LaTeX code of the central area and paste it in the corresponding Brightspace page (step 4 of Adding equations in LaTeX code).

visual math editor screen: LaTeX view


You now know the basics about using this visual math editor with MathML and LaTeX coding languages!

Want to know more about using the Editor tool?

Please, visit: