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 (\$
).
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 equationsspan.latex {...}
for inline equations div.latex {...}
for block equations