You are here: Home / How to ... / Add equations to your texts

Add equations to your texts

You can add equations to the texts you write here that are as complex as you might want to make them, thanks to the power of LaTeX and MathJax.

Mathematicians and other researchers on this planet by now overwhelmingly use a common standard for writing documents with many mathematical equations in computers: the LaTeX system, which is available for many operating systems and is a full blown publishing solution of considerable complexity. As such it would be hard to integrate into this website in a usable way. 

However, the MathJax project has developed a JavaScript package that makes it easy to use LaTeX equations on websites. Mathjax comes with a substantial documentation, most of which you do not need to use it. 

This course website has MathJax installed to make it easy to add the power of LaTeX equations to your documents. It's well worth learning how to use it. Everything you need to get started is on this page below.

First steps

To add an equation you will need to indicate where it starts and where it ends. These special markers will indicate to MathJax running in your webbrowser that everything inside of these markers is a LaTeX equation. MathJax will then produce a beautiful picture of the equation, whenever someone looks at the page, while preserving your ability to edit the equation and to get to the LaTeX code (if you right-mouse click on the symbol). Here are the markers

Start equationEnd equationPurpose
$$ $$ equation displayed on separate line
\[ \] equation displayed on separate line
\( \) in-line equation ( like e.g. \( e^{\pi*i} + 1 = 0 \) )

Note that the default installation of MathJax does not use single $...$ in-line delimiters as LaTeX does. This is to allow you to use dollar signs in other contexts, without triggering unexpected behavior. This default can be changed, so you may want to adjust MathJax code you see elsewhere.

If you want to add a tag to the equations on your page so you can refer to them more easily, then add  \tag{x} inside of the equation environment. It will display the the tag "x", which you can then use as a reference in your text. Examples and more details about numbering are here, should you need them. If you regularly need automated numbers, please let the course organizer know (requires some special configuration setting).


To show you an important equation for simulating dynamical systems as an example, consider the so called 'random time change representation' of a dynamical system

$$    X(t) = X(0) + \sum_{k}   Y_k    \left (   \int_{0}^{t}  \lambda_k (X(s))ds   )   \right )   \zeta_k                  \tag{eq.1}     $$


  • the vector \( X(t) \) describes the amount of all parts of a system at time \(t \), 
  • the vector \( X(0) \) describes the initial amount of all parts at the start of the simulation (also called 'initial condition'),  
  • \( \lambda_k \) is a vector of all instantaneous rates at which the \( k \) actions in the system occur,
  • the vector \( X(s) \) describes the amount of all parts of a system at time \( t-ds \), which is the moment before the last action occurs that updates the system to the state \( X(t) \),
  • \( ds \) is the infinitesimally small timestep that is used to update the system by making only the next event happen.
  • \( \zeta_k \) is the so-called stoichiometry vector that updates the state of the system, whenever a single action occurs, such that \( X(t) = X(s) + \zeta_k \)
  • \( Y_k \) is a collection of  unit-rate poisson processes, one for each of the \( k \) actions. If absent, the system assumes infinitely many parts and describes a deterministic solution; if present, it breaks time down into individual events, where each event is characterized by the execution of exactly one of the \( k\) actions, thus making the system stochastic.
  • the sum \(   \sum  \) adds the contributions of all \( k \) actions that can occur in the system.
  • the integral \(  \int  \) integrates the intensity from the initial time (0) over all gradual (deterministic) or stepwise (stochastic) changes of the system up to the final time \( t \).

What you just saw above is not only an important key concept for simulating dynamical systems. You also saw, how equations are usually best integrated into any content you write:

  • your text leads up the equation, 
  • then gives the equation (even though it might contain new symbols) and 
  • then gives a list of definitions for all symbols used in the equation (unless they are immediately obvious from previous definitions).
When reading an equation you often need to reverse that: You first look the symbol definitions to decipher what each symbol means. Then you look at the equation to see what it says about how the symbols interact. If you have content with many equations, consider producing a table with all the symbols you use and their definitions. Your readers will thank you.

Help for constructing LaTeX equations

The simplest equations in LaTeX are straight forward. However to wield the full power of all its symbolism you need to know more. The following free manuals can help you get started:

If you want to interactively construct LaTeX equations online by clicking buttons like in an equation editor and seeing the result immediately, please check out these free online services:

Now it's your turn to enjoy the beauty of math and add (hopefully clearly explained) equations to your texts!


Tricks & Troubleshooting

If there are any tricks that you think are worth including here, please let the course organizer know.

  • If MathJax doesn't seem to work for some equations:
    Check the html code (using the HTML button in the online editor) and remove the " <span> </span> "constructs around the equation that may have been added by the editor. 
  • If you want to add code that should not be processed by MathJax:
    Check the html code (using the HTML button in the online editor) and add "<code>...</code>" tags around the bit that should not be processed. Alternatively you can also encapsulate your code in <span class="pre">...</span>.  More details here or here.