Simple Math Highlighting

If the browser can natively render MathML Elements, the use of the library is simple. Say we have a simple MathML Element:

R α , β , n ≡ [ ( α + n ) 2 + β 2 - ( α + n ) 2 - α 2 ] 1 / n [ α 2 + β 2 ] 1 / 2 ⁢ n subscript R α β n superscript superscript α n 2 superscript β 2 superscript α n 2 superscript α 2 1 n superscript superscript α 2 superscript β 2 1 2 n R_{{\alpha,\beta,n}}\equiv\frac{[\sqrt{(\alpha+n)^{2}+\beta^{2}}-\sqrt{(\alpha% +n)^{2}-\alpha^{2}}]^{{1/n}}}{[\alpha^{2}+\beta^{2}]^{{1/2n}}}

and we want to highlight parts of it in a specific color. For this we first have to find the id of the MathML Element (in this case "m19.1") and the XPath to the Part of the formular we want to highlight.

Then we can use the following code to toggle the colouring on and off:

//Get the MathML root element
var MathMLElement = FHL.getElementByXMLId("m19.1"); 

//The XPath to the part of the forumlar we want to highlight. 
var xPath = "/*[1]/*[3]/*[2]/*[2]/*[2]/*[2]/*[2]";

//find the element we want to color
var elem = FHL.getPresentation(xPath, MathMLElement);

//Lets check if this element is already colored
if(elem.getAttribute("mathcolor") !== "blue"){
  //its not blue yet so make it blue
  elem.setAttribute("mathcolor", "blue");
} else {
  //it is already blue, lets turn it black again
  elem.setAttribute("mathcolor", "black");
}
        

(for result see MathML element above)

Use together with MathJax

In some cases, native MathML support from the browser is not available (such as in Google Chrome). In this case, it is possible to use MathJax to render the Element. In this case it is also possible to add colors to the element, however if they are supposed to be triggered on and off afterwards, it is neccessary to use a little trick: We add a CSS class to the element. MathJax, when rendering the element, also adds this class to the output and it is easily possible to refer to the element later.

We use the following code:

//Run this code once, on page load
//to stop MathJax from pre-processing
MathJax.Hub.Config({
  jax: ["input/MathML", "output/HTML-CSS","output/NativeMML"], 
  skipStartupTypeset: true, //do not auto parse things
  elements: "example2" // restrict MathJax to the element with id example2
});

/* ... */

//Run this code once all elements on the page have loaded

//find the element
var MathMLElement = FHL.getElementByXMLId("m1.1"); 

//What do we want to find
var xPath = "/*[1]/*[2]/*[2]"; 

//Lets find it
var part = FHL.getPresentation(xPath, MathMLElement); 

//and add a class
part.setAttribute("class", "highlight"); 

//Lets type set it
MathJax.Hub.Queue(["Typeset",MathJax.Hub, MathMLElement.parent]);


/* ... */

//Run this part of the code when you want to toggle the color of the elements

//Make sure MathJax is not still rendering by giving the callback to MathJax
MathJax.Hub.Queue(function () {
  
  //get the highlight element from before. 
  var elem = document.getElementsByClassName("highlight")[0];


  if(elem.getAttribute("mathcolor") !== "blue"){
    //its not blue yet so make it blue
    elem.setAttribute("mathcolor", "blue");
    elem.setAttribute("style", "color: blue; "); 
  } else {
    //it is already blue, lets turn it black again
    elem.setAttribute("mathcolor", "black");
    elem.setAttribute("style", "color: black; "); 
  }
});

x2-1=n!superscriptx21nx^{2}-1=n!

(Hit the init button first or it wont work. )

Note that this code also works in browsers which natively support MathML.

API documentation and source code

The API documentation can be found at /doc/

The entire source code can be found on GitHub: https://github.com/tkw1536/FormulaeHighlightLibrary