TeX render

namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI
open WebSharper.UI.Client
open WebSharper.UI.Html

[<JavaScript>]
module TeXInput =
    open WebSharper.MathJax

type MainTemplate = Templating.Template<Snippet.IndexHtml>

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

let rvExpression = Var.Create @"\frac{2\cdot x\cdot\left({ x}^{9}+{ x}^{2}\right)-{ x}^{2}\cdot\left(9\cdot{ x}^{8}+2\cdot x\right)}{{\left({ x}^{9}+{ x}^{2}\right)}^{2}}+2\cdot{ x}^{3}"

let viewExpression = rvExpression.View

let tex = 
            div [
                on.viewUpdate viewExpression (fun e v -> 
                    JQuery.Of("#tex div").Empty().Append("$$" + v + "$$").Ignore
                    MathJax.Hub.Queue([| "Typeset", MathJax.MathJax.Hub :> obj, [| e :> obj |] |]) |> ignore
                )
            ] [
                textView <| viewExpression.Map (fun x -> "$$" + x + "$$")
            ]

Doc.RunById "tex" tex

MainTemplate.Main()
            .Expression(rvExpression)
            .Doc()
        |> Doc.RunById "main"

<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        <style>
            .panel {
                margin: 20px;
                padding: 20px;
                box-shadow: 2px 2px 5px 2px #eee;
            }
            .result {
                width: auto;
            }
            .mdl-textfield {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="main" class="panel" ws-children-template="Main">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="expression" ws-var="Expression" value="\frac{2\cdot x\cdot\left({ x}^{9}+{ x}^{2}\right)-{ x}^{2}\cdot\left(9\cdot{ x}^{8}+2\cdot x\right)}{{\left({ x}^{9}+{ x}^{2}\right)}^{2}}+2\cdot{ x}^{3}"/>
                <label class="mdl-textfield__label" for="expression">TeX Expression</label>
            </div>
        </div>
        <div id="tex" class="panel result"></div>
        
    </body>
</html>