CodeCogs - An iteractive open source Numerical library Welcome... Login
CodeCogs
shopping cart
OSXWindowsLinux
Search CodeCogs
All Pages

Valid RSS

LaTeX Equation Editor v2.96 Installation


Example Screen Shot (Click to see Demo of Downloadable editor)

de-de en-en fr-fr it-it en-us ro-ro

Recent News
29 December: We now support the the polynorm package that allows synthetic division to help write tutorials.

Introduction

FireFoxIESafariChromeOpera

Supported Browsers

The CodeCogs Equation Editor is an online editor that facilitates the creation and formatting of LaTeX equations. Used in combination with our LaTeX Engine it creates HTML code to render an equation on any website and many email systems. The editor is open source and can be easily extended and adapted to 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 Chrome.

There are really two distinct problems that we solve:

  1. First is the creation of LaTeX formulas. Few of us remember all the commands and the CodeCogs editor is there to facilitate this.
  2. Second is how to render code into graphical (nice looking) equations. We use a variety of techniques that can be use in isolation or even collectively. If you're familiar with LaTeX then very often you can create equations without ever using the editor.

We are working hard to integrate the combine system into a range of WYSIWYG editors. A FCKEditor plugin will be released shortly.

Buying the Editor
For more advanced use or extended usage rights, please purchase a licence to the Equation Editor and LaTeX Engine:
Buy Licence...

Usage Policy

Our remit is to support open and free websites. All money raised goes directly on raw costs of the web servers and infrastructure.

There is no limit on the number of equations you can render per day. However, we ask anyone routinely making more than 5,000 equation requests a day to contribute towards this service or buy a standalone licence. We also reserve the right to block any use that we feel is abusive.

Please let us know if you think you'll make more than 10,000 calls in any one day.

We can be contacted by mailing via: CodeCogs Services.

If you are using our services for free, please tell others about this service:

CodeCogs - An Open Source Scientific Library <a href="http://www.codecogs.com" target="_blank"><img src="http://www.codecogs.com/images/poweredbycc.gif" border="0" title="CodeCogs - An Open Source Scientific Library" alt="CodeCogs - An Open Source Scientific Library"></a>
CodeCogs - An Open Source Scientific Library <a href="http://www.codecogs.com" target="_blank"><img src="http://www.codecogs.com/images/logo.gif" border="0" title="CodeCogs - An Open Source Scientific Library" alt="CodeCogs - An Open Source Scientific Library"></a>

And if that's too much, please tell a friend or Dig us!

Quick Installation (using JavaScript only)

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=html
->Launch 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=pre

As 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-usEnglish USA
en-enEnglish British
fr-frFrench
gr-grGerman
it-itItalian

[Please help us write language files for Spanish, Dutch, Chinese (both languages), Japanese, etc.]

Further Example:

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');

Live 3rd Parts Examples :

The following site has implemented this system (N.B. CodeCogs is not responsible for any content on these site):

->Tiddly Wiki Implementation at http://twmath.tiddlyspot.com/

LaTeX Engine - Embedding Equations in HTML

To create equations on the web, the CodeCogs LaTeX Engine converts a request specified in HTML into an graphical equation. Our Equation Editor can produce a HTML is a variety of different forms to suit your use (see the yellow box at the bottom of our editor), or alternatively you can write this HTML yourself (see below).

To request this equation 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 one or more following methods.

<IMG> Tag (Editor type="html")

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.

<PRE> or <CODE> Tags (Editor type="pre")

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>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/render.js"></script>
</head>
<body>
Here is my first formula
<pre lang="latex">1+sin(x)^2</pre>
</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. For example this equation \frac{1+sin(x)}{x} appears within the line of text.

LaTeX Tags \[...\] and $...$ (Editor type="latex")

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 creates:

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 the <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 CSS 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>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latex.js"></script>
</head>
<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 \euros$</p>
</body>
</html>
which creates:

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 \euros$.

Credits

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.

Version History

Page Comments

Format Excel Equations

  You must login to leave a messge