 |
Welcome... |  |
Login |  |
 |
Example Screen Shot (Click to see Demo of Downloadable editor)
The CodeCogs Equation Editor is an online editor that facilitates the creation and formatting of LaTeX equations. Used in combination with our LaTeX rendering scripts, it creates HTML code to render an equation on any website and some email programs. The editor is open source and can be easily extended and adapted for any particular need. It is compatible with a range of WYSIWYG editors, supports multiple languages and works across all major internet browsers, including IE, FireFox, Safari and Opera.
There are really two distinct problems that we solve:
We are working hard to integrate the combine system into a range of WYSIWYG editors. A FCKEditor plugin will be released shortly.
Equations generated by the CodeCogs servers can be used for any purpose, anywhere, for free subject to our Usage Policy. Our Editor is also completely free to use on personal websites. For seemless integration of the Equation Editor with your site, try including our Javascript Program - functionally the editor will behave as though it has been installed locally.
For installation on a intranet you'll have to download the complete files and setup LaTeX. This is a more complex task, requiring root access to your server (if you don't know what 'root' is, then you shouldn't consider this option!). If you have an intranet we assume you must be a company (or a fanatical individual), so we change £180 for instructions and install files. Included is 3 months technical support and a copy of future upgrades. Contact us on CodeCogs Sales.
To produce your own customised editor for installation on a public internet site, then we ask for a donation of at least £10 for individual and £100 for commercial use (i.e. by corporations, consultants etc). You must also agree to retain the 'Powered by CodeCogs' logo and a hyperlink to our website. If this is you then make a donation below and contact us on CodeCogs Donations stating how you will use the editor.
In no circumstances can the editor be re-sold.
Please help support this service and donate whatever you can.
The increasing popularity of CodeCogs and in particular the Equation Editor requires increasingly more powerfull servers. In under 6 months we will need to double server capacity, so please help us give you the service you deserve and make a small donation.
Our remit is to support open and free websites. All money raised goes directly on raw costs of the web servers and infrastructure.
And if that's too much, please tell a friend and Dig us!
There is no limit on the number of equations you can render per day. However, we reserve the right to block any use that we feel is abusive. If you think you'll make more than 10,000 calls per day, then please let us know by mailing on: CodeCogs Services.
If you plan to provide many equations, then you should install the complete LaTeX rendering service on your servers. Available upon request following a donation.
The fastest way to start using the latex editor within your own website is to simply load the http://latex.codecogs.com/editor.js script, as in:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/editor.js"></script>
</head>
<body>
<p><a href="javascript:OpenLatexEditor('testbox','html','')">Launch CodeCogs Equation Editor</a></p>
<textarea id="testbox" rows="3" cols="40"></textarea>
</body>
</html>
The following examples, use the above approach with varying values of type (more details below):
Launch CodeCogs Equation Editor with type=latex (default)Launch CodeCogs Equation Editor with type=htmlLaunch CodeCogs Equation Editor with type=phpBB (for php Bulletin Board)Launch CodeCogs Equation Editor with type=tw (for TiddlyWiki)Launch CodeCogs Equation Editor with type=preAs shown in the example, to launch the editor you use the javascript command OpenLatexEditor(target, type, language,inline, latex), where
If no language is specified the system will try to guess the users language based on browser settings.
The type can be any of the follow (see also HTML Equation Rendering below):
| type | Example Output |
|---|---|
| latex | $1+sin(x)$ or \[1+sin(x)\] |
| doxygen | \f$1+sin(x)\f$ or \f[1+sin(x)\f] |
| phpBB | [tex]1+sin(x)[/tex] |
| tw | [img[http://www.codecogs.com/gif.latex?1+sin(x)]] |
| html | <img src="http://www.codecogs.com/gif.latex?1+sin(x)" /> |
| pre | <pre xml:lang="latex">1+sin(x)</pre> |
The supported language's are currently:
| language | |
|---|---|
| en-us | English USA |
| en-en | English British |
| fr-fr | French |
| gr-gr | German |
| it-it | Italian |
[Please help us write language files for Spanish, Dutch, Chinese (both languages), Japanese, etc.]
The following examples are started used the command shown
OpenLatexEditor('examplebox','latex','fr-fr',true,'1+sin(x)');OpenLatexEditor('examplebox','html','en-us');OpenLatexEditor('examplebox','html','',false,'\\frac{1}{x}');OpenLatexEditor('examplebox','tw','',false,'\\frac{1+sin(x^2)}{x^2}');OpenLatexEditor('examplebox','latex','it-it',false,'e=mc^2');The following sites have implemented this system (N.B. CodeCogs is not responsible for any content on these sites):
Tiddly Wiki Implementation at http://twmath.tiddlyspot.com/(Please let us know about further examples to be put here)
Download v2.5:
Download Latest Version:
Available after a donation!
If you want to customise the editor, then you'll need to install the key files on your server, which must also be running PHP.
Aside from cosmetic changes, the only other modification you may wish to consider is the default language file. The system will try to use the language specified by the users browser, if this can not be found it'll revert to this default. For a list of available language files look in the 'lang/' directory.
In 'editor.php', modify line 3:
All Modules
define('DEFAULT_LANGUAGE','en-us');
As all equations will be rendered using the CodeCogs servers, then please show support by adding the following small banner to your website acknowledgements:
This logo is created using this code:
Once you've installed the editor, you'll find it can be launched in a variety of different ways:
<a href="http://{your website}/eqneditor/editor.php" target="_blank">
Launch CodeCogs Equation Editor</a>
which creates: Launch CodeCogs Equation Editor
<a href="http://{your website}/eqneditor/editor.php?target=testbox" target="_blank">
Launch CodeCogs Equation Editor</a>
<textarea id="testbox" rows="3" cols="40">
</textarea>
which creates:
<script type="text/javascript">
var popupwindows = new Array();
function popupnr( url, windowname, refocus, width, height )
{
if(typeof(popupwindows[windowname])!='undefined')
newwindow = popupwindows[windowname];
else newwindow=null;
if (newwindow==null || newwindow.closed || !newwindow.location)
{
newwindow=window.open(url,windowname,'width='+width+',height='+height+',status=1,scrollbars=no,resizable=1');
if (!newwindow.opener) newwindow.opener = self;
popupwindows[windowname]=newwindow;
}
if (window.focus) { newwindow.focus() }
return false;
}
</script>
Now, when you need to launch the equation editor use:
<a href="http://{your website}/eqneditor/editor.php"
onclick="return popupnr(this, 'equation', 1, 700, 450 )">
Launch CodeCogs Equation Editor</a>
<a href="http://{your website}/eqneditor.php?target=testbox2&html"
onclick="return popupnr(this, 'equation', 1, 700, 450 )">
Launch CodeCogs Equation Editor</a>
<textarea id="testbox2" rows="3" cols="40">
</textarea>
which creates:
For equations on the web, the Equation Editor is ultimately used to produce HTML code that loads an image containing your equation. To request this image, there are a variety of different approaches that can be taken which will depend largely on the capabilities of your website (or even what you're allowed to do) and personal preference and experience. You may find you use all of the following method or just one.
At the simplest and most fundamental level, LaTeX equations can be graphically rendered using a special HTML image tag. For example, the following HTML code:
<img src="http://www.codecogs.com/gif.latex?1+sin(x)" border="0"/>
will create:This image tag is used extensively by users who need to show equations in 3rd party forum or blog or on their websites. It allowed equations to be created without installing any additional code. If you use the CodeCogs Equation Editor to help your write your LaTeX equation, then you'll find the coresponding HTML code in the yellow box at the bottom of the equation editor.
As an alternative, Waipot Ngamsaad has developed a clever piece of javascript that parses through your HTML page and converts particular <pre> or <code> tags into our the image tags, shown previously. The main advantage of this technique is you can write cleaner, less confussing, html. For example:
<pre lang="latex">
\frac{1+sin(x)}{x}
</pre>
will create:
\frac{1+sin(x)}{x}
To enable this conversion, load the javascript code http://latex.codecog.com/render.js just before the </body> section of your html page, for example:
<html>
<body>
Here is my first formula
<pre lang="latex">1+sin(x)^2</pre> <script type="text/javascript" src="http://latex.codecogs.com/render.js"></script>
</body>
</html>
Using the <code lang="latex">...</code> instead of <pre lang="latex">...</pre> when you want your equation to appear inline, within the text, as in \frac{1+sin(x)}{x}
If you writing a lot of equations, or if like the usual LaTeX techniques for entering equations within text then you may prefer our http://latex.codecog.com/latex.js script. This script will convert \\[...\\] 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\]
There are a few necssary pre-conditions to this script. First it will only convert equations within a <p>...</p> tags - this is to help prevent this script modifying other javascript on the page. Second if you want to write dollar (\$), then you must add a backslash (\\) before the dollar, as in (\\$).
To finely control the layout of the equations (background, border, position etc) then set the styles img.latex and div.latex for inline and block equations, respectively.
The following example illustrate a complete HTML page with the variety of equations written.
<html>
<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\$</p>
<script type="text/javascript" src="http://latex.codecogs.com/latex.js"></script>
</body>
</html>
The CodeCogs equation editor is written by Will Bateman with advice and assistance from Steve Mayer. It also contains many neat Javascript enhancements by Thornahawk, which make the toolbar buttons more interactive.
If you would like a mention here then please let us know.
You must login to leave a messge
