Skip to content

Instantly share code, notes, and snippets.

@joakimk
Last active July 1, 2022 12:18
  • Star 13 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save joakimk/57b4495fe5a4fd84506b to your computer and use it in GitHub Desktop.
How to embed raw HTML in Elm
div [ (Html.Attributes.property "innerHTML" (Json.Encode.string "Test <em>em</em> here.")) ] []
@phylor
Copy link

phylor commented Mar 14, 2019

As a summary for Elm 0.19:

Installation:

elm install hecrj/html-parser

Utility function:

import Html.Parser
import Html.Parser.Util

textHtml : String -> List (Html.Html msg)
textHtml t =
    case Html.Parser.run t of
        Ok nodes ->
            Html.Parser.Util.toVirtualDom nodes

        Err _ ->
            []

Usage:

span [] (textHtml "<i>Hello world</i>")

@Piping
Copy link

Piping commented Apr 24, 2019

@phylor what is Message?

@phylor
Copy link

phylor commented Apr 29, 2019

@Piping That is my message type (which is handed to the update function for example). It's usually called msg in most examples, I'll change it in the code.

@karantan
Copy link

As a summary for Elm 0.19:

Installation:

elm install hecrj/html-parser

Utility function:

import Html.Parser
import Html.Parser.Util

textHtml : String -> List (Html.Html msg)
textHtml t =
    case Html.Parser.run t of
        Ok nodes ->
            Html.Parser.Util.toVirtualDom nodes

        Err _ ->
            []

Usage:

span [] (textHtml "<i>Hello world</i>")

This worked for me. Thank you <3

@sourabh2106
Copy link

sourabh2106 commented Apr 30, 2020

@phylor Installation for elm install hecrj/html-parser doesnt work, getting no package with that name

@phylor
Copy link

phylor commented May 3, 2020

@sourabh2106 Works fine for me. The package is still in the repository. Are you using elm 0.19?

$ elm --version
0.19.1

$ elm install hecrj/html-parser
Here is my plan:

  Add:
    elm/parser           1.1.0
    hecrj/html-parser    2.3.4
    rtfeldman/elm-hex    1.0.0

Would you like me to update your elm.json accordingly? [Y/n]:
Success!

@kvncf
Copy link

kvncf commented May 6, 2020

thanks!!! @phylor that worked for me in v0.19.1 !!! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment