# How to use markdown with elm-css/elm-spa?

**URL:** <https://discourse.elm-lang.org/t/how-to-use-markdown-with-elm-css-elm-spa/8612>\
**Category:** Learn\
**Created:** [August 26, 2022, 10:27am UTC](https://discourse.elm-lang.org/t/how-to-use-markdown-with-elm-css-elm-spa/8612 "2022-08-26T10:27:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carl/32/4542_2.png) [@Carl](https://discourse.elm-lang.org/u/Carl)\
**Post date:** [August 26, 2022, 10:27am UTC](https://discourse.elm-lang.org/t/how-to-use-markdown-with-elm-css-elm-spa/8612/1 "2022-08-26T10:27:37Z")

</div>

I have an elm-spa based application which has two pages.  
One page uses `elm-css` with `Html.Styled` - I’ve successful edited my app to use `elm-css` - it’s when I tried filling one page with markdown text that I hit this problem.

One page has markdown content. I’ve used `pablohirafuji/elm-markdown` to parse the data to `Html` (with `Markdown.toHtml`).

Have I gone down the wrong route?

I think `elm-spa` would really like one `Html` to be used by all pages. I would too 🙂

In `UI.elm` I think the line `Html.main_ [] children` is where one type is required.

So the specific question: how to use `pablohirafuji/elm-markdown` with `elm-spa/elm-css`?

Or, a more general question: how to use get markdown parsed and used within an `elm-spa/elm-css’ application?

```auto
module UI exposing (h1, layout)

import Gen.Route as Route exposing (Route)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attributes

layout : List (Html msg) -> List (Html msg)
layout children =
    let
        viewLink : String -> Route -> Html msg
        viewLink label route =
            Html.a [Attributes.href (Route.toHref route)] [Html.text label]
    in
    [Html.div [ Attributes.class "container"]
        [Html.header [ Attributes.class "navbar"]
            [ viewLink "Home" Route.Home_
            , viewLink "Notes" Route.Notes
            ]
        ]
    , Html.main_ [] children
    ]

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 5, 2022, 10:28am UTC](https://discourse.elm-lang.org/t/how-to-use-markdown-with-elm-css-elm-spa/8612/2 "2022-09-05T10:28:32Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.