how exactly is the math tag used in Elm?

Question

Here's just a generic div with some nonsense math in it. Does not render properly

div [] [ math [] [text "$\\int_a^b \frac{2}{3}$"]

and here's what comes out

<math>$\int_a^b \frac{2}{3}$</math>

so I am not understanding how math works in Elm. This is looking like mathML

For the time being, I would think it easier to make a mathjax call than to learn (or create) a new markup language and write pure mathML. Here's what it should look like

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msubsup>
    <mo>&#x222B;<!-- ∫ --></mo>
    <mi>a</mi>
    <mi>b</mi>
  </msubsup>
  <mfrac>
    <mn>2</mn>
    <mn>3</mn>
  </mfrac>
</math>

Elm has no mfrac tag, but I'd be glad to write in my own! This set of tags is being used on the web with growing freqency, but may not have been adopted by Elm-Lang itself just yet.

---

Elm does expose node where you can define your own tag of any kind.

node
    :  String
    -> List (Attribute msg)
    -> List (Html msg)
    -> Html msg

This indicated a potential solution. Didn't lead anywhere though:

node "math" [] [ node "mo" [] [ text "∫"] ]

Answer 1

MathML is only supported in Safari and Firefox, so using Html.node for producing MathML is not a good cross-browser solution.

You have to use a polyfill for other browsers, such as KaTeX or MathJax.

KaTeX is known to be faster than MathJax and there is an integration for Elm already.

bsouthga/elm-katex module allows you to use LaTeX to output mathematical formulas in Elm. Use elm-github-install to install it for your project.

Have in mind that you will also need the CSS from KaTeX

Answer 2

You should be able to use Html.node to do anything html supports.

view model =
  math []
    [ node "msup" []
      [ node "mi" [] [ text "x" ]
      , node "mn" [] [ text "2" ]
      ]
    ]

You may want to to define math constructs instead of using node everywhere.