Liquid Mode for Codemirror2

[alexkravets]

Hey guys,

is anyone working on Liquid mode for CodeMirror2?

Liquid templates are used in LocomotiveCMS and current branch uses CodeMirror 1 as main editor. I've integrated second version of CodeMirror and CoffeeScript support to LocomotiveCMS: https://github.com/alexkravets/engine - but there is no support for Liquid mode in CodeMirror 2 and now HTML mixed mode is used while editing Liquid templates and it doesn't highlight tags.

I wonder if there is anyone who may port Liquid mode for CM1 to CM2: https://github.com/tobi/liquid-editor/tree/master/public/codemirror/js

Thanks.

[marijnh]

Using a simple overlay mode with the HTML mixed mode is probably the easiest way to handle this. See http://codemirror.net/demo/mustache.html for an example of using an overlay.

[alexkravets]

Thanks. This might help a lot!

[kylefox]

I'm sure there's a much more elegant way of accomplishing this (not to mention, more features that could be added) ... but here's a very basic liquid overlay: https://gist.github.com/1356686

Just for anyone who hits this page after searching Google for "CodeMirror liquid parser", like I did :)

[marijnh]

Thanks for linking that!

[hennk]

Hi,

I just extracted the liquid mode we created for our template editor at https://github.com/axtro/codemirror_liquid_mode. It contains a pure liquid mode, and another overlay mode based on htmlmixed.

It also includes code to make the formatting module of CodeMirror2 compatible with the htmlmixedliquid mode, and another extension to comment/decomment liquid code.

You will see that the parser inserts some autocomplete information into the generated tokens. We use this information in our editor to provide intelligent autocompletion based on the type of the next expected token.

Cheers,

Henning

[joshco]

This all looks helpful, but where I'm confused about is how to I actually use this?
Do I just drop @kylefox 's code, as-is, into my applications javascript files?
Do I need to set change my code that calls the

editor = CodeMirror.fromTextArea(....

same question for @hennk 's approach
FWIW, Im using codemirror in a Rails app to let my users edit their templates using Liquid and HAML or ERB