Using LaTeX in WordPress

Comparison of free, on-the-fly, web based LaTeX equation compilers compares some of the services mentioned in Online LaTeX which offer compilation via a URL.

A couple of the services are unable to process the plus sign correctly, probably because the symbol is changed at some stage. In those cases + needs to be replaced by %2B, thus

Sitmo 
<img src="http://www.sitmo.com/gg/latex/latex2png.2.php?z=100&eq=z_t = \displaystyle\sum^p_{j=1}\phi_jz_{t-j}%2B\sigma_\epsilon\xi_t" alt="" />
gives

MathTran
<img src="http://mathtran.open.ac.uk/cgi-bin/mathtran?D=1;tex=z_t = \displaystyle\sum^p_{j=1}\phi_jz_{t-j}%2B\sigma_\epsilon\xi_t" alt="" />
gives

Similar changes may have to be made for other symbols, though it would be better if the services themselves could do the necessary translation.

I have added a PDF of the post Online LaTeX. It can be downloaded here or in a link in the post or from the Downloads section on the right.

The number of links keeps growing and I’ll try to add new ones as they arise.

LatexRender has been adapted to many uses such as the hosted blogs at WordPress.com. One new version is LatexRender-ng. One of its features is that it can output images in Scalable Vector Graphics (SVG) format. This has the advantage of allowing the images to be scaled as well as being faster to load than PNGs or GIFs. Unfortunately this is not well supported by Internet Explorer.

John Forkosh (author of mathTeX) has brought to my attention a bug in the latest version of ImageMagick’s convert. This is used to produce the gif image and can result in poor output with very light fonts. If you get this you can get a better result with LatexRender if you convert to a png instead.

In class.latexrender.php look for the line
var $_image_format = "gif"; //change to png if you prefer
and change it to
var $_image_format = "png";

You could instead use an older version of ImageMagick (such as version 6.2.9) or bypass ImageMagick altogether with dvipng, which is the method that WordPress.com uses.

Discussion of this problem can be found here. Let’s hope the bug is resolved in the near future.

LaTeX2WP, written by Luca Trevisan, is a Python script that will convert a LaTeX file into a format suitable for pasting into a WordPress.com post.

WordPress.com uses its customised version of LatexRender to render the snippets of LaTeX, but LaTeX2WP will help prepare long texts. LaTeX2WP takes a TeX file and reformats it adding the required HTML codes and latex tags so that you can have, for example, numbered equations and dispayed equations. This is particularly useful for long mathematical notes containing lots of mathematics. It’s used by, amongst others, the Fields medallist Terence Tao for his blog at What’s new.

You can read more about LaTeX2WP and download it from LaTeX to WordPress

As mentioned before in mathTeX helper, mathTeX is a good way of generating high-quality LaTeX images for your site. mathTeX web service is a very useful way of using mathTeX without having to install LaTeX on a server and a couple of sites offer ways of using this service.

• Latex Math is a WordPress plugin enabling you to add LaTeX code to your WordPress blog;
• Webtop Mania has a Mathtex bookmarklet which gives you a prompt to add LaTeX code.

Many users have no root access to the server running their web site, which makes it difficult to install , unless their hosts can be persuaded to do so. However, if you have shell access to your account you may be able to install in your home directory. Instructions are at Installing LaTeX on Web Hosts (32 bit Linux) and Installing latex on HostMonster (64 bit Linux).

LaTeX Equation Editor is an innovative editor with a symbol table for those who are not sure of the LaTeX code as well as allowing the code to be typed directly. It uses Ajax so that the page does not need to be refreshed to see the rendered image.

This equation editor can be used in a number of ways:

1. Create the equation and then copy and paste the image into your website;
2. Fetch the code directly from CodeCogs site and use in your website like this
<img src="http://www.codecogs.com/eq.latex?\tiny \int_{-\infty }^{\infty }e^{-x^{2}}\;dx=\sqrt{\pi }" /> which gives

3. Incorporate the visual editor into your text box (for example in a forum such as phpBB) or the FCK Editor;
4. Install the complete system on your server.

Method 1 does not require any code, method 2 only requres a small amount of HTML and is particularly suitable for example for Blogger. Method 3 needs some PHP code on your site and method 4 requires LaTeX and other software to be installed on your server. Full instructions are provided at Installing the CodeCogs Equation Editor v2

Please note that if you use method 3 you should display the following banner on your page and if you use methods 2 or 3 then do please contact CodeCogs first at CodeCogs Services.
Do let CodeCogs know of any customisations or innovative uses that you make of their equation editor.

As mentioned in Online LaTeX mathTeX lets you incorporate high-quality LaTeX images in an web page using an image tag so
<img src="http://www.forkosh.dreamhost.com/mathtex.cgi?c=\sqrt{a^2+b^2}" />
becomes which may be placed slightly too high on the line.

This is very simple to do but remembering exactly what to type can be a problem, particularly in sites like Blogger. So I have written a tool which

• allows you to test LaTeX code first
• creates the image code (or URL with a link if you prefer) automatically for you
• adds title attributes so that hovering a mouse over the image shows the code
• ensures that the image’s vertical spacing is improved

This makes it simple to produce whose code is
<img src="http://www.forkosh.dreamhost.com/mathtex.cgi?c=\sqrt{a^2+b^2}" title="c=\sqrt{a^2+b^2}" alt="c=\sqrt{a^2+b^2}" style="vertical-align:-2pt;" />

Download mathTeX helper which runs on your own computer and uses JavaScript.

It is quite difficult to find web hosts who are willing to install LaTeX, so it’s good to read one person’s experience of trying to find a shared host offering LaTeX. (Shared) hosting with LaTeX – An overview gives 7 hosts who gave a positive response.

Update
Following on from Mike Renfro’s comment below recommending A2 Hosting I contacted them to ask about their LaTeX hosting and this is their reply:

“Yes, we either have or can install the LaTeX packages upon request on any particular server. It’s not a problem as long as it does not become a server load issue. We are currently using the CentOS 5 latex package tetex-latex-3.0-33.1.el5 but if anybody wishes to install their own copy of LaTeX locally on their account they can always get the appropriate binary and do that also if they need a different version.

We would certainly be happy to have you point folks in our direction. We will go ahead and add a knowledge base article on the subject as well.”

As mentioned in the previous post mimeTeX parses a LaTeX maths expression and immediately emits the corresponding gif image. All you need do is write <img src="http://www.forkosh.dreamhost.com/mimetex.cgi?c=\sqrt{a^2+b^2}" /> and you get the mathematical formula. It’s beautifully simple.

Following a suggestion by John Forkosh, the author of mimeTeX, I would like to do the same for LatexRender to help those who don’t have access to a LaTeX enabled server. I am looking for volunteers who are willing to host LatexRender on a publically available server, accessed in a similar manner to mimeTeX’s server. I doubt that it would need huge bandwidth but it does need a commitment to be available for use.

Do let me know if you are interested and can offer such a service.

A PDF version of this post is available here

A. Images

Unfortunately not every host offers LaTeX but there are sites that can help generate the images that can be downloaded.

1. LaTeX Equation Editor. This innovative editor has a symbol table for those who are not sure of the LaTeX code as well as allowing the code to be typed directly. It uses Ajax so that the page does not need to be refreshed to see the rendered image. The source code uses LatexRender. Update: see CodeCogs Equation Editor.
   Hamline University Physics Department Latex Equation Editor is based on the same code, with some innovative additions. Editor Online de Ecuaciones Latex is a Spanish version. Online LaTeX Equation Editor has modified the code to use mimeTeX.
   (thanks to umustbe and thornahawk for the links).
2. Bruno Gonçalves – Latex Rendering also has a symbol table and direct typing. It uses mimeTeX for a very useful instant preview and LatexRender for the final high-quality image. Discussion is at Professional looking equations by rendering LaTeX online.
3. MimeTeX parses a LaTeX maths expression and immediately emits the corresponding gif image such as this
4. Troy Henderson’s LaTeX Previewer makes it clear what is in the preamble when rendering the image.
   MetaPost Previewer allows you to preview and download images made by MetaPost in a number of formats. You can see the log for any errors.
5. MathTran is a new project by the Open University that intends to “provide translation of mathematical content, from TeX to MathML and vice-versa, and to graphics formats, as a web service”. At the moment only Plain TeX (both text and mathematics) can be converted to an image.
   MathTran instant preview is a web-based TeX system, complete with a built-in help. It compiles Plain TeX code in real time. The source is available at mathtran-javascript.
   Enso TeX Anywhere makes use of MathTran to convert TeX to images in some Windows programs.
6. Roger’s Online Equation Editor offers a choice of image formats, background and text colours, resolution, transparency and anti-alias
7. Sitmo LaTeX Equation Editor uses realtime rendering. It is a Google gadget so can be added to your website.
8. Texify uses mimeTeX to generate the mage. It can also be used to generate links such as http://texify.com/$E=mc^2$ to the image in text based systems such as email.
9. mathTeX is as simple to use as mimeTeX but uses LaTeX to generate a higher quality image like this . If you have LaTeX installed you may prefer to install mathTeX as a cgi program on your system. See also mathTeX Helper, Embedding math with replacemath.js and How to Install Latex On Blogger/Blogspot.
10. HotEqn is a AWT-based Java applet to view and display mathematical equations. Subtitled The IMGless Equation Viewer Applet it cannot be used to create images.
11. Tex2Im is a JavaScript equation editor written by Sergej Zerr which is a web interface to tex2im – the latex to pixmap converter on the server and creates a JPEG image.
12. jsTeXrender is a small JavaScript program which will convert LaTeX code inside pre tags to images. This makes it easy to embed mathematics in any HTML page or in PHP programs such as phpBB or WordPress. It is based on CodeCogs and LatexRender. An example page can be found at Online JavaScript TeX/LaTeX equation render and documentation at YourEquations.com.
13. mathurl is a mathematical version of TinyURL.com. It allows you to reference LaTeXed mathematical expressions using a short url. For example, http://mathurl.com/?5v4pjw will show which you can then edit. More details on mathurl’s help page
14. LaTeX for Blogger is a JavaScript add-on for Firefox with Greasemonkey that enables the use of mimeTeX in Blogger posts.
15. MathBin.net allows you to quickly post mathematics or physics problems in a forum for others to view and reply to and discuss. The posts are long-lived but not permanent.
16. LaTeX word count provides a word count for complete LaTeX documents or for code fragments, with a number of options for parts of the document and whether or not to include mathematics.
17. Equations 1.2.1 is an add-on for the email program Thunderbird, which converts LaTeX mathematics into graphics via a Convert button.
18. Quick LaTeX is a Google gadget that can be added to the iGoogle homepage. It uses mimeTeX to produce the image but it would be quite simple to change the code to use mathTeX or CodeCogs.
19. Latex2png converts LaTeX code into various image formats PNG, GIF, EPS, or JPEG. It includes a menu for inserting code.
20. QuickLaTeX.com is a free service which converts LaTeX code to a URL of an image  along with meaningful error messages. More detail, support plus a WordPress plugin can be found at the author’s blog.
21. jsMath is entitled A Method of Including  Mathematics in Web Pages and uses native fonts, which can be resized, rather than using images. It works best  (but not exclusively) with TeX fonts.
    WordPress and jsMath has instructions for using  jsMath in WordPress blogs.
    Math support in Sphinx can use both image rendering and jsMath for its document generator.
    (thanks to Andreas Maier for the links).
22. LaTeX Composer is an experimental add-on for Firefox. It allows you to see a preview image of LaTeX code before copying the code to a LaTeX-enabled site (the image cannot be copied). Strictly speaking, it isn’t an online application as it installs mimeTeX to the Firefox directory but does offer a simple way of using mimeTeX offline. The program is run inside Firefox and is started using a small icon in the status bar.

B. Complete Documents

Complete LaTeX documents can also be compiled online. Here are a few sites I have come across:

1. LaTeX-Online-Compiler will compile LaTeX documents to postscript, PDF or DVI formats and will generate references. There’s a German language version of the page.
2. ScienceSoft.at can compile a document to various image formats as well as PDF. The resolution can be adjusted and there are a number of templates. There’s a Flash applet version. Again there’s a German language version.
3. LaTeX to PDF uses MiKTeX to convert LaTeX documents to PDF and allows uploading of classes, style files and images.
4. TeX on Web converts LaTeX and plain TeX documents to Postscript and PDF. It has Czech language support. The instructions are in Czech but the site is still easy to use by non-Czech speakers.
5. MonkeyTeX allows you to upload, store and convert LaTeX documents to PDF in your own account. This makes it possible to collaborate on documents and you can opt to make your PDF documents public and searchable. You can also upload style, bibtex and other files which you can use when compiling LaTeX documents.
6. LaTeX Lab is an online version giving a full text editor and compiler complete with menus and toolbars.
   

   “On the Live environment an installation of MikTeX provides the LaTeX processes and packages. A simple C# class library provides an API for interfacing with the MikTeX tools (for tasks such as TeX-to-PDF conversion) as well as the LaTexLab application database which stores users and corresponding file systems. The C# class library is in turn exposed to the Web as an ASP.NET web service which is consumed via AJAX from the LaTexLab application.”

The project is very much under development and the project site is at Google Code.

7. ScribTeX is a free online collaborative LaTeX editor.
   

   “ScribTeX allows you to work on LaTeX documents from anywhere with internet access and share them with your friends and colleagues easily. Some of the many features of ScribTeX include:

   • Create and edit LaTeX documents and automatically render them to PDFs;
   • Full revision control of all your documents;
   • The choice to keep your documents private, allow people of your choosing to view or edit them, or publish them to world. A fine grained permissions system allows for flexible access control.”

8. Verbosus is an online LaTeX editor which can
   

   Create and manage your latex projects and generate .pdf files online, directly in your browser, with syntax highlighting.

Registration is required and the service is free for ’small projects’ using a maximum of 4 resources, though I am uncertain as to the definition of resources.

C. Other sites

1. LaTeX word count uses a Perl script to count text words in a LaTeX document and has some options to control the count. I’m not sure how useful a word count is for a typical LaTeX document, but this is an easy way to do so.
2. WordPress.com offers free hosted blogs with LaTeX facilities similar to LatexRender. See Can I put Math or Equations in my Posts? for details.
3. LaTeX Symbols Converter will convert accented characters and HTML and XML characters into LaTeX code. For example,
   Schr\"{o}dinger \& his cat
Schr\ödinger \&\#38; his cat
   will both be converted to Schr\"{o}dinger \& his cat.
4. Detexify tries to work out the LaTeX code for any symbol that is mouse-drawn in a box. Thus drawing  should give a list of symbols including \sum, \Sigma and \Upsigma. The mode or possible packages required are also listed. The drawing box is not available in Internet Explorer.

Please let me know about similar sites that are worth including here.

Asymptote is a vector graphics language which creates mathematical diagrams and figures and is designed to be used with LaTeX. Hui Chen has adapted LatexRender code to produce an Asymptote plugin for WordPress.

• Asymptote plugin for WordPress
• Asymptote site
• Asymptote introduction and tutorial

Some versions of ImageMagick fail to process the transparency command properly. If you find that this is causing problems for you then in class.latexrender.php remove the transparency command

-transparent "#FFFFFF"

so

// imagemagick convert ps to image and trim picture
$command = $this->_convert_path." -density ".$this->_formula_density." -trim -transparent "#FFFFFF" ".$this->_tmp_filename.".ps ".$this->_tmp_filename.".".$this->_image_format;

becomes

// imagemagick convert ps to image and trim picture
$command = $this->_convert_path." -density ".$this->_formula_density." -trim ".$this->_tmp_filename.".ps ".$this->_tmp_filename.".".$this->_image_format;

Thanks to Kevin Knuth for pointing out this workaround.

Gunnlaugur Þór Briem has written a bash script which simplifies the installation of the LatexRender plugin for WordPress. It means that you shouldn’t have to worry about those pesky paths which are so easy to trip over. You will find the instructions and script at LaTeX in WordPress.

The wp-latexrender.zip download now includes an optional offset beta directory. These contain files that implement Mike Boyle’s Inline Offset improvement to the vertical alignment of images. Users may wish to experiment with this and details of the code changes are given in the offset beta/readme_offset.txt file.

I have tested LatexRender in WordPress 2 and it works fine.

If you use the default visual rich editor (it can be turned off in Your Profile) when posting you won’t see a tex button but that would also be true for all the other WYSIWYG editors you can use.

See Plugin Compatibility for a list of plugins that work with WordPress 2.

If you wish to install LatexRender for Wordpress on the Mac Tiger operating system, then you will find NeverEndingBooks instructions very helpful.

WordPress is very flexible allowing you to choose various text filters. Unfortunately they can filter the mathematical text as well before it gets converted to an image. The most common effect you see is in matrices (or arrays, tables) where you get

instead of

This is because the ampersand has been converted to the equivalent HTML code.

You can solve this problem by changing one line in latex.php. In
// $latex_formula = str_replace("& #38;","&",$latex_formula);
remove the comment // and change 38 to 038 so that the line reads
$latex_formula = str_replace("& #038;","&",$latex_formula);
Please note: In order to show the code here I have had to introduce a space between & and #. That space should not be there in latex.php

Other odd effects can be dealt with similarly.
If you see a8217; instead of a’ then either
1. use ^\prime in your LaTeX code and/or
2. add the line (removing the space between & and #)
$latex_formula = str_replace("& #8217;","'",$latex_formula);
in the same place as the previous one in latex.php

Both alterations appear in the latest download.

Note: If you want to regenerate older images then you will either have to remove them from the cache or change the code slightly eg by putting in an extra space which will ignore

British (and who else?)¹ prefer to use for but doesn’t recognise \cosec as a command. You could use \mathrm{cosec} which produces or even use Babel, but a very simple method would be to add a line in class.latexrender.php Just after
$string .= "\begin{document}\n";
add the line
$string .= "\newcommand{\cosec}{\operatorname{cosec}}\n";
and then you’ll be able to use \cosec wherever you want eg

You can find a whole lot more newcommands at Birmingham (UK) University Maths Postgrad Committee’s Latex Commands page

1. Russian Babel has the \cosec command; so who else uses cosec rather than csc?

Chemists do make use of but they have different typesetting conventions from mathematicians. For example the chemical is quite different from the mathematical . Martin Hensel’s mhchem package allows the easy typing of chemical symbols. Here are some examples taken from mhchem’s documentation. Needless to say, not being a chemist, they don’t mean much to me

Hover over, or click on a formula, to see the underlying latex code.

Benjamin Schwartz has adapted class.latexrender.php to improve the quality of the output. He has used “the PNG format’s support for true alpha blending to make those jagged edges (on non-white background) disappear”. The text colour for both PNG and GIF are customizable as is the background colour for GIFs. The original settings are still available.

You can download the file here and view its effect at Digital Diary of Ben Schwartz. The enhancement works best on dark backgrounds so, if you are using Firefox or Opera then try switching the stylesheet to ‘Dark Fire’ on that page.

Some things to be aware of:

• the improved output may have a small speed penalty
• the system will only work with recent versions of ImageMagick (such as 6.1.2)
• Internet Explorer on Windows does not show PNGs as transparent

If you can’t get LatexRender to work then comment out the 6 unlink lines in class.latexrender.php with // so that they look like this:
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".tex");
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".aux");
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".log");
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".dvi");
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".ps");
// unlink($this->_tmp_dir."/".$this->_tmp_filename.".".$this->_image_format);
Then look in the /tmp folder you have created and see what files have been created. If there’s a .ps file but no .gif or .png file then it may be because ImageMagick can’t find Ghostscript as detailed in Latexrender for WordPress under Mac OS X.

This is because in Linux, Imagemagick expects to find the gs file (Ghostscript’s binary) in /usr/bin. In fact, it may be in /usr/local/bin or somewhere else. You can either
1. reinstall Ghostscript into /usr/bin
or
2. change the path in Imagemagick’s file to tell it where to look. The file you want is delegates.mgk and might be found in /usr/share/ImageMagick, though this can vary. In this text file just alter /usr/bin/gs to the correct path – there may be 8 of these to change.
or
3. This is probably the simplest method. Make a symbolic link from /usr/bin/gs to /usr/local/bin/gs or wherever gs resides. How do I create a symbolic link?
or
4. See Marcin Gomulka’s comment below. This is great if you don’t have access to the server

Please let me know if this works for your installation.

Alex Gittens has released IllustRender to aid in drawing illustrations in WordPress
“IllustRender is a plugin for WordPress, heavily based on LatexRender, which replaces illustration code in your posts with the actual illustration.”

The LATEX Graphics Companion is the reference book to consult for such graphics. A couple of examples, rendered by IllustRender, are:

These diagrams are drawn by Michael Barr’s diagxy package and are taken from the manual: