This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 2.0.0
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.1
Committed At 2019-01-05 10:51:03 UTC

Modules

    README

    KaTeX for Elm

    Create strings or HTML elements with math using the Kahn Academy's KaTeX javascript library.

    No ports are necessary, but the KaTeX library must be loaded in the event loop. See §Loading KaTeX at the bottom for details.

    The layout of this Elm package

    There are four modules in this package: Katex, Katex.Configs.Math, Katex.Configs.Human, and Katex.Configs. They all perform the same task, but at different levels of customizability.

    They all contain alike LaTeX instance creators:

    • human - for writing regular text
    • inline - for writing LaTeX code in inline math environment
    • display- for writing LaTeX code in display math environment

    and alike processors for showing LaTeX:

    • print - for turning a LaTeX instance into a string
    • generate - for generating functions that process LaTeX

    The only difference between the modules is their simplicity-versatility tade-off.

    How it works

    We use human for writing regular text, and inline/display to write LaTeX code in inline/display math environment. These all return LaTeX instances.

    Each such LaTeX instance can be printed to a string (which the KaTeX library will recognize and parse after Elm loads). More generally, you can generate a function which parses LaTeX instances into anything.

    Working examples

    We will start with the simplest module, then show what can be done with the others.

    Katex

    In this example we use generate to create an HTML emitting function which puts display math in a div, but inline math and human text in a span.

    module Examples.Simple exposing (main)
    
    import Html as H exposing (Html)
    import Katex as K
        exposing
            ( Latex
            , human
            , inline
            , display
            )
    
    
    passage : List Latex
    passage =
        [ human "We denote by "
        , inline "\\phi"
        , human " the formula for which "
        , display "\\Gamma \\vDash \\phi"
        ]
    
    
    view : Html a
    view =
        let
            htmlGenerator isDisplayMode stringLatex =
                case isDisplayMode of
                    Just True ->
                        H.div [] [ H.text stringLatex ]
    
                    _ ->
                        H.span [] [ H.text stringLatex ]
        in
            passage
                |> List.map (K.generate htmlGenerator)
                |> H.div []
    
    
    main : Program Never () msg
    main =
        H.beginnerProgram
            { model = ()
            , update = flip always
            , view = always view
            }
    

    Katex.Configs.Math

    In this module we can configure how math code is parsed. In the following example, we use this functionality to replace \phi with \varphi, depending on the model.

    module Examples.Configs.Math exposing (main)
    
    import Html as H exposing (Html)
    import Regex exposing (HowMany(All), regex, escape, replace)
    import Katex.Configs.Math as K
        exposing
            ( Latex
            , human
            )
    
    
    type alias Config =
        Bool
    
    
    type alias Data =
        String
    
    
    selector : Data -> Config -> String
    selector string isVar =
        let
            phi =
                string
    
            varphi =
                replace All (regex (escape "\\phi")) (always "\\varphi") string
        in
            if isVar then
                varphi
            else
                phi
    
    
    inline : Data -> Latex Config
    inline =
        K.inline << selector
    
    
    display : Data -> Latex Config
    display =
        K.display << selector
    
    
    passage : List (Latex Config)
    passage =
        [ human "We denote by "
        , inline "\\phi"
        , human " the formula for which "
        , display "\\Gamma \\vDash \\phi"
        ]
    
    
    view : Config -> Html a
    view isVar =
        let
            htmlGenerator _ _ stringLatex =
                H.span [] [ H.text stringLatex ]
        in
            passage
                |> List.map (K.generate htmlGenerator isVar)
                |> H.div []
    
    
    main : Program Never Config msg
    main =
        H.beginnerProgram
            { model = True
            , update = flip always
            , view = view
            }
    

    Katex.Configs.Human

    In this module we can configure how human text is parsed. In the following example, we use this functionality to switch between Hebrew and English, depending on the model.

    module Examples.Configs.Human exposing (main)
    
    import Html as H exposing (Html)
    import Html.Attributes exposing (dir)
    import Katex.Configs.Human as K
        exposing
            ( Latex
            , inline
            , display
            )
    
    
    type alias Config =
        Bool
    
    
    type alias Data =
        ( String, String )
    
    
    selector : Data -> Config -> String
    selector ( english, hebrew ) isHeb =
        if isHeb then
            hebrew
        else
            english
    
    
    human : Data -> Latex Config
    human =
        K.human << selector
    
    
    passage : List (Latex Config)
    passage =
        [ human
            ( "We denote by "
            , "נסמן ב "
            )
        , inline "\\phi"
        , human
            ( " the formula for which "
            , " את הנוסחה עבורה "
            )
        , display "\\Gamma \\vDash \\phi"
        , human
            ( "."
            , "."
            )
        ]
    
    
    view : Config -> Html a
    view isHeb =
        let
            direction =
                if isHeb then
                    dir "rtl"
                else
                    dir "ltr"
    
            htmlGenerator _ _ stringLatex =
                H.span [] [ H.text stringLatex ]
        in
            passage
                |> List.map (K.generate htmlGenerator isHeb)
                |> H.div [ direction ]
    
    
    main : Program Never Config msg
    main =
        H.beginnerProgram
            { model = True
            , update = flip always
            , view = view
            }
    

    Katex.Configs

    In this module we can configure how both math code and human text are parsed - a combination of the previous modules.

    Loading KaTeX

    Beyond the need to load the KaTeX library (both css and js), the KaTeX script must run after Elm has loaded the text. The minimal example below of a working page should explain this concept in practice.

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
        <style>
          /* LaTeX display environment will effect the LaTeX characters but not the layout on the page */
          span.katex-display {
            display: inherit; /* You may comment this out if you want the default behavior */
          }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script>
        <title></title>
      </head>
      <body>
        <!-- Exposing `Elm.Main` -->
        <script src="main.js"></script>
        <!-- Run the app + render LaTeX using KaTeX (note the `setTimeout`!) -->
        <script>Elm.Main.fullscreen(); setTimeout(function () {
          renderMathInElement(document.body, {delimiters: [{left: "$begin-inline$", right: "$end-inline$", display: false},{left: "$begin-display$", right: "$end-display$", display: true}]});
        }, 0);</script>
      </body>
    </html>