Elm Syntax Highlight

Syntax highlighting in Elm. Demo.

Language support

• Elm
• Javascript
• Xml
• Css
• Python (Thanks @brandly!)
• SQL (Thanks @oschmid!)
• JSON
• Nix (Thanks @anddani!)
• Kotlin (Thanks @anddani!)
• Go (Thanks @ahmedakef!)

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

You can also write a custom syntax using your own parser, by using the API provided in the SyntaxHighlight.Custom module.

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.