Elm Syntax Highlight

Syntax highlighting in Elm. Demo.

Themes

You can define the theme either by copying and pasting the theme styles into your .css file or using the useTheme helper.

Copying and pasting the theme

The theme and required styles can be found here.

Using useTheme helper

Place the useTheme function with your chosen theme anywhere on your view.

import SyntaxHighlight exposing (useTheme, monokai, elm, toBlockHtml)

view : Model -> Html msg
view model =
    div []
        [ useTheme monokai
        , elm model.elmCode
            |> Result.map (toBlockHtml (Just 1))
            |> Result.withDefault
                (pre [] [ code [] [ text model.elmCode ]])
        ]

Thanks

Thank you Evan for bringing joy to the frontend.