How to use markdown with elm-css/elm-spa? (answered)

Learn
1

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).

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

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?

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
    ]

The answer was in the docs :slight_smile:

Html.Styled provides a fromUnstyled function which can be passed to List.map along with the data returned by Markdown.toHtml

mapper tagged =
    Html.Styled.fromUnstyled tagged

view function...
 { title = "Notes"
    , body =
        UI.layout
            (List.map
                mapper
                (Markdown.toHtml
                    (Just customOptions)
                    MarkdownFile.notes
                )
            )
    }
2 Likes
2

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