Syntax highlighting in Elm.
A highlighted code.
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.
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 -> 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.
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.
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.
{ 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.
{ 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.