Elm Syntax Highlight

Syntax highlighting in Elm. Demo.

Language support

• Elm
• Javascript
• Xml
• Css
• Python (Thanks @brandly!)
• SQL (Thanks @oschmid!)
• JSON

And there is a noLang generic option for when the language is unknown (Thanks @Anton-4!).

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

All themes 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.