search

codemirror / CodeMirror-v1

An editable-iframe based code editor in JavaScript. See https://github.com/marijnh/CodeMirror for the currently maintained version
http://codemirror.net/
Other
362 stars 63 forks source link

Liquid Mode for Codemirror2 #57

Open alexkravets opened 13 years ago

alexkravets commented 13 years ago

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 13 years ago

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 13 years ago

Thanks. This might help a lot!

kylefox commented 12 years ago

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 12 years ago

Thanks for linking that!

hennk commented 12 years ago

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 8 years ago

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