Integrating LatexRender into TiddlyWiki
This post is adapted from my LatexRenderPluginDoc page on my wiki, so might contain a couple of errors on the copy over. If something doesn’t seem right, refer to that page, and please tell me in a comment below.
This uses LatexRender, my simple TiddlyWiki macro, LatexRenderPlugin, and a custom script I created for the purpose, render.php, which renders LaTeX fed to it as an argument. You’ll need imagemagick enabled on your server.
First you need access to a server with the ability to run LatexRender. Download the latexrender.zip, and extract the “otherPHP” directory. Copy the class.latexrender.php, and latex.php files to a folder on your webserver. Set up the directories in each file accordingly. For example, I have my wiki set up like so:
webroot/physiwiki/latexrender:
class.latexrender.php
latex.php
and two subdirectories (which the webserver needs write access to, chmod 777):
webroot/physiwiki/latexrender/pictures
webroot/physiwiki/latexrender/tmp
So in class.latexrender.php, I have:
var $_picture_path = "/absolue/path/to/physiwiki/latexrender/pictures"; var $_picture_path_httpd = "/physiwiki/latexrender/pictures"; var $_tmp_dir = "/absolute/path/to/physiwiki/latexrender/tmp";
Also, make sure the paths to latex, dvips, convert, identify are setup correctly on the lines below. You can also make changes to the other settings in this file if you want including image format. The default is gif, I changed it to png.
Now latex.php by default generates the html to show an image, like:
<img src="blah">
We dont want this. So some changes to latex.php are required. First adjust the paths in latex.php:
$latexrender_path = "/absolute/path/to/physiwiki/latexrender"; $latexrender_path_http = ".";
The ‘.’ is used as latex.php resides in the same directory as class.latexrender.php.
Next, scroll right to the bottom of the file, and you can comment out/delete the last few lines, and change the return value to $url instead of $text as below:
$url = $latex->getFormulaURL($latex_formula);
/*
$alt_latex_formula = htmlentities($latex_formula, ENT_QUOTES);
$alt_latex_formula = ...
$alt_latex_formula = ..
if ($url != false) {
$text = substr_replace($text, "<img src='".$url."' title='".$alt_latex_formula."' alt='".$alt_latex_formula."' align=absmiddle>",$pos,strlen($tex_matches[0][$i]));
} else {
$text = substr_replace($text, "[Unparseable or potentially dangerous latex formula. Error $latex->_errorcode $latex->_errorextra]",$pos,strlen($tex_matches[0][$i]));
}
*/
}
return $url;
}
Right, that’s LatexRender all setup. Now we need to make the render.php file. Put the code in a file and save it in the same directory as class.latexrender.php and latex.php.
render.php:
<?
header("Content-type: image/png");
include_once('latex.php');
if (isset($_GET['l'])){
$text = $_GET['l'];
$text = stripslashes($text);
$text = "[tex]" . $text . "[/tex]";
$latex_img_file = latex_content($text);
$handle = fopen($latex_img_file, "r");
$contents = fread($handle, filesize($latex_img_file));
fclose($handle);
echo $contents;
}
?>
Obviously change the header function to match the content type you specified in class.render.php. This file accepts LaTeX formula code as an argument render.php?l=<formula>, puts it between [tex] tags so it can be messed around by latex.php and then renders it as the image file.
Now all that is left is to incorporate this into TiddlyWiki, using a simple macro. (Just change the src= section to match the location of your script):
config.macros.tex = {};
config.macros.tex.handler = function (place,macroName,params,wikifier,paramString,tiddler) {
var code = encodeURIComponent(params[0]);
wikify("<html><img class=\"teximg\" title=\"" + params[0] + "\" src=\"latexrender/render.php?l=" + code + "\"></html>", place);
}
To use this plugin just call it like so:
<<tex '\int_{-5}^{5} x^2 dx'>>
For some rendered examples just browse my wiki!
The macro also gives all equations the “teximg” css class, so they can be adjusted to be inline “nicely”, using the following CSS in the StyleSheet tiddler:
.viewer {line-height: 2.0 ;} .viewer img.teximg { vertical-align: middle;}
Hopefully you’ll now have easy LaTeX macro’s working on your TiddlyWiki! Any problems just leave me a comment.
[...] chris: [...]