pablohirafuji / elm-syntax-highlight / SyntaxHighlight

Syntax highlighting in Elm.


type HCode

A highlighted code.

Html view

toBlockHtml : Maybe Basics.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 Basics.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.

The specific styles will depend on the chosen Theme.

highlightLines : Maybe Highlight -> Basics.Int -> Basics.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 Parser.DeadEnd) HCode

Parse CSS syntax.

elm : String -> Result (List Parser.DeadEnd) HCode

Parse Elm syntax.

javascript : String -> Result (List Parser.DeadEnd) HCode

Parse Javascript syntax.

python : String -> Result (List Parser.DeadEnd) HCode

Parse Python syntax.

sql : String -> Result (List Parser.DeadEnd) HCode

Parse SQL syntax.

xml : String -> Result (List Parser.DeadEnd) HCode

Parse XML syntax.

json : String -> Result (List Parser.DeadEnd) HCode

Parse JSON syntax.

nix : String -> Result (List Parser.DeadEnd) HCode

Parse Nix syntax.

noLang : String -> Result (List Parser.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:

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:

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.