:: Table of Contents

LaTeX-IT

If you have a lot of equations to generate on a single pages, then the latexit.js script is a convenient way embed mathematics within your page without having to create lots of image tag by hand.

Add to <head> :

<script src="http://latex.codecogs.com/latexit.js"></script>

Add the attribute lang="latex" to any tag where you want automated conversion of the content into a LaTeX equation. For example, adding this to a <div> tag:

<div lang="latex">
	\frac{1+sin(x)}{y}
</div>

creates:

While use with a <span> element:

<p>This equation <span lang="latex">\frac{1+sin(x)}{x^3}</span> appears on the same line as the text.</p>

creates:

When writing many equations, or if you prefer the usual LaTeX notation within you text, then a variant on the above method will convert LaTeX notation within [...] and $...$ into block or inline equations, respectively.

Given than $ is often used within javascript (particularly in jQuery) that might otherwise exist on a page, then we need a way to constain the LaTeX conversion to only those tags that should contain equations.

This is achieved by adding the function call LatexIT.add(...) to tell LaTeX-IT what tags to check for mathematics. For example:

Add to <head> :

<script src="http://latex.codecogs.com/latexit.js"></script>
<script>LatexIT.add('p',true);</script>

and in the <body> :

<p>Dividing $x^2+1$ by $y^2$ gives\[\frac{x^2+1}{y^2}\]</p>
<p>The British pound was worth 1.5 US\$ or $1.1 \euro$</p>

Which creates:

If you need to write dollar ($) on it own, then add a backslash (\) before the dollar, as in (\$).

Equation CSS Formatting

To control the layout of the equations (background, border, position, etc.), then you can modify the .latex CSS style.

If you adopt a convention of using <div lang="latex"> for block equations that appear on their own lines, versus say <span lang="latex"> for equations you want to appear inline, then you can control each independently within your CSS, i.e,:

  • .latex {...} for all equations
  • span.latex {...} for inline equations
  • div.latex {...} for block equations
Copied to clipboard