22

# 22Equations and MathJax

## Equations, example usage

There are five typical arrangements of equations within the web template, the first four are all variations of a theme and the last one is very simple:

• Full equation

• Full equation with background shading

• Basic equation

• Basic equation with background shading

• An inline equation

The only difference between these is in the HTML, I show the HTML and an example for each type along with some notes in the following sections:

### Full equation

This is the one we’ve already looked at:

full equation html
<div class="formulae" id="js--e99-01">
<div class="formulae-container">
<div class="formulae-equ">
sum_(i=1)^n i^3=((n(n+1))/2)^2
</div>
<div class="formulae-num">(99.1)
</div>
<div class="formulae-caption">Equation caption</div>
</div>

Code 22.5   Full equation HTML

It looks like this:

sum_(i=1)^n i^3=((n(n+1))/2)^2
(99.1)
Equation caption

### 22.4.2

This is the same as the above but with background shading.

<div class="formulae" id="js--e99-01">
<div class="formulae-container formulae-bkgd">
<div class="formulae-equ">
f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz
</div>
<div class="formulae-num">(99.1)
</div>
<div class="formulae-caption">Equation caption</div>
</div>

Code 22.6   Full equation with shading HTML

It looks like this:

f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz
(99.1)
Equation caption

The class formulae-bkgd has been added to the formulae-header and formulae-container div elements.

### Basic equation

The basic equation is the same as the full equation, but does not have a heading line or a caption:

basic equation html
<div class="formulae" id="js--e99-01">
<div class="formulae-container">
<div class="formulae-equ">
x=(-b +- sqrt(b^2 – 4ac))/(2a)
</div>
<div class="formulae-num">(99.1) </div>
</div>
<div class="formulae-caption"> </div>
</div>

Code 22.7   Basic equation HTML

It looks like this:

x=(-b +- sqrt(b^2 – 4ac))/(2a)
(99.1)

The formulae-caption div still exists (it gives spacing after the equation), but if no caption is required, just leave the div empty.

### 22.4.4

This is the same as the previous, but with shading:

<div class="formulae" id="js--e99-01">
<div class="formulae-container formulae-bkgd ">
<div class="formulae-equ">
x=(-b +- sqrt(b^2 – 4ac))/(2a)
</div>
<div class="formulae-num">(99.1) </div>
</div>
<div class="formulae-caption"> </div>
</div>

Code 22.8   Basic equation with shading HTML

It looks like this:

x=(-b +- sqrt(b^2 – 4ac))/(2a)
(99.1)

The formulae-caption div still exists (it gives spacing after the equation), but if no caption is required, just leave the div empty.

TThe class formulae-bkgd has been added to the formulae-container div element.

### Inline equations

Equations can be placed directly in a line of text.

An inline equation does not need any formatting, there is no class associated with it, just add a <span>...</span> element and put the equation in it (underlined in red below):

inline equation html
<p class="hyp">Inline equations <span>f(a) = 1/(2pii) oint f(z)/(z-a)dz</span> are possibe too.
Code 22.9   Inline equation HTML

It looks like this:

Inline equations f(a) = 1/(2pii) oint f(z)/(z-a)dz are possibe too.

### Formulae equation numbers

Equation numbers are entirely optional, the formulae-num div however is not; if equation numbers are not required, leave the div empty:

        <div class="formulae-num"></div> 