CODEWITHSUNDEEP
codemirrorelmace-editorcode-editorelm-port
at.
at.

Reputation: 52580

Is there an embeddable code editor for Elm?

I want to have a code editor widget, like CodeMirror or Ace, in my Elm webpage. Unfortunately, CodeMirror and Ace don't work with Elm as they modify the DOM (at least that's my understanding why they don't work).

I need something at least better than <textarea> for students to submit code. And for us to display code. Just automatic indenting and syntax highlighting for now.

Upvotes: 4

Views: 1090

Answers (2)

jpierson
jpierson

Reputation: 17384

I'm not sure if it's embeddable but I've heard a lot of good things about Ellie. Another consideration may to be the Monaco Editor which I believe was the basis for Microsoft's VSCode product as well as the code editor embedded into some parts of Microsoft Azure.

Upvotes: 0

Agnishom Chattopadhyay
Agnishom Chattopadhyay

Reputation: 2041

I personally found elm-ace very useful.

It requires some native code, so you will not be able to install it with elm package install. Instead copy the relevant source tree to yours and change your elm-package.json to include "native-modules": true like this.

While using this library, make sure you have manually added ace.js to index.html.

Once you have that setup, you can get a code editor this way:

view : Model -> Html Msg
view model =
    div []
        [ Ace.toHtml
            [ Ace.onSourceChange UpdateSource
            , Ace.value model.source
            , Ace.mode "lua"
            , Ace.theme model.theme
            , Ace.enableBasicAutocompletion True
            , Ace.enableLiveAutocompletion True
            , Ace.enableSnippets True
            , Ace.tabSize 2
            , Ace.useSoftTabs False
            , Ace.extensions [ "language_tools" ]
            ]
            []
        ]

Upvotes: 1

Related Questions