SyntaxHighlight

Syntax highlighting in Elm.

A highlighted code.

Html view

toBlockHtml : Maybe Int -> HCode -> Html msg

Transform a highlighted code into a Html block. The Maybe Int argument is for showing or not line count and, if so, starting from what number.

toInlineHtml : HCode -> Html msg

Transform a highlighted code into inline Html.

import SyntaxHighlight exposing (elm, toInlineHtml)


info : Html msg
info =
    p []
        [ text "This function signature "
        , elm "isEmpty : String -> Bool"
            |> Result.map toInlineHtml
            |> Result.withDefault
                (code [] [ text "isEmpty : String -> Bool" ])
        , text " means that a String argument is taken, then a Bool is returned."
        ]

toStaticBlockHtml : Maybe Int -> HCode -> String

Transform a highlighted code into a static (pure text) Html block. The Maybe Int argument is for showing or not line count and, if so, starting from what number.

toStaticInlineHtml : HCode -> String

Transform a highlighted code into static (pure text) inline Html.

Helpers

type Highlight

= Highlight

| Add

| Del

Highlight type.

Highlight will highlight the line in a way to differentiate it from the rest, like github's yellow background.
Add will highlight in a manner that gives the ideia of new content added.
Del will highlight in a manner that gives the ideia of removed content.

The specific styles will depend on the chosen Theme.

highlightLines : Maybe Highlight -> Int -> Int -> HCode -> HCode

Highlight lines given a highlight type, start and end index. If no highlight type is given (Nothing), it will remove any highlight from the line range. Negative indexes are taken starting from the end of the list.

Languages

Error while parsing should not happen. If it happens, please open an issue with the code that gives the error and the language.

css : String -> Result (List DeadEnd) HCode

Parse CSS syntax.

elm : String -> Result (List DeadEnd) HCode

Parse Elm syntax.

javascript : String -> Result (List DeadEnd) HCode

Parse Javascript syntax.

python : String -> Result (List DeadEnd) HCode

Parse Python syntax.

sql : String -> Result (List DeadEnd) HCode

Parse SQL syntax.

xml : String -> Result (List DeadEnd) HCode

Parse XML syntax.

json : String -> Result (List DeadEnd) HCode

Parse JSON syntax.

noLang : String -> Result (List DeadEnd) HCode

Parse code from an unknown language with generic styling.

Themes

type Theme

A theme defines the background and syntax colors.

useTheme : Theme -> Html msg

Transform a theme into Html. Any highlighted code transformed into Html in the same page will be themed according to the chosen Theme.

To preview the themes, check out the demo.

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


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

If you prefer to use CSS external stylesheet, you do not need this, just copy the theme CSS into your stylesheet. All themes can be found here.

monokai : Theme

Monokai inspired theme.

gitHub : Theme

GitHub inspired theme.

oneDark : Theme

Atom One Dark inspired theme.

Console view

type alias ConsoleOptions =

{ default : String -> String

, highlight : String -> String

, addition : String -> String

, deletion : String -> String

, comment : String -> String

, style1 : String -> String

, style2 : String -> String

, style3 : String -> String

, style4 : String -> String

, style5 : String -> String

, style6 : String -> String

, style7 : String -> String

}

Console styling options. You can use the rtfeldman/console-print package to fill in the styles.

The common uses of the styles are the following:

default: Default style
highlight: Highlight style
addition: Addition style
deletion: Deletion style
comment: Comment
style1: Number
style2: Literal string, attribute value
style3: Keyword, tag, operator symbols (=+-*/...)
style4: Keyword 2, group symbols ({}(),), type signature
style5: Function, attribute name
style6: Literal keyword, capitalized types
style7: Argument, parameter

toConsole : ConsoleOptions -> HCode -> List String

Transform a highlighted code into a list of console highlighted strings given the styling options defined by ConsoleOptions. Each string in the list is a line.

Custom transformation

type alias CustomTransform fragment line =

{ noOperation : List fragment -> line

, highlight : List fragment -> line

, addition : List fragment -> line

, deletion : List fragment -> line

, default : String -> fragment

, comment : String -> fragment

, style1 : String -> fragment

, style2 : String -> fragment

, style3 : String -> fragment

, style4 : String -> fragment

, style5 : String -> fragment

, style6 : String -> fragment

, style7 : String -> fragment

}

Custom transform options. The common uses of the styles are the following:

noOperation: No operation (aplly to the whole line)
highlight: Highlight style (aplly to the whole line)
addition: Addition style (aplly to the whole line)
deletion: Deletion style (aplly to the whole line)
default: Default style
comment: Comment
style1: Number
style2: Literal string, attribute value
style3: Keyword, tag, operator symbols (=+-*/...)
style4: Keyword 2, group symbols ({}(),), type signature
style5: Function, attribute name
style6: Literal keyword, capitalized types
style7: Argument, parameter

toCustom : CustomTransform fragment line -> HCode -> List line

Transform a highlighted code into a list of anything you want. Each line in the list corresponds to a line in the original code.

Modules

SyntaxHighlight

pablohirafuji/elm-syntax-highlight/3.4.1