How to add Mathjax support to PHPMyAdmin

Question

I use MySQL DBMS for storing my data. I've lot of mathematical data to enter into the database. I guess entering Mathematical data in the form of latex is a best option.(Please feel free to suggest if you think other solutions would be better). We use PHPMyAdmin for data entry into MySQL. Now thing is because we are entering lot of math data. It would be better to see what we are entering. Exactly similar to live preview of math.stackexchange.com. This is where Mathjax comes into picture. Now the big question is how to integrate Mathjax support to PHPMyAdmin?

If you want an example here is the kind of stuff we want to enter into the database:

In first year calculus, we define intervals such as $(u, v)$ and $(u, \infty)$. Such an interval is a \emph{neighborhood} of $a$ if $a$ is in the interval. Students should realize that $\infty$ is only a symbol, not a number. This is important since we soon introduce concepts such as $\lim_{x \to \infty} f(x)$.

When we introduce the derivative [ \lim_{x \to a} \frac{f(x) - f(a)}{x - a}, ] we assume that the function is defined and continuous in a neighborhood of $a$.

Answer 1

I found a solution. You can download modified PHPMyAdmin distribution using this link (it will be available not forever). I'll describe the changes I've made. You can repeat them yourself if you want to.

This is how it looks like:

The script will work on "Insert" tab when you create new entries or edit existing ones. The script will work on all textareas (multi-line edit fields). After you change something in textarea and move focus out of it (by clicking around), the text block will be created above this textarea. Textarea's content copies into this block. If there are some formulas, they will be rendered by MathJax. Be patient: on first time it will work slowly, formulas will be replaces after several seconds.

Step 1. Download latest version of PHPMyAdmin.

I've tested my code with latest version of PHPMyAdmin (3.5.1 by now). It can work with older version but I didn't check.

Step 2. Download latest version of MathJax and extract it to <PHPMyAdmin_Directory>/js/mathjax/distrib.

You can download MathJax 2.0 from official site. Create in PHPMyAdmin directory folder named js/mathjax/distrib and unpack MathJax into this folder. You must now have existing file js/mathjax/distrib/MathJax.js.

Step 3. Copy config file js/mathjax/distrib/config/default.js to js/mathjax/distrib/config/myconfig.js.

Step 4.Change settings for your site in myconfig.js file.

Find this section:

tex2jax: {

    //
    //  The delimiters that surround in-line math expressions.  The first in each
    //  pair is the initial delimiter and the second is the terminal delimiter.
    //  Comment out any that you don't want, but be sure there is no extra
    //  comma at the end of the last item in the list -- some browsers won't
    //  be able to handle that.
    //
    inlineMath: [
//    ['$','$'],      // uncomment this for standard TeX math delimiters
      ['\\(','\\)']
    ],

From your text sample I figured out that you need to change this settings to:

tex2jax: {
    inlineMath: [
      ['$','$'], ['[', ']'], 
      ['\\(','\\)']
    ],

Step 5. Create file js/mathjax/1.js with the following contents:

$(function() {
  var preview_number = 0;
  $("textarea").change(function(e) {
    var textarea = $(e.target);
    var d = textarea.prev();
    if (!d.hasClass("mathjax_preview")) {
      preview_number++;
      var d = $("<div class='mathjax_preview' " +
         "style='padding: 5px; color: black; background: #eee; border: 1px solid #888;'" +
         "></div>");
      d.attr("id", "mathjax_preview_" + preview_number);
      d.insertBefore(textarea);
    } 
    d.text(textarea.val());
    MathJax.Hub.Queue([ "Typeset", MathJax.Hub, d.attr("id") ]);
  });
});

Step 6. Modify tbl_change.php.

Open tbl_change.php file in the root PHPMyAdmin directory and find this section:

$GLOBALS['js_include'][] = 'functions.js';
$GLOBALS['js_include'][] = 'tbl_change.js';
$GLOBALS['js_include'][] = 'jquery/jquery-ui-1.8.16.custom.js';
$GLOBALS['js_include'][] = 'jquery/timepicker.js';
$GLOBALS['js_include'][] = 'gis_data_editor.js';

Add two more lines below this:

$GLOBALS['js_include'][] = 'mathjax/distrib/MathJax.js?config=myconfig';
$GLOBALS['js_include'][] = 'mathjax/1.js';