Or login with:
Equations in HTML (SVG + GIF)
The CodeCogs LaTeX Engine is designed specifically to create equations for placement on intranets and the Internet.
The simplest way to get started is by using the Equation Editor, which produces HTML-friendly code in the yellow box at the bottom of the editor. You can then copy this code into any HTML page and an equation will appear.
For more advanced use, you can use one or more of the methods demonstrated on this page.
<IMG> Tag (Editor type="html")
At the simplest and most fundamental level, equations can be created using a single HTML image tag. For example, the following HTML code:
<img src="http://latex.codecogs.com/gif.latex?1+sin(x)" border="0"/>
will create:
This image tag is used extensively by those who need to show equations in third-party forums, blogs, or on their websites. It allows equations to be created without installing any additional code. This GIF format is the most common, as it works across all known browsers. Unfortunately, GIFs are not adequate for printing. The GIF is a raster image, with only 100 dpi; whereas, for printing, you need about 300 dpi.
An alternative is to use SVG, which is a new vector-based graphics format. This is rapidly becoming standard across all browsers. Currently, only Internet Explorer doesn't accept SVG. However, various flash plugins rectify this. Therefore, you can use:
<img src="http://latex.codecogs.com/svg.latex?1+sin(x)" border="0"/>
will create:
This should look identical to the earlier image; however, if you print this page or zoom in, you will notice a significant difference.
Automatic Equations for Whole Pages
Downloadplugin for HTMLPublished: 13/07/23 Size:4 KB
JavaScript Options
- LatexIT.add('p',true);
CSS Style
- .latex { ... }
If you have a lot of equations to generate, writing out the above code for each is a little laborious. Furthermore, you need two different html code depending up the browser that your visitors are using - IE and anything else! To overcome this, we have developed the http://latex.codecogs.com/latexit.js script, which automates the conversion of equations found on your page.
All you need to do is load the script http://latex.codecogs.com/latexit.js in the header of your page:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
We have developed two methods for doing this:
Add attribute lang="latex" to tags
Adding the attribute lang="latex" to any tag will automatically treat the content of that tag as a LaTeX equation and covert it into a graphical form. For example:
<div lang="latex">
\frac{1+sin(x)}{y}
</div>
will create:
Thus, a complete HTML would be:
<html> <head> <script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script> </head> <body> Here are my formulas <div lang="latex">1+sin(x)^2+3</div> <ul> <li lang="latex">x^2+y^2+z^2</li> <li>a^2+b^2</li> </ul> </body> </html>will create:
- x^2+y^2+z^2
- a^2+b^2
The third formula is not converted because lang="latex" was not entered against the second <li> tag.
Using the <span lang="latex">...</span>, you can produce equations in line with the surrounding text. For example:
<p>This equation <span lang="latex">\frac{1+sin(x)}{x^3}</span>
appears on the same line at the text.</p>
creates:
This equation \frac{1+sin(x)}{x^3} appears on the same line at the text.
LaTeX Tags \[...\] and $...$ (Editor type="latex")
If you are writing many equations, or if you prefer the usual LaTeX techniques for entering equations within text, then you may choose a variant on the above method that converts \\[...\\] and \$...\$ into block and inline equations, respectively. For example:
When you add $x^2$ to $y^2$ you get \[x^2+y^2\]
will create:
When you add $x^2$ to $y^2$ you get \[x^2+y^2\]
Given than \$ is often used within javascript (particularly in jQuery) that might otherwise exist on a page, we recommend constraining this general LaTeX conversion to certain tags. Typically these might be <p>...</p> and <li>...</li>tags. Second if you do find yourself wanting to write dollar (\$), then you must add a backslash (\) before the dollar, as in (\\$).
This approach is not enabled by default, so you have to call LatexIT.add('p',true); to identify the tags that you want to be treated in this way. The following example illustrate a complete HTML page with a variety of equations written in native LaTeX form:
<html> <head> <script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script> <script type="text/javascript"> LatexIT.add('p',true); </script> </head>which creates:
<body>
<p>Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]</p> <p>The british pound is worth 1.5 US\$ or $1.1 \euro$</p>
</body>
</html>
Dividing $x^2+1$ by $y^2$ gives \[\frac{x^2+1}{y^2}\]
The british pound is worth 1.5 US\$ or $1.1 \euro$.
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
In the following example, we place our equation within a <pre> tag, and set the border to red:
<html> <head> <script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script> <style> pre .latex { border:3px solid red ; } </style> </head> <body> <pre lang="latex>E=mc^2</pre> </body> </html>
E=mc^2