F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace Samples open WebSharper open WebSharper.JavaScript open WebSharper.JQuery open WebSharper.UI open WebSharper.UI.Client open WebSharper.UI.Html // See the same in C# at http://try.websharper.com/snippet/JankoA/0000O6 [<JavaScript>] module HelloWorld = open WebSharper.MathJax open WebSharper.MathJS 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 rvFormula = Var.Create "x^2/(x^9 + x^2) + x^4/2" let rvDerivateBy = Var.Create "x" let viewFormula = rvFormula.View let viewDerivateBy = rvDerivateBy.View let texFormula = View.Map2 (fun (formula : string) (derivateby : string) -> try let simplify = MathJS.DerivativeOption(Simplify=true) (MathJS.Math.Derivative(formula, derivateby, simplify)).ToTex() with _ -> "The\ formula\ isn\'t\ correct." ) viewFormula viewDerivateBy let tex = div [ on.viewUpdate texFormula (fun e v -> JQuery.Of("#tex div").Empty().Append("$$" + v + "$$").Ignore MathJax.Hub.Queue([| "Typeset", MathJax.MathJax.Hub :> obj, [| e :> obj |] |]) |> ignore ) ] [ textView <| texFormula.Map (fun x -> "$$" + x + "$$") ] Doc.RunById "tex" tex MainTemplate.Main() .Formula(rvFormula) .DerivateBy(rvDerivateBy) .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; width: 300px; } .result { width: auto; } </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="formula" ws-var="Formula" value="x^2/(x^9 + x^2) + x^4/2"/> <label class="mdl-textfield__label" for="formula">Formula</label> </div><br/> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="derivateBy" ws-var="DerivateBy" value="x" /> <label class="mdl-textfield__label" for="derivateBy">Derivate by</label> </div> </div> <div id="tex" class="panel result"></div> <!--[BODY]--> </body> </html>