Back to Questions
1.4k
views5
comments
Use mathjax in a control
websharpermathjax

I am able to get mathjax to render math written in TeX on my Main.html by including the cdn in the head element, but I want to know how to get a websharper control to render the TeX. Any suggestions?

.

By default MathJax runs on startup on the initial content of the page, so you need to explicitly run it on any generated content. OnAfterRender is designed for this purpose. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Define a binding for MathJax
module MathJax =
    [<Inline "MathJax.Hub.Typeset($e)">]
    let Typeset (e: Dom.Element) = ()
    
    [<Inline "MathJax.Hub.Typeset()">]
    let TypesetAll () = ()

// WebSharper.Html example use:
let divWithMath =
    Div [Text "\\(ax^2 + bx + c = 0\\)"]
    |>! OnAfterRender (fun div -> MathJax.Typeset div.Dom)

// WebSharper.UI.Next example use:
let divWithMath =
    divAttr [on.afterRender (fun div -> MathJax.Typeset div.Dom)] [
        text "\\(ax^2 + bx + c = 0\\)"
    ]
    
// Or whenever you have inserted several elements and you want to render them all:
MathJax.TypesetAll ()
By on 9/30/2016 5:18 AM ()

In the default project, there is a button that sends text to a Div element. How do I update the Div element after the text has been updated. If I change the event to a OnClick for the Div, the text will render the math, but I don't want to have to click the Div element after the text is inserted.

By on 9/30/2016 2:53 PM ()

I figured out a solution. the following code renders the mathjax from the input to the DIV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   let Main () =
        let input = Input [Attr.Value ""] -< []
        let output = Div []  |>! OnAfterRender (fun div -> MathJax.Typeset div.Dom) 
        Div [            
            input
            Button [Text "Send"]
            |>! OnClick (fun _ _ ->
                async {
                    let! data = Server.DoSomething input.Value
                    output.Text <- data
                    output.AppendTo "jtron"
                }
                |> Async.Start
            )            
            HR []
            H4 [Attr.Class "text-muted"] -< [Text "The server responded:"]
            Div [Attr.Id "jtron";Attr.Class "jumbotron"]   
        ]
By on 9/30/2016 6:45 PM ()

There shouldn't be any need to imperatively append the output div to the dom, instead you can do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

   let Main () =
        let input = Input [Attr.Value ""]
        let output = Div []
        Div [            
            input
            Button [Text "Send"]
            |>! OnClick (fun _ _ ->
                async {
                    let! data = Server.DoSomething input.Value
                    output.Text <- data
                    MathJax.Typeset output.Dom
                }
                |> Async.Start
            )            
            HR []
            H4 [Attr.Class "text-muted"] -< [Text "The server responded:"]
            Div [Attr.Id "jtron";Attr.Class "jumbotron"] -< [output]
        ]
By on 10/1/2016 7:42 AM ()

Thanks, that works better.

By on 10/1/2016 11:40 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper