LaTeX Equation Rendering

Overview

To request an equation create a URL in the following format:

https://latex.codecogs.com / type . format ? LaTeX

where

type is the output graphical format:

format defines how the rendered image is received:

LaTeX contains the LaTeX markup that defines the equation. Additional options can also be provided as part of the equation definition, which include:

Present colors include:

Image

At the simplest and most fundamental level, equations are created using a single HTML image tag, e.g:

<img src="https://latex.codecogs.com/png.image?1+sin^2(x)" />
<img src="https://latex.codecogs.com/svg.image?1+cos^2(x)" />

Output:

Image like this are used extensively across the internet and mobile platforms, all without having to install anything.

JSON

To retrieve the image in a JSON format with base64 encoding, use the one of the above image formats with .json encoding, e.g

	https://latex.codecogs.com/png.json?1+sin^2(x)
	https://latex.codecogs.com/svg.json?1+cos^2(x)
	https://latex.codecogs.com/gif.json?1+cos^2(x)

Example Output:

{ 
"latex": { 
	"type":"png", 
	"equation":"1+sin^2(x)", 
	"site":"localhost:8000", 
	"file":"2549636a77dcfb9f09ea7ea110f10a1a_2ff.png", 
	"url":"https://latex.codecogs.com/eq/25/49/2549636a77dcfb9f09ea7ea110f10a1a_2ff.png", 
	"base64":"iVBORw0KGgoAAAANSUhEUgAAAFYAAAAVBAMAAAAutAQGAAAAMFBMVEX/
	//8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3a
	B7AAAAD3RSTlMARM0yInYQiatmmVTd77sbBE1NAAAACXBIWXMAAA7EAAAOxAGVKw4b
	AAABgElEQVQoFYWRP0jDQBTGv7SXNmdsG11EuhQXB5fg4qSNglREMG66ZVLEDsFNXQ
	ou2YzgoNDBQewaVIQ41aVzRXDu5NzJTerd5cTG9M8bvvfe93685O6AERGejhjGR8TW
	3LgzvEuXaAfI2IJQh3PRJMv2alGZuWV52oyaPlWasqk6wI6sQ2C9LFlm/wYxZHXOck
	nWKZYLkr2UXl9STQu6L41sMJKdgo28JVmllmDpzVX6Bfre4bVJej0XOYYW72bvgXaC
	DXFylDNXl329IxZOAulgxX8Fugn22HSMbQR1qOybLNYAFWWH/fWHZCc8b87zXDbb+g
	7AnrYBzRbsItddLq3EXlS6eAfeULA4gCqXBS7t/2wqQFtvGqSLB4UD/GwK+WIXIlhD
	eIjuV4NiZ12fltCgwk85qNMWtUA6OLiYN4UZsUoxRPrMUX0sPQtbDVB5mnkEqB/t5D
	rg3bhNakx45B2RhOz/lbHqU3YbMXdwsylt9nJjQwkEQqNTjcEtMSfAD6j8THVOt4hN
	AAAAAElFTkSuQmCC"
	} 
}

The JSON tags are:

The following example show how you might use jQuery to fetch an SVG image in base64 format and create an image icon:

$.getJSON('https://latex.codecogs.com/svg.json?1+cos^2(x)', function(icon) {
	var imgElem   = document.createElement('img');
	imgElem.src   = `data:image/svg+xml;base64,${icon.base64}`;
	imgElem.alt   = icon.equation;
	imgElem.title = icon.equation;

	$("body").append(imgElem);    // Appends the new image to the page
});