# How to incorporate a string of HTML mark-up
**URL:** \
**Category:** Learn\
**Created:** [August 24, 2022, 6:29pm UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610 "2022-08-24T18:29:21Z")\
**Posts on this page:** 6\
**Page:** 1
**Author:**  [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [August 24, 2022, 6:29pm UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/1 "2022-08-24T18:29:21Z")
I am moving my first elm application to elm-spa.
I’d like to incorporate a [page of HTML](http://9birthdays.com/trying-elm.html) that previously stood apart from my elm code.
Its layout is a _little_ more than markdown enables so I’m looking for a way to get it into my elm-spa-based application:
```auto
view : Model -> View Msg
view model =
{ title = "Notes"
, body =
UI.layout
[ UI.h1 "Notes"
, -- I'd like to place it here
]
}
```
I’ve tried `node "inner-html" [attribute "content" content] []` but, while this adds my content to the page source, it’s not displayed.
---
**Author:**  [@hrnxm](https://discourse.elm-lang.org/u/hrnxm)\
**Post date:** [August 25, 2022, 7:08am UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/2 "2022-08-25T07:08:57Z")
~~I [don’t think](https://stackoverflow.com/questions/54341739/whats-the-alternative-to-innerhtml-attribute-in-elm-0-19) there’s an easy way to do that since Elm 0.19~~
[Update](https://gist.github.com/joakimk/57b4495fe5a4fd84506b?permalink_comment_id=2862393#gistcomment-2862393)
---
**Author:**  [@allanderek](https://discourse.elm-lang.org/u/allanderek)\
**Post date:** [August 25, 2022, 9:38am UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/3 "2022-08-25T09:38:14Z")
You can still use the `elm-markdown` with `sanitize = False`, and it will just render the HTML that you give it, assuming it’s just markdown html (no script tags for example). Since it’s your own HTML, turning sanitization off is much less risky.
Another possibility is to use an iframe with the [srcdoc attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc).
---
**Author:**  [@curiousme](https://discourse.elm-lang.org/u/curiousme)\
**Post date:** [August 25, 2022, 1:11pm UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/4 "2022-08-25T13:11:13Z")
A web component is a robust option:
```auto
class HtmlView extends HTMLElement {
constructor() {
super()
this._html = ""
}
get html() {
return this.shadow ? this.shadow.innerHTML : this._html
}
set html(value) {
this._html = value
if (this.shadow)
this.shadow.innerHTML = value
}
connectedCallback() {
this.shadow = this.attachShadow({ mode: 'closed' })
this.shadow.innerHTML = this._html
}
}
window.customElements.define('html-view', HtmlView);
```
This one uses the closed shadow DOM to prevent any CSS from leaking in/out, but you may equally let it open depending on your need.
And then in Elm:
```auto
module Html.HtmlView exposing (view)
import Html exposing (Attribute, Html, node)
import Html.Attributes exposing (property)
import Json.Encode
view : List (Attribute msg) -> String -> Html msg
view attributes html =
node "html-view" ((property "html" <| Json.Encode.string html) :: attributes) []
```
Of course, if you don’t like `view` as a name, change it, maybe to `rawHtml` or something else you prefer.
Finally use it like so in your code:
```auto
Html.HtmlView.view [] ""
```
---
**Author:**  [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [August 25, 2022, 3:16pm UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/5 "2022-08-25T15:16:14Z")
I compared `pablohirafuji/elm-markdown` with `hecrj/html-parser` purely for performance, I might add. The latter felt like native performance when tapping between my tabs of content whereas the HTML parser, paused shortly, before updating the content.
The key to configuring elm-markdown was to set `defaultOptions` to `Markdown.Config.ParseUnsafe` which enabled anchor tags to be rendered correctly.
---
**Author:**  [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 4, 2022, 3:17pm UTC](https://discourse.elm-lang.org/t/how-to-incorporate-a-string-of-html-mark-up/8610/6 "2022-09-04T15:17:11Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.