Liquid Mode for Codemirror2

alexkravets commented

2011-09-17 17:26:00 +02:00

(Migrated from github.com)

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.

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 commented

2011-09-19 09:09:50 +02:00

(Migrated from github.com)

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 commented

2011-09-19 09:32:25 +02:00

(Migrated from github.com)

Thanks. This might help a lot!

kylefox commented

2011-11-11 01:11:24 +01:00

(Migrated from github.com)

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 :)

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 commented

2011-11-11 20:02:03 +01:00

(Migrated from github.com)

Thanks for linking that!

hennk commented

2012-05-11 15:02:43 +02:00

(Migrated from github.com)

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

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 commented

2015-11-15 05:54:19 +01:00

(Migrated from github.com)

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

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

Rows
Columns

Liquid Mode for Codemirror2 #57