Markdown with Mathjax

This summer I’ve been working with others in the Global Physics Department to develop an online Physics Problem Database. We’re at version 0.1 right now (very alpha, so watch out) but it’s been a lot of fun learning about how to code a web project from the ground up. I’ve done a lot of Php/mysql programming before (my own LMS, for example), but I’ve never coded with others before. It’s been fun learning to program in a framework (Laravel), and how to share code development using Github. I hope to write another post soon describing more of these tools and more about this project in general. In this post, however, I want to focus on just the latest feature I’ve been working on.

We want people to be able to enter physics problems in an easy fashion, so that they’ll be formatted well and possibly be exported to formats other than html. We really like how Markdown works for this, and it was great to see that there’s a Laravel bundle to help that work. However, we also wanted people to be able to easily post equations using \LaTeX syntax, and we really liked how Mathjax enables that. The problem is that they aren’t really meant to work together. This post talks about how I got them to both work on our system.

Before I got started, I did some digging around to see how others solved this problem. Many of the solutions involved installing Mathjax locally, but we were really interested in using the hosted version of the Mathjax javascript, so I didn’t particularly like those solutions. After doing some thinking about it, here’s what I decided to do:

  1. Use php’s regex syntax to find and extract all the mathjax syntax out of the text.
    1. For inline equations, this looks like \( in-line-latex \)
    2. For displayed equations, this looks like \[ displayed-latex \]
  2. Replace all equations with text that Markdown will leave alone
    1. I chose the text MaThJaX eQuAtIoN
  3. Run the Markdown engine
  4. Replace all instances of the replaced text with the original mathjax syntax

Here’s the php code I used to do this:


$text=$this->get_attribute('question'); // grabs question text
 $tmp=preg_split('/(\\\\[\(\[].*?\\\\[\)\]])/', $text, -1, PREG_SPLIT_DELIM_CAPTURE); // finds mathjax syntax
 $replacestring="MaThJaX EqUaTiOn";
 $number=floor(count($tmp)/2);
 $corrected='';
 $eqns=array();
 for ($i=0; $i<$number; $i++) { // this loop replaces equations
$corrected.=$tmp[$i*2];
$alt=$tmp[$i*2+1];
$eqns[]=$alt;
$corrected.=$replacestring;
 };
 $corrected.=$tmp[2*$number];
 $intermediate=Sparkdown\Markdown($corrected); // runs Markdown
 $tmp=preg_split('/('.$replacestring.')/', $intermediate, -1, PREG_SPLIT_DELIM_CAPTURE); // finds replaced text

$number=floor(count($tmp)/2);
 $corrected='';
 for ($i=0; $i<$number; $i++) { // puts equations back
$corrected.=$tmp[$i*2];
$corrected.=$eqns[$i];
 };
 $corrected.=$tmp[2*$number];
 return $corrected;

I’ve got this working in our development branch, and we’ll push it up to the server soon. I hope this helps others who have run into this same problem.

About these ads

About Andy "SuperFly" Rundquist

Associate professor of physics at Hamline.
This entry was posted in glodal physics department, physics problem db. Bookmark the permalink.

One Response to Markdown with Mathjax

  1. Melissa says:

    I look forward to hearing more about the problem database and what you envision for it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s