Use a parser from elm/parser to define your own custom syntax. Your parser must produce a list of Fragment values out of the code string.

Here's a small example, to give you an idea of how to write your syntax. You can also check the custom syntax example in the repo.

import Html import Parser exposing (Parser) import SyntaxHighlight import SyntaxHighlight.Custom as Custom

viewHighlightedCustomSyntax : String -> Html msg
viewHighlightedCustomSyntax code =
    code
        |> Custom.fromParser parser
        |> Result.map (SyntaxHighlight.toBlockHtml Nothing)
        |> Result.withDefault (Html.text "[Parser error]")


parser : Parser (List Custom.Fragment)
parser =
    -- This is just to demonstrate the kind of output
    -- your parser can have. Please check the `elm/parser`
    -- package to learn how to write a proper parser.
    Parser.succeed
        [ Custom.fragment "2"
            |> Custom.setFragmentStyle Custom.style1
        , Custom.fragment " "
        , Custom.fragment "+"
            |> Custom.setFragmentStyle Custom.style3
            |> Custom.setFragmentClasses "plus"
        , Custom.fragment " "
        , Custom.fragment "3"
            |> Custom.setFragmentStyle Custom.style1
        ]

One single styled portion of custom parsed code. Construct using fragment or newline, and use it as the returned value of your parser when using fromParser.

Constructs a Fragment value out of a part of the code you're parsing. Typically should represent one syntactic unit in the code, such as a string, an identifier, a keyword, an operator, whitespace, etc. You can add styling details to this Fragment using setFragmentStyle and setFragmentClasses.

Check the fromParser documentation for an example.

A special kind of Fragment: a way to insert an explicit break into a new line when parsing your code. You can optionally pass it a Highlight value to change how the following line is rendered.

Please note that regular line breaks ('\n') in a fragment are interpreted the same way as newline Nothing. So you don't really need to use this at all unless you want to highlight a line in your custom syntax code.

Here's an example of how you can mark a line as “added” using this function.

import Parser
import SyntaxHighlight
import SyntaxHighlight.Custom as Custom


parser =
    Parser.succeed
        [ Custom.fragment "first line"
        , Custom.newline (Some SyntaxHighlight.Add)
        , Custom.fragment "added line"
        , Custom.newline Nothing
        , Custom.fragment "normal line"
        ]

Sets a specific Style to a Fragment, which gives it a different color depending on the theme used.

You can optionally use this function to give a Fragment one or more custom CSS classes (separated by spaces), if you want more control over how you style your custom syntax.

The style of a Fragment, whose actual appearance is given by the theme that is applied. Construct using the different style* definitions provided, and set it to a fragment using setFragmentStyle.

import SyntaxHighlight.Custom as Custom


aKeywordFragment =
    Custom.fragment "case"
        |> Custom.setFragmentStyle Custom.style3

The default style for a fragment.

Style specific for comments.

Style typically used for numbers.

Style typically used for literal strings and attribute values.

Style typically used for keywords, tags and operator symbols (=+-*/…).

Style typically used for keywords (alternative), group symbols ({}(),) and type signatures.

Style typically used for functions and attribute names.

Style typically used for literal keywords and capitalized types.

Style typically used for arguments and parameters.