Here's what I have so far:
module Main exposing (..)
import FNV
import Html exposing (..)
import Html.Attributes exposing (attribute, id)
import Html.Events exposing (onInput)
-- Model
type alias Model =
String
model : Model
model =
""
type Msg
= Change String
update : Msg -> Model -> Model
update msg model =
case msg of
Change str ->
str
view : Model -> Html Msg
view model =
div []
[ textarea [ onInput Change ] []
, div [ id "katex" ] []
, node "script" [ attribute "class" ("katex-" ++ (toString
(FNV.hashString model))) ] [ text ("katex.render('" ++ model ++ "',
document.getElementById('katex'))") ]
]
main : Program Never Model Msg
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
On Tuesday, February 14, 2017 at 5:41:11 PM UTC-8, [email protected]
wrote:
>
> Hi all!
>
> Just started using Elm and I'm really liking it.
>
> One question I had is whether it is possible to integrate a library like
> KaTeX that actually modifies the content of a DOM element that is
> controlled by Elm.
>
> If so how would I do that? React/Mithril have ways of interrupting the
> rendering lifecycle to squeeze in your own behavior, but how does Elm allow
> for that?
>
> Another simple way to do it is to render a script tag, like:
>
> <div id="katex">
> <script> KaTeX.render('...', document.getElementById('katex')) </script>
>
> I can render a script element, but I need to force elm to re-render the
> script tag each time, and for that, React allows you to put a key
> attribute. Is there something similar in Elm?
>
> There are a lot of other widget-like js libraries that I wanted to include
> on my webpage, like musicalabc (abcjs) or mermaid.js, or highlight.js, etc.
>
> Any ideas? Thanks!
>
> Vishesh
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
