Displaying mathematics equations in WebSharper

As a previous story of mine (read here) has already shown, you could use WebSharper to do your higher level mathematics on any website you create. In this story I’ll show you how to render these expressions, equations on the screen using WebSharper’s MathJax extension.

First we have to add Zafir.MathJax (WebSharper.MathJax) to our project with NuGet manager. After we’ve done that, we can use MathJax in our website.

open WebSharper.MathJax

Keep in mind, these calculations are happening on client side, so we have to do this in a module with a tag:

[<JavaScript>]

Now we have MathJax in our project, and opened, ready to use.

First we have to configure MathJax to our needs. We can lookup the original documentation for the config settings. In WebSharper we have to do some slight changes in our code. A basic example to setup a TeX rendering:

The original JavaScript code:

MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [ ["$", "$"], ["\\(", "\\)"] ]
    }
})

The same code in F# in WebSharper:

MathJax.Hub.Config(
    MathJax.Config(
        Extensions = [| "tex2jax.js" |],
        Jax = [| "input/TeX"; "output/HTML-CSS"; |],
        Tex2jax = MathJax.Tex2jax(
            InlineMath = [| ("$", "$"); ("\\(", "\\)") |]
        )
    )
)

Having this in our code, we’re already ready to render any TeX formatted expression we’d like to. To render inline math we just have to use put out expression between two $’s or \( \). To make it a display expression, we have to put it between two $$’s as the following example shows:

open WebSharper
open WebSharper.JavaScript
open WebSharper.UI.Next
open WebSharper.UI.Next.Client
open WebSharper.UI.Next.Html
open WebSharper.MathJax
[<JavaScript>]
module Client =
    [<SPAEntryPoint>]
    let Main () =
    MathJax.Hub.Config(
        MathJax.Config(
            Extensions = [| "tex2jax.js" |],
            Jax = [| "input/TeX"; "output/HTML-CSS"; |],
            Tex2jax = MathJax.Tex2jax(
                InlineMath = [| ("$", "$"); ("\\(", "\\)") |]
            )
        )
    )
   div [
        text "This is inline math: $a \ne 0$ or \(a \ne 0\)"
        text "This is display math: $$x = {-b \pm \sqrt{b^2-4ac}   \over 2a}.$$"
   ]
   |> Doc.RunById "main"

After this we only have to add this line in our html file:

<div ws-replace="main"></div>

Dynamic content

Sometimes we’d like to render an expression we’ve calculated after the page has already been loaded. The previous method won’t work in that case.

MathJax has a solution to this problem. We have to tell the script to parse our HTML again, and render its content again. To do that we have to use the MathJax.Hub.Queue() function.

There are two ways of doing this:
If we want to parse and render the whole page again, we can just call this function after we’ve updated our expression on the site:

MathJax.Hub.Queue([| "Typeset"; MathJax.Hub :> obj |])

Note on the :> obj object casting:
In JavaScript MathJax accepts any kind of object in that function, but in F# the function has to have a specific type, so to be able to pass any object to this function, we have to hast it into an obj.

Sometimes we don’t want to call this on the whole website, only on some specific DOM elements. To do so we have to call the Queue function, but with different parameters.

MathJax.Hub.Queue([|"Typeset"; MathJax.Hub :> obj; [| e :> obj |]|])

The only difference here is the third parameter which is an Array of the DOM elements (as objects). In this case MathJax will only re-render these given elements.

Following this link you can check out how it’s working in a live demo.

TeX render