https://github.com/pablohirafuji/elm-syntax-highlight

Syntax highlighting in Elm
https://github.com/pablohirafuji/elm-syntax-highlight

elm highlight syntax

Last synced: 1 day ago
JSON representation

Syntax highlighting in Elm

• Host: GitHub
• URL: https://github.com/pablohirafuji/elm-syntax-highlight
• Owner: pablohirafuji
• License: apache-2.0
• Created: 2017-08-11T17:21:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-10T03:39:39.000Z (4 months ago)
• Last Synced: 2024-12-22T16:06:25.489Z (9 days ago)
• Topics: elm, highlight, syntax
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/pablohirafuji/elm-syntax-highlight/latest
• Size: 563 KB
• Stars: 77
• Watchers: 4
• Forks: 15
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Elm Syntax Highlight

Syntax highlighting in Elm. [Demo](https://pablohirafuji.github.io/elm-syntax-highlight/).

## Language support

- Elm

- Javascript

- Xml

- Css

- Python (Thanks [@brandly](https://github.com/brandly)!)

- SQL (Thanks [@oschmid](https://github.com/oschmid)!)

- JSON

- Nix (Thanks [@anddani](https://github.com/anddani)!)

And there is a `noLang` generic option for when the language is unknown (Thanks [@Anton-4](https://github.com/Anton-4)!).

## 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](https://pablohirafuji.github.io/elm-syntax-highlight/themes.html).

### Using `useTheme` helper

Place the `useTheme` function with your chosen theme anywhere on your view.

```elm

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.