Add syntax coloring

[arichiardi]

We can add syntax coloring easily (hopefully), using for instance highlight.js or better its cljsjs package.

[arichiardi]

@tomasz-biernacki if you want you can work on this, toghther with a lil' improvement of the UI graphics...for instance I would love to make it a bit smaller (padding)

[arichiardi]

Another idea is to use the simpler (and cljs only) puget

because jqconsole supports ANSI: https://github.com/replit/jq-console#ansi-escape-code-sgr-support

[arichiardi]

This one is not easy, and after talking and sharing ideas, @tomasz-biernacki made a very good point: we need to somehow hook info the prompt (I opened an issue on jqconsole and either write ANSI or inject our own <pre><code> ....

Postponed for now.

[piecyk]

just to be on the same page we want to have color syntax while input to repl ? and while returning form it ? @arichiardi is right we can hack the jqconsole and alter the dom... i'm building reagent console when some free time i have this will be very easy but this is a song from future 🎅

[arichiardi]

Yes on .Write is easier with puget library, as jq-console supports ansi.
The problem is exactly the coloring during the input. We need a mix of event and injecting our stuff in the DOM.
I suggest having a look and PR jqconsole. I am the owner of release 2.12 basically (joking)

[arichiardi]

With jQuery for instance, can you capture the element between jqconsole-prompt and jqconsole-cursor? Then we spray some highlightjs on top and we are done!

[piecyk]

yes we can! but need to be smart about it... will do some crazy demo 👯 don't be scared

[arichiardi]

Now you are talking like Obama and I am scared

[arichiardi]

😄

[tomasz-biernacki]

1. We don't necessarily need to inject <pre><code>, this is the default highlight.js behavior. Can be any element, see Custom Initialization section here https://highlightjs.org/usage/
2. When selecting the element to update (the input to highlight) keep in mind that there could be more than one repl on the page (maybe in a blog post or something)

[piecyk]

some quick hack i don't like the flickering (resenting colors ) but i think we can fix it (yep it will work for more than one)

[arichiardi]

are you using highlightjs? that's cool, we will do the same with the write-output! it would be great to have syntax coloring for everything but we decrease brightness when the user evaluates.

[piecyk]

yep here i'm using the highlightjs but trying to move on puget can you check if we can use it in clojurescirpt i got some errors with require namespace? will continue with that today but will have time late evening....

[tomasz-biernacki]

@piecyk It seems it doesn't work, it cannot find the namespace. If you try to do it in a regular Clojure application it works (I checked and it prints coloured output to the console) so it seems it's a ClojureScript problem. I asked Andrea to double check and he had the same problem.

[piecyk]

Yes it's not ported to clojurescirpt, the quickest why to check if lib can run in cljs is to check if it has cljs files... maybe i will try to port. It's decencies are small and it would be much better that highlightjs let see.

[arichiardi]

By the way there exist cljsjs/highlightjs so everything can be ported to cljs :)

[arichiardi]

Guys, I opened an issue, can you write that you have the same problem? 😄
greglook/puget#27

[arichiardi]

As you can see in the issue guys, no luck with puget, but there is fipp

[piecyk]

fipp alone is not very useful for us, we need colors! man you read my mind i was driving car back home and was thinking about opening the issue... and 💥 there is an issue 👍

[arichiardi]

An other idea is to add what we need (a custom class) or key press events to jq-console. It shouldn't take long. What do you think about it? In any case, even with puget working we will have the problem of inject custom stuff after the prompt..

[piecyk]

this exactly what i'm doing now in the gif presented, i'm catching the event and coloring the block it's not pretty, it's dirty... i will have fresh look on that over the weekend...

[arichiardi]

That's great, thanks for your help Damian.

[arichiardi]

@piecyk I was thinking, maybe I can hack jq-console to trigger an event each time one function (that we will pass) returns true?
For instance, our function returns true only if the input is a clojure keyword.....the user types de, our fn returns false...it returns true on the f.
It should be easy. What do you think?

[arichiardi]

Closed by #56

[arichiardi]

I notice a lot of flashing, we will work on this ok?

[tomasz-biernacki]

@piecyk I noticed two things:

1. it flashes a little when writing code, my browser is Chrome, Version 46.0.2490.80 (64-bit) on Mac OS X 10.10.5
2. when you are at the end of the line and type, before the closing parens, a <code> tag appears and disappears

[arichiardi]

Good job @piecyk with #59

[arichiardi]

I reopen this issue, in every project there is a painful point.
Basically because we are using internals of jqconsole that are not declared in its externs, the minified version of our app fails big time.

So, two solutions, the cleaner is to change the highlighing so that we can have something cleaner using keypress events...
The second is faster, AKA we add the entries to our externs file...

[arichiardi]

A better explanation on how to wrap JS components -> https://github.com/Day8/re-frame/wiki/Using-Stateful-JS-Components

[arichiardi]

@piecyk I also opened a repo called cljs-console for a reagent-only console. I think we can have something quickly. But now I am busy with replumb 😄