Use an actual editor showing the snippet

[zaggino]

Suggested by @TomMalbran:

It would be awesome to have an actual editor when showing the snippet. This might be hard to do, but it will make the code easier to read. I guess that when saving the snippets we can give them an extension, so that we know the mode. The editor could be as read only, but with inputs to be able to modify the parameter (not sure how this last part can be done).

[TomMalbran]

I think that it will be really easy to implement it using http://codemirror.net/demo/runmode.html
It can work almost like now, but the widgets can have a language to determine the syntax highlighting.

[zaggino]

Great hint, thanks 👍

[TomMalbran]

I was looking for a syntax highlighter and found this, which I forgot it existed. Looking at the code it seems like it is easy to add it.

[TomMalbran]

I did a quick dirty test and it was really easy to use it.

[zaggino]

Have you tried to use it in Brackets? When I use

var CodeMirror = brackets.getModule("thirdparty/CodeMirror2/lib/codemirror")

CodeMirror.runMode is undefined, dunno why, will probably have to investigate later.

[TomMalbran]

Yes. You need to import the runmode addon, which is not imported in Brackets.

[zaggino]

Implemented in version 0.3.0.

[TomMalbran]

Awesome this is working nice.

I saw that you copied the runmode code and modified it. If you don't want to do it, I had it working by making a dummy div with jQuery, but without appending it to the window, passing it to runmode and after grabbing its html.

For the modes, what do you think about giving an extension to the snippets when you create them. You can save them with that extension and get the mode from there. If the snippet is a general one, you can leave it without an extension, and no highlighting will be applied to it.

[zaggino]

I've copied the runmode because I didn't manage to get it actually included from the extension code, how to do that? When I used brackets.getModule(...) I got an error that it's not loaded yet. Haven't found a sample in the default extensions where someone would be doing the similar thing. I have modified only this part, real code stayed original https://github.com/zaggino/brackets-snippets/blob/master/src/CodeMirrorRunMode.js#L5-L9

I was thinking about some meta-data for the snippets, not only the extension because the filename is related to the actual snippet name. For that I'll have to improve snippet editor to be able to save it.

[TomMalbran]

To load it you need to use brackets.getModule([...]) Notice the extra square brackets.

[zaggino]

In version 0.4.0 you can define metadata ##lang: js at the beginning of the file. See default samples. To keep it simple, lang is treated as a file extension. This keeps the file (snippet) name clean of it. Also allows to have other metadata like ##keyBinding: alt-key in the future.

[TomMalbran]

Cool. Format looks a bit weird to write, but I guess that it can be fixed with some UI later.

I noticed that I didn't got syntax highlighting for php. It might be something extra required for that language?

[zaggino]

Yeah, I plan to hide the format from the editor later, but I didn't want to spend time with it right now so currently you see exactly what is being written into the file. I'll check about the php tomorrow, I probably know where I went wrong.

[TomMalbran]

I agree. As a first implementation it works good, and it can be improved later.